The lazy version is a white line at about 1.5% opacity, which is what the other page uses, because the other page is forty words of neon over black; legibility isn’t really the goal. However, this site is mostly prose, so a white line lightens the words as well as the background. I didn’t spend all that time on the reading column just to lay a haze over it.

So the grain mixes off --text instead of white:

--grain: color-mix(in srgb, var(--text) 1.5%, transparent);

This can be applied like so:

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: repeating-linear-gradient(
    to bottom,
    var(--grain) 0 1px,
    transparent 1px 3px
  );
}

And finally referened like so just above the closing </body> tag:

<div class="grain" aria-hidden="true"></div>

This works out great, because a colour mixed with itself gives that colour straight back. The grain physically cannot touch the body copy. I’ve learned quite a few new things today!

As a bonus the lightbox is a <dialog> and the browser promotes a modal dialog into the top layer. This sits above every z-index on the page; including the one holding the grain. So a zoomed photograph comes up perfectly clean and I didn’t have to write a rule to make that happen.

Whether you can see any of this depends entirely on your monitor, your colour settings and even your resolution. If you can’t see it, it’s working.

The fix was mostly plumbing. My img shortcode was handing the raw src straight to the <img> tag, so Hugo never got a look in. Everything now goes through one partial that resizes to the width it actually displays at, re-encodes to WebP and emits a srcset, plus width and height so the layout stops jumping around while things load. Markdown images get the same treatment through a render hook. The awkward bit: images under static/ aren’t resources, so Hugo can’t touch them. A second mount in hugo.toml fixes that without breaking any existing URLs.

While I was in there I dealt with the JavaScript. Every page was carrying all seven inline scripts, even the 90-odd pages with no code blocks, no zoomable images and no locked series titles. Those three now load only where they actually do something. The two that genuinely run everywhere moved into one small fingerprinted bundle, so your browser fetches it once for the whole visit instead of re-reading it on every page. I also finally turned on HTML minification, which I’d apparently never bothered with.

Where it landed:

That last one is about 46 times smaller. Nothing changed visually, which was the whole point. The sparks still spark and the locked titles still scramble.

One last silly thing. I added a new short code to style “Plant Smart” as “Plant🌱Smart”. Fun!

It’s nice to have almost full control of my little website now! And all it took was 3 attempts to get the integration right. 😅

A great note to end on for a Monday evening!

Everything is so much faster now I should’ve done this months ago when I first revamped the site.

I also can’t decide on which activity graph animation I like the most. 😅

variable "name" {
  description = optional(string)
  type        = required(string | bool | number)
  default     = optional(type)
}

Time to do what I do best: make things more complicated than they have any right to be.

• The addition of a new bit type for site updates like this one.
• Proper RSS feeds for both long-form articles and bits. Check the footer!
• A quick sweep of the site map to ensure everything maps out properly. There were a few dead links previously.
• You can now filter bits by type! Have a play with it at the top of this page.
• Some minor grammatical updates here and there for some recent content.

Something to note is that the bits filter is purely JS based and assumes all content will be displayed in a single page. This is fine for now, but there may be 100s or even 1,000s of entries on a long enough timeline. At that point, basic text search and filtering that supports pagination may be necessary. But, not today!

I’m currently experimenting with some alternative OPEN SOURCE web icons and updating the third-party licensing notice bundled with the repo to cover icons as well as web fonts.

Luckily, only I noticed this issue and immediately worked to address it.

edit: Good-bye, sweet git history!