Update (2022-01): I've made some changes to the styling. Check out my post on Tailwind.

I've been working on an upgrade to 11ty. For a long time I've been happy with Nikola, and I didn't have a good reason to change other than doing a bunch of work to get back to where I started seemed like a good use of my time.

It was pretty easy to get started with 11ty. That site has good resources to start. The missing piece for me was how to structure the page to not look terrible.

Layout

I looked into CSS Grid. I think A List Apart's Practical CSS Grid was the most helpful, but also Accordion Rows in CSS Grid by Eric Meyer.

Everything's simple enough that you can look at my main css file - /css/post.css - and see what's going on pretty easily.

Fonts

I looked around for some nice fonts, and found this listing of free fonts from Google Fonts: https://www.typewolf.com/blog/google-fonts-combinations. I went with Cormorant Garamond & Proza Libre. All I needed in the header:

<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Proza+Libre&display=swap" rel="stylesheet">

Colors

For colors, which are pretty far outside of my expertise, I initially relied on https://coolors.co/. I wanted it to feel a little oldschool, so I anchored it on hyperlink blue (#0000EE), and went around until I found https://coolors.co/0000ee-30bced-fffaff-fc5130-050401. It looked OK to me, but like I said, I'm not an expert.

And then.. I got it on the page, and it was pretty unsatisfying. Sites like https://refactoringui.com/previews/building-your-color-palette/ discuss the downsides to the coolors-style color randomization, so I tried to play around with things until it felt better. Eventually it did (feel better), at least incrementally, although it'll probably need some more incremental changes.

A few pages have code snippets, and in general I've been using solarized for the past few years. It was easy to select with the snippet below, and although I don't think it quite matches, maybe it's close enough.

<link href="https://unpkg.com/prismjs@1.22.0/themes/prism-solarizedlight.css" rel="stylesheet">

Conclusion

Was the move work it? No, not really.

As mentioned above, it's been a good amount of work for very little actual gain. But, I think it's been interesting, so even though there haven't been good reasons I don't regret it. I might have achieved most of what I've learned by writing a custom theme for Nikola.