Advanced Darkness

I’ve made a ton of minor updates recently, the biggest one being dark mode support. Time for a round-up, in rough chronological order.

Blogroll🔗

I’ve added a lot of new people to my blogroll recently, many of them new, but some being people who I discovered are still posting and used to read regularly. If you’re looking for more to read (mostly technical in nature but sometimes beyond that), there’s a lot of great writers on there.

News Feed🔗

My news feed should have an icon now in feed readers and look a bit nicer.

Page Templates🔗

At some point, Jekyll added previous and next properties to posts (or maybe it always had them and I wasn’t paying attention), so I made a change to use them when generating relative links in news posts. This doesn’t affect the final product you see, but it’s much less dumb than the old code I wrote.

Open Graph Data🔗

I added Open Graph metadata to my pages using a Jekyll plugin, so if you or I link to a news post or page on here, social media sites will display a nice-looking preview. For example, see my Bluesky post sharing the previous news post.

Layout Changes🔗

I switched to using CSS Grid Layout which allows for more precise control. I don’t have any redesign plans or ideas, but if I ever feel like changing something, this will provide a much better base to start from.

Typography🔗

Inspired by Utopia’s fluid responsive design, I used their type scale calculator to make font sizes more flexible. As screen size increases, you can use a greater range of font sizes to keep the same visual impact; or, thinking the other way around, as screen size shrinks, you can’t use as large a range of font sizes without them becoming unreadable or obnoxious. If you open the site on a PC and drag the window wider or narrower, you’ll see the dynamic scaling in action, but the end result is that whether you’re on a small screen or giant monitor, text should be a readable size and headings should feel like a good scale.

I also use modern font stacks (hat tip to OG Jeffrey Zeldman) to set fonts now, which should also be nicer and more readable without requiring custom fonts.

JavaScript Reduction🔗

I won’t go as far as some people and tell you to disable JavaScript entirely, but I do try to keep it minimal on here, so I changed some functionality to run during the Jekyll build instead of as JavaScript in the browser. I also changed the menu to use an HTML popover so it doesn’t need any JavaScript either, and it still switches behavior conditionally on screen width: small screens (e.g. mobile) have a button to toggle the menu, large screens show it in the right column.

Dark Mode🔗

I finally got styling in place to support dark mode. I think pretty much everything works and looks how I want, across all the different pages and sections. I used the light-dark() CSS function to handle defining which colors to use in which mode, and some use of oklch() for computing colors more dynamically in case I ever want or need to tweak them. I also replaced the static background image with a linear gradient so it can also use light-dark() and respond to dark mode.

Overall, the site should be easier to read, on pretty much every screen size, device, operating system, and color scheme preference, than it was before, and I’m happy with the results.