I realised a couple of weeks ago that this blog will turn 20 years old this October, so I thought it might be time for a belated Spring clean of the styling.

I used Tailwind the last time I re-designed the site, and since Tailwind has bumped up two major versions since then, I decided to upgrade and tweak things a bit. As I wrote about last time, Tailwind is a joy to design with, and since I was building on the work I did last time, things went fairly smoothly. I started with this Hugo-Tailwind starter project which helped me to get the settings and structure right for the changes to Tailwind. Tailwind’s own CLI has got much more capable, and so you do not now need to use purgecss to slim down the classes you are using as Tailwind can do that on its own. The typography plugin is also easier to use, making it simple to have basic styling that is coherent and readable, but also to override styles as you wish. I’ve simplified a few elements of the styling, and generally tried to make things cleaner and more consistent. Since Tailwind’s own default font stacks are very good, I’m now using the default sans serif stack for the body and some of the navigation buttons and links, and Libre Baskerville (from Google Fonts) for the headings. I have a soft spot for the Baskerville typeface, especially given that Baskerville was a local lad. I would rather not have to depend on Google for anything, but I haven’t yet found an affordable alternative (Update: I’m actually using EB Garamond: I had forgotten that I couldn’t find a version of Baskerville with the right weights, so Garamond seemed a reasonable alternative. I’d still like to use Baskerville if I can find a workable version with the right license.)

I have added some new features:

• Dark mode. If you have your system set to dark mode, you should get a specially-styled dark version of the site. I have used the accessibility tools to try to ensure that both dark and light mode have the recommended contrast at the different font sizes, and that the styling and colours are coherent across both themes. This is quite easy to do now with Tailwind’s dark: prefix. I would also like to make it possible to toggle the mode manually (for those who like the system to be in dark mode but web pages to be in light mode or vice versa), but I haven’t figured out how to do this yet.
• Simplified nav menu. This is now a drop-down toggle for all screen sizes which is visually cleaner, and provides space for me to add…
• A custom search page. I have used a link to a site-specific search query on DuckDuckGo, but thought it would be nice to have something more ‘in-house’. eddiewebb’s Fuse.js solution was easy to set up with Hugo and works well. You do have to be a little patient for the results to pop up as I have over 1800 articles to search through. My Javascript is poor, but I might see if I can figure out how to get a spinner or progress bar on there to let people know it is working.
• Custom syntax highlighting. I have set up custom themes for code blocks which also respond to the change from light to dark themes. You can take a look at this post to see how it looks. I find that it looks a bit more in keeping with the style of the site as a whole.

I’ve also tried to make the site follow as many of the accessibility guidelines as I can, but it is still difficult to know how well it actually works for users. So if you use a screen reader or other accessibility tool to read this site, and something doesn’t work well or is annoying, do let me know. I would be very grateful to hear how I could improve the site it that respect. Similarly, if anyone spots anything that looks a bit wonky, let me know: there are bound to be rough edges!

The one thing I had a bit of a battle with was Hugo’s fingerprinting of assets. As far as I understand it (which isn’t very far), fingerprinting is a way to ensure that website visitors get a new URL for the assets each time they visit, so that their browser does not cache an old version of the assets. There’s also an integrity check, and that kept failing for me once I had pushed the site up to Netlify. I think what I discovered was that Netlify also does its own version of this automatically, so the two were possibly clashing, resulting in mis-matching links. In the end, I turned off Hugo’s fingerprinting, and (I think?) everything still works.