Improving CSS on here

Up until now, the CSS here was a bit of a mess. There was a bit of inline CSS, for example the posts in the listings had duplicate CSS, which is just two lines in the style.css. This alone saved 60 bytes per listed post, and made the CSS more maintainable.

Another big change was to use CSS variables for the colors. This allows me to change the color scheme of the site without having to change every single color in the CSS.
This is also the reason why the site now has a dark mode :).

The code for this is as simple as

@media (prefers-color-scheme: dark) {
    :root {
        --color: #f9f9f9;
        --bg-color: #121212;
        ...
    }
}

body {
    ...
    color: var(--color);
    background-color: var(--bg-color);
}

Using CSS variables does come with the downside of a small amount of overhead, because to keep the code readable, you want decently descriptive variable names, which can be a bit long.
So using eleventy, I just added a small piece of JS code to my CSS minifier to shorten the variable names to a single character (because I have less than 36 variables):\

const uniqueOccurrences = [...new Set(code.match(/--[\w-]+/g))];
uniqueOccurrences.forEach((variable, index) => {
    code = code.replace(new RegExp(variable, "g"), `--${index.toString(36)}`);
});

This code is far from ideal, because there is probably some CSS you can write that will break this, but it works for the handwritten CSS here.
The encoding also uses (much) fewer chars than are available for the variable names, but with fewer than 36 variables, it does not matter at all and this encoding is ideal. Given how simple it is, I am quite happy with it for now.