I've been generally not completely loving how this site and blog looked lately, so I've spent a bit of time tweaking and simplifying things round here.
I'm a big fan of paring things back, so I've deleted a whole bunch of extraneous elements like hero background images on sub pages, call to actions on blog posts (cos I mean, come on, obviously you want to 'read post'...) and so on.
I've gone for a lovely monochrome/blue thing, with just a dash of hot-rod red in there. For post images this meant playing around with filters to get an effect I was happy with. I followed Maarten van der Velde's advice in this post on CSS Tricks and used a greyscale filter plus extra contrast on the image, with a screen mix-blend-mode on a pseudo-element to add the colour. On hover all the colour comes back!
Adding the underlines on post headings on hover was a bit tricky. Kevin Powell has a Short on it, but it took reading another article on CSS IRL to realise I needed to insert a <span> inside the H3 headings for it to work.
I still need to do some maaaajor restructing behind the scenes, as my Eleventy build is a rats-nest / spaghetti-tangle of layouts, partials and CSS. Plus 11ty seems to be super finicky about things like Markdown v Nunjucks files, tag capitalisation (eh??), that sort of thing. Oh, and my build process on Netlify is as slow as heck. So just a few things to sort... 😅