Personal websites are living things and are never really finished. There is always something to tweak, to optimize, or to experiment with.

Over the last several months on ersatz.website I've made some changes to the site's stylesheet to fix some accessibility issues, restructured it a bit to make it easier to modify, and other related changes. I made some good changes, but I had a difficult time making them. My HTML markup across my 11ty static site templates was inconsistent, and my CSS often combined structure rules with presentation rules. This made things confusing to read, and a little risky to change. Overloaded CSS rules and inconsistent markup make things brittle and easily breakable. I could fix things in the context of what I was looking at, but unkowingly break something elsewhere. This kind of thing can happen over long periods of time as markup and styles are added and removed.

I could have developed some basica automated browser tests for myself so I could do a lot of editing and refactoring and ensure I didn't break anything while I was working, but that would be a lot of work just to maintain the same design.

Instead of developing some kind of tedious automated test suite that would blow up on any visual regressions in a fantastical effort to keep things exactly the same, I decided I should do a redesign and start from a fresh place.

The site you're looking at now is the redesigned version.

I've redone virtually all of my 11ty templates to be more consistent in their markup, and to be much much more decoupled from one another. There are now mutliple template hierarchies for different types of pages. I am now differentiating "post" pages from other pages on the site. The "post" pages are using a specific template hierarchy for the "blog", and the other pages such as the landing page use a different hierarchy. I can now change how my blog posts are rendered without worrying about affecting how my "pages" look. That's a huge win.

I've also addressed a lot of the issues in my CSS. I've separated the structural rules (grid and flex rule definitions) from the presentational rules such as padding / text size, leaned into the "flow" utility class definition, defined an explicit text size scale that is consistently applied, among many other things. I've done my best to really use the CSS "cascade" by writing rules that target as many elements as possible from the highest level possible in my stylesheet, then tweak them accordingly for specific areas where they need to be modified. I tried as much as possible to write the markup before any CSS. The markup focused approach left me with much more broadly applicable rules that were easier to override and modify for specific use cases.

Between the 11ty template rewrite and the stylesheet revamp, there were a lot of changes happening at the same time. I tried to keep the visual style of the redesign simple and manageable. I ended up with a strong base to build on.

Apart from markup and styles, another notable change is the wild header image on my new landing page. I had a lot of fun making this. I cut out a bunch of letters in different fonts from a stack of old ART FORUM magazines. Then I pasted them onto some newsprint, and used a flatbed scanner to get them into my computer. I cut out each letter using GIMP, cut the letters out from the newsprint background using a layer mask, then put them all together in a new image. I am really happy with the result. I used a similar technique to make the blog post pagination controls (prev/next links on blog posts). I wanted to try to give the page a little bit of texture. I think I was mildly successful, and will probably expand on these techniques a little more in the future!

There are a lot of things I'm still planning on updating and changing, but I wanted to get the new design out there instead of sitting on it for too long. I want to grow my site into more of a digital garden than just a blog, and I think this redesign is a nice first step to that end. The new landing page still holds the list of recent posts like the old one did, but there is now capacity for much more.

I really hope you enjoy it! Say hi to my dog in the footer while you're here. Desktop only for the moment though!