Homepage Redesign, Light Mode and More

Just a quick note documenting some recent changes to the blog. Nothing groundbreaking, but enough accumulated updates that I wanted to write them down.

Homepage Redesign

The homepage used to be a chronological list of articles; your classic default blog format. I’ve redesigned it into more of a two-pane “dashboard” feel. The reason? My content is quite varied: I have long essays and technical write-ups but also short TIL or notes posts (like this one!). Having a way to differentiate between them while also scanning across the titles of different types of posts felt really valuable.

I was inspired by this post which I stumbled across.

Light Mode Returns

A couple of days ago, a reader emailed me and asked if I could add a light mode to the blog because they were reading in a bright environment. Though personally I prefer dark mode, I appreciate not everyone agrees so it made sense to add.

Here’s the funny part: the blog actually had a light mode in its early days. I removed it because maintaining two color schemes with the site generator setup I had (Hugo, PaperMod Theme, Tailwind, custom CSS rules on top) was a significant maintenance cost.

I only endured all this complexity because I thought offloading the theming to someone else meant I could focus on the writing and not turn this into yet another “programming project”. But, unfortunately, I have very strong feelings about how I want things to look. Trying to work within the theme’s extension points while also being opinionated was far more trouble than doing everything myself.

So I ripped out all of that complexity. Stripped Tailwind, simplified the CSS dramatically, went back to basics. Once I did that, adding light mode became trivial. A few CSS variables and a toggle: done!

I briefly considered writing my own static site generator (inspired by this article) but Hugo does the job well enough (if you stay away from its dark corners) that I abandoned the attempt after a few hours.

Typography Refresh

I also did a bunch of tweaks to the typography:

• Fonts: Moved from system fonts to Inter for headings and body content, Source Code Pro for code blocks and monospace usage. Ensures everyone gets the same experience and makes readability consistent; on some machines, I felt legibility suffered if the system font was poor.
• Size: Bumped up font sizes throughout. The previous sizing felt a bit hard to read, the new one should be easier on the eye.
• Links: Changed how link underlining works by increasing the gap between the letters and underline. Makes the links look clearer. Also links now have a bit of tint when you hover which should make interacting with them nicer.