< Notes...

These are 100 bytes of CSS that will pretty much make any “vanilla” HMTL look good. I have tested it, and it does look good indeed!

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

If we add an additional, but optional, 100 bytes—so, 200 bytes in total then—things can get much prettier (this works as a light theme).

h1,h2,h3,h4,h5,h6 {
  margin: 3em 0 1em;
}

p,ul,ol {
  margin-bottom: 2em;
  color: #1d1d1d;
  font-family: sans-serif;
}

Just came across daisyUI and, though perhaps overkill for anything I might need at a personal level, it looks truly amazing. It has pretty much all the components to create a uniform, powerful, beautiful looking web interface. That is, whether an application, or a website. It’s lovely!

I am defeated by Hugo’s syntax highlighter. I don’t use code blocks much around here, but the few I have do not want to play nice, and show fonts with different sizes on desktop, and mobile. I haven’t been able to figure out, for the good of me, how to fix that weird behaviour. For now, the few code blocks I around have syntax highlighting turned off.

Update: 06 Oct 2025 @ 19:34:06

OMG! This guy is a saviour! In his own words:

“Lately, I’ve been coming across many blogs that have weird font-size rendering issues for code blocks on iOS. Basically, in a code snippet, the text-size would sometimes be much larger for some lines than others.”

Exactly my problem. Applied the fix he recommends and, boom, just like that, magic! Thank you, Nathan!

code {
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

I didn’t know about this one, but I can assure you it will add some genuine je ne sais quoi to the transition between pages within your website. In use here now, and forever. Try it!

@media screen and (prefers-reduced-motion: no-preference) {
        @view-transition {
                navigation: auto;
        }
}

➝ Via Ariel Salminen.