A once-and-for-all theme for my blog and projects.

This iteration of the blog started on Zola, but I've been down the rabbithole with Hugo previously. Hugo has a rich set of themes, and it's not hard to find one that I can live with and not waste a lot of time fiddling with.

I had a brief fling with Hugo Bootstrap Framework.
This is eyeopening! There's practically no theme code in your site, it's all Hugo modules all the way down. There's very little top-level configuration either. You just specify a (long) list of modules in go.mod and provide configuration settings for each module. The modules are hard-coded about how they fit into the layout. It's very concise but not at all easy to understand what's going on. I hate the monetization on that website. And I hate that it complained that I installed an ad-blocker to suppress the popups.

Plus extensions have to deal with Hugo (go) templates and there's the shortcode / partial duplication (if you write a partial, you must write a shortcode to have decent semantics for invoking it). It felt very heavyweight for me, I gave up.

So back to Zola. It has relatively few themes, and mostly the ones I've found are are relatively naive: no clever responsive layout, no documents or projects section. Zola doesn't support modules like Hugo, so modularity is up to the coding discipline of the user.

Features

• Responsivle layout for phone, tablet and desktop width breakpoints.
• Images
  • resized for screens and use. need to figure out the size breaks and dimensions
  • Thumbnails (100px)
  • content-width but short featured image (for background of header)
  • 1/3 content width floats
  • Topic image -- should be full width on narrow screens but only half width on wider, to keep the height under control. On narrow, would be card with text below, on wide screens image on left with story on right?
  • Figure with title or caption (and attribution).
  • "Story" with a paragraph of text
• Modular
  • content, header for content, TOC and section nav, breadcrumbs -- implemented as macros for DRY
  • All sewn together by templates that handle the responsivle layout.