Sprucing up the design again

· geekery ·

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:

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.