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…
- 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.