wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

more typos

Browse source
This commit is contained in:
madrilene 2025-01-11 13:50:16 +01:00
parent 6673ea9f1e
commit a1d734266c
1 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/posts/2025/2025-01-11-v-4.md
View file

@ -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.