las adjustments

src/assets/css/local/custom-card.css

@@ -23,7 +23,7 @@ custom-card ::selection {
 custom-card :is(h2, h3) {
   --flow-space: var(--space-m);
   grid-row: headline;
-  font-size: var(--size-step-base);
+  font-size: var(--size-step-2);
 }
 
 custom-card :is(h2, h3) a {

src/docs/css.md

@@ -36,4 +36,4 @@ It makes visible when your code[ wrapped in `<is-land>` elements](https://github
 
 **New in version 4.0: Cascade layers**
 
-We now use cascade layers! Up until now, I used the `:where` pseudo-class to create low specificity selectors for the reset and compositions. [Mayank inspired me](https://mayank.co/blog/css-reset-layer/) to change to cascade layers. We have two major bundles of CSS: everything included in "global" In `src/assets/css/global/global.css` is now organized in cascade layers. The "local" bundle is for per-page or component CSS, and does not use cascade layers - it has thus a higher specificity, independent of any selector specificity in the global CSS.
+We now use cascade layers! Up until now, I used the `:where()` pseudo-class to create low specificity selectors for the reset and compositions. [Mayank inspired me](https://mayank.co/blog/css-reset-layer/) to change to cascade layers. We have two major bundles of CSS: everything included in "global" In `src/assets/css/global/global.css` is now organized in cascade layers. The "local" bundle is for per-page or component CSS, and does not use cascade layers - it has thus a higher specificity, independent of any selector specificity in the global CSS.

src/pages/built-with.njk

@@ -39,7 +39,7 @@ widths: [400, 520]
       {% for site in builtwith | shuffle %}
         <custom-card clickable img-square class="text-step-min-1" style="--card-bg: var(--color-bg)">
           {% image "./src/assets/images/screenshots/" + site.filename + ".jpg", site.name, null, "lazy", null, null, widths, sizes %}
-          <h3 class="text-step-0" slot="headline">{{ site.name }}</h3>
+          <h3 slot="headline" style="font-size: var(--size-step-0);">{{ site.name }}</h3>
 
           <p slot="content">{{ site.description }}</p>
           <footer slot="footer" class="repel">

src/posts/2025/2025-01-11-v-4.md

@@ -0,0 +1,83 @@
+---
+title: 'Eleventy Excellent 4.0'
+description: "Time for a new version with a lot of breaking changes! Have fun everybody."
+date: 2025-01-11
+---
+
+A new version is here! This includes a bunch of breaking changes.
+Again I am changing the body dont for this update, this time it's [Atkinson Hyperlegible](https://www.brailleinstitute.org/freefont/).
+
+## New Image handling
+
+I have been clinging to my image shortcode for too long. With the [latest major version of Eleventy Image](https://github.com/11ty/eleventy-img/releases/tag/v6.0.0) I decided it's finally time to also include the transform method, because it is awesome.
+
+That alone would not be a breaking change, but I decided to change the existing Nunjucks image shortcode a bit. If you use the shortcode beyond the container class, you must adjust your code to these changes:
+
+```js
+( src,
+  alt = '',
+  caption = '',
+  loading = 'lazy',
+  containerClass,
+  imageClass,
+  widths = [650, 960, 1200],
+  sizes = 'auto',
+  formats = ['avif', 'webp', 'jpeg']
+) => { ...
+```
+
+- **Breaking:** `widths` is now passed in _before_ `sizes` (because I change this value much more often).
+- **Breaking:** `imageClass` is a new paramteter dedicated to the `<img>` element, while `containerClass` is for the container (`<figure>` or `<picture>`), as before.
+- also new: for all images you can start the path relative to the input folder (drop `./src` in the path, though it is compatible with `./src` being present)
+
+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/)
+
+## 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.
+
+**Breaking:** The "inline" bundle is now called "local", as this made more sense: all bundles are inlined.
+
+## New color system
+
+Run `npm run colors` after defining your base color values in `src/_data/designTokens/colorsBase.json`. This will generate or update the `colors.json` file in the same directory.
+
+- Colors under `neutral` or `vibrant` are converted into scalable palettes.
+- Colors listed under `fixed` are standalone values and do not generate shades. Each fixed color also produces a "subdued" version optimized for dark themes.
+
+```json
+// this creates a palette with shades of green, 100 to 900
+{
+  "vibrant": [
+    {
+      "name": "green",
+      "value": "#008000"
+    }
+  ]
+}
+```
+
+`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.
+
+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.
+
+## 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.
+
+## Other new features and changes
+
+- `border-radius` became a design token used by the Tailwind config, to be set in `src/_data/designTokens/borderRadius.json`.
+- new `3XS` spacing value in `src/_data/designTokens/spacing.json`.
+- new `grid` composition layout `data-layout='thirds`.
+- new OG images template. As it uses `meta.siteName` next to the 11ty Logo, you might have to adjust the template for that `src/common/og-images.njk`.
+
+Let me know if you have any questions or issues with the update.
+I am happy to help you out. Maybe you'll want to wait a bit, as I will add some more fixes, no doubt.