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

I was having a weird issue in which blue heart next to the timestamp would appear off place, and quickly jump into place on page load/refresh. Took the problem over IRC (Libera.Chat) #css channel and, sure enough, hassoon and DPA found the issue, and provided a solution, in no time.

Suffice it to say, very, very grateful.

CommonMark’s ability to set classes and identifiers is amazing. Hugo (which I use to generate this notes) is using it. They work like so, in CommonMark markdown:

Hello world.
{.foo .bar #foh}

Which, in turn, will render and HTML code like this:

<p class="foo bar" id="foh">Hello world.</p>

Now all you have to do is define the class and id on your CSS, or whatever. Neat, right?