From a1d734266c4683e83052a8e305e2e86c3a607eca Mon Sep 17 00:00:00 2001 From: madrilene Date: Sat, 11 Jan 2025 13:50:16 +0100 Subject: [PATCH] more typos --- src/posts/2025/2025-01-11-v-4.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/posts/2025/2025-01-11-v-4.md b/src/posts/2025/2025-01-11-v-4.md index 2c13606..031b059 100644 --- a/src/posts/2025/2025-01-11-v-4.md +++ b/src/posts/2025/2025-01-11-v-4.md @@ -32,14 +32,14 @@ That alone would not be a breaking change, but I decided to change the existing Using the transform comes with the great advantage, that you can now use co-located images with the HTML and Markdown sytnax. 🎉 -[For a detailed overview of the new image possibilities see the dedicated blog post](/blog/post-with-an-image/) +For a detailed overview of the new image possibilities [see the dedicated blog post](/blog/post-with-an-image/). ## Cascade layers [Inspired by Mayank's post](https://mayank.co/blog/css-reset-layer/), I’ve transitioned to using [cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), instead of using the `:where()` pseudo-class to create low-specificity selectors for resets and compositions. - The global CSS bundle is now organized with cascade layers. -- The local CSS bundle, used for per-page or component-specific styles, does not not utilize cascade layers. As a result, all CSS blocks included have a higher specificity than global styles, regardless of the selector specificity in the global CSS bundle. +- The local CSS bundle, used for per-page or component-specific styles, does not utilize cascade layers. As a result, all CSS blocks included have a higher specificity than global styles, regardless of the selector specificity in the global CSS bundle. **Breaking:** The "inline" bundle is now called "local", as this made more sense: all bundles are inlined. @@ -62,12 +62,14 @@ Run `npm run colors` after defining your base color values in `src/_data/designT } ``` -`src/assets/css/global/base/variables.css` changed a lot, as I now use new color names. I also dropped the `@supports` blocks for `color-mix()` and the relative color syntax - not because they aren't great, but I just perceived the whole file as too complex. Now a JavaScript does the step of creating subdued colors for the dark theme. +`src/assets/css/global/base/variables.css` changed a lot, as I now use new color names. I also dropped the `@supports` blocks for `color-mix()` and the relative color syntax - not because they aren't great, but I just perceived the whole file as too complex. Now JavaScript does the step of creating subdued colors for the dark theme. I also considered using the new `light-dark()` CSS function instead of the repetitive code for `prefers-color-scheme` and `data-theme=“dark”`, but the browser support is still too low. **Breaking:**: `src/assets/css/global/base/variables.css` changed. You must adapt your colors in `src/_data/designTokens/colorsBase.json` if you want to use the `npm run colors` script. +[More about colors here](/get-started/#design-tokens). + ## New button styles Inspired by [Andy's article](https://piccalil.li/blog/how-i-build-a-button-component/), the button styles changed. As the article explains that very well, I won't say much more about it.