Blog article updates /blog/colors-in-css

src/content/blog/colors-in-css.mdx

@@ -15,19 +15,19 @@ import ColorPickerOklch from "../../components/_ColorPickerOklch.jsx";
 
 ### A little bit of history
 
-First, there was the [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) ("Lab") perceptually uniform color space. Then in 2020, [Björn Ottosson created Oklab](https://bottosson.github.io/posts/oklab/) ("an OK Lab color space") to address Lab's problems when used with modern displays. But Oklab uses Cartesian coordinates which is great if you're a computer, but pretty cryptic otherwise… So OKLCH was added to the mix soon after, using polar coordinates, which makes it much easier to use (similar to HSL) for non-robots.
+First, there was the [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) ("Lab") perceptually uniform color space. Then in 2020, [Björn Ottosson created Oklab](https://bottosson.github.io/posts/oklab/) ("an OK Lab color space") to address Lab's problems. But Oklab uses Cartesian coordinates, which are great if you're a computer, but pretty cryptic otherwise… So OKLCH was added to the mix, using polar coordinates, which makes it much easier to use (similar to HSL) for non-robots.
 
 ### OKLCH syntax
 
 ```css
 .elem {
-  background-color: oklch(0.59 0.13 242); /*  blue */
+  background-color: oklch(0.59 0.13 242); /* blue */
 }
 ```
 
 - **L**ightness controls how light or dark the color is. From `0` – `1` (or `0%` – `100%`).
-- **C**hroma is similar to saturation, but [different](https://en.wikipedia.org/wiki/Munsell_color_system#Chroma): it's how a color _looks_ compared to a neutral gray of the same brightness. A "safe" range is `0` – `0.35`, Values above ~`0.37` will be clipped on most monitors.
-- **H**ue controls what part of the color wheel to sample. From `0deg` – `360deg`
+- **C**hroma is similar to saturation, but [different](https://en.wikipedia.org/wiki/Munsell_color_system#Chroma): it's how a color _looks_ compared to a neutral gray of the same lightness. A "safe" range is roughly `0` – `0.32` for sRGB and `0.36` for P3, and often less on most monitors.
+- **H**ue controls what part of the color wheel to sample. From `0deg` – `360deg`.
 
 ### Why use OKLCH
 
@@ -64,7 +64,7 @@ You can create design system palettes using the same hue while tweaking lightnes
 
 ### Accessibility
 
-This "perceptually uniform" business makes it the best option for a11y friendly palettes. Here's a comparison between HSL and OKLCH that makes it clear why. We're only changing the **Hue** angle by the same amount in both. (Switch to dark mode to make it even more evident.)
+This "perceptually uniform" business makes it the best option for a11y-friendly palettes. Here's a comparison between HSL and OKLCH that makes it clear why. We're changing the **Hue** angle by the same amount in both and keeping the **Lightness** the same. (Switch to dark mode to make it even more evident.)
 
 {/* prettier-ignore */}
 <div class="blog-grid-hsl-v-oklch">
@@ -94,10 +94,10 @@ This "perceptually uniform" business makes it the best option for a11y friendly
 
 ### Wide gamut P3 colors
 
-OKLCH works with [wide-gamut][gamut] colors, and your browser will render the closest approximation if your screen can't display it. (Make sure you look at the swatches below on a monitors with P3 color support.)
+OKLCH works with [wide-gamut][gamut] colors, and your browser will render the closest approximation if your screen can't display it. (Make sure you look at the swatches below on a monitor with P3 color support.)
 
 {/* prettier-ignore */}
-<div class="grid text-center c-base-950  mt-md2 mb-md2" col="2">
+<div class="grid text-center c-base-950 mt-md2 mb-md2" col="2">
     <div class="grid_item p-sm2" style="background-color: rgb(255, 0, 34)">sRGB</div>
     <div class="grid_item p-sm2" style="background-color: oklch(0.6471 0.296 26.47)">Display-P3</div>
     <div class="grid_item p-sm2" style="background-color: rgb(0, 252, 21)">sRGB</div>
@@ -108,26 +108,26 @@ OKLCH works with [wide-gamut][gamut] colors, and your browser will render the cl
 
 ### Intuitive to use
 
-OKLCH mental model is similar to LCH (but with perceptually uniform results): pick a **Hue**, then adjust the **Lightness**/**Chroma** (or vice versa). Below is an OKLCH color picker so you can get a feel for how it works. (The "Gamut correction" warning tells you when the color is out of range for your display.)
+The OKLCH mental model is similar to LCH (but with perceptually uniform results): pick a **Hue**, then adjust the **Lightness**/**Chroma** (or vice versa). Below is an OKLCH color picker so you can get a feel for how it works. (The "Gamut correction" warning tells you when the color is out of range for your display.)
 
 <ColorPickerOklch client:visible />
 
 ## Use Oklab for gradients
 
 <CanIUse feature="css.types.color.oklab" />
 
-RGB is notorious for interpolating colors with the artistic flair of a vacuum cleaner. OKLCH is great, but it can lead to some unexpected results with gradients because of its polar coordinates underpinnings. Most of the time, Oklab will get you the best results.
+sRGB is notorious for interpolating colors with the artistic flair of a vacuum cleaner. OKLCH is great, but it can lead to some unexpected results with gradients because of its polar coordinates underpinnings. Most of the time, Oklab will get you the best results.
 
 {/* prettier-ignore */}
 <div
   class="mb-sm2 p-sm2"
-  style="background: linear-gradient(90deg,  #ff00ff,#00ff00);">sRGB</div>
+  style="background: linear-gradient(90deg, #ff00ff,#00ff00);">sRGB</div>
 <div
   class="mb-sm2 p-sm2"
-  style="background: linear-gradient(in oklab  90deg,  #ff00ff,#00ff00);">Oklab</div>
+  style="background: linear-gradient(in oklab 90deg, #ff00ff,#00ff00);">Oklab</div>
 <div
   class="mb-md2 p-sm2"
-  style="background: linear-gradient(in oklch  90deg, #ff00ff,#00ff00);">OKLCH</div>
+  style="background: linear-gradient(in oklch 90deg, #ff00ff,#00ff00);">OKLCH</div>
 
 ```css
 .srgb {
@@ -151,7 +151,7 @@ For a cleaner syntax, you can drop the commas and units, and add the alpha chann
 /* red at 0.5 opacity */
 
 .elem {
-  oklch(0.628 0.2577 29.23 / 0.5)
+  color: oklch(0.628 0.2577 29.23 / 0.5);
 }
 
 .elem {
@@ -161,16 +161,14 @@ For a cleaner syntax, you can drop the commas and units, and add the alpha chann
 .elem {
   color: rgb(255 0 0 / 0.5);
 }
-
-
 ```
 
 **Bonus:** you can add the alpha channel to Hex colors too:
 
 ```css
 .elem {
-  /* you can pass alpha channel at the end of hex too*/
-  /* (hex 80 = decimal 50) */
+  /* you can pass alpha channel at the end of hex too */
+  /* hex 80 = decimal 128 ≈ 50% alpha (128/255 = 50.2%) */
   background: #ff000080;
 }
 ```

src/content/blog/postcss-setup-for-mcss.mdx

@@ -11,7 +11,7 @@ import Notice from "../../components/Notice.astro";
 <Notice type="warning" title="Not a requirement to use mCSS">
   None of the following applies if you link to the pre-compiled files in your
   code. The [Getting Started][install] page compares the two so you can pick the
-  best option for your use case..
+  best option for your use case.
 </Notice>
 
 ##

src/styles/site/page.blog.css

@@ -42,7 +42,7 @@
     &:nth-child(5) { order: 2; }
     &:nth-child(6) { order: 4; }
     &:nth-child(7) { order: 6; }
-    &:nth-child(8) { order: 7; }
+    &:nth-child(8) { order: 8; }
     @media (--md) {
       &:nth-child(1),
       &:nth-child(2),