3.1 KiB
| title | slug | description | date | draft | tags | ||||
|---|---|---|---|---|---|---|---|---|---|
| Termlite, A New Site Theme | termlite | 2025-01-01T16:52:08-08:00 | true |
|
In the latter half of 2024, I spent a decent chunk of the total time devoted to
working on this site building a new theme. I'm calling it termlite, because it
strives to incorporate some nerdy Unix terminal-y design while also prioritizing
nice typography, readability, and accessibility.
Out With the Old
The original theme, called platters, I also built from scratch. It was my
first time building a theme for Hugo, and my first time doing substantial web
development for my own site. So, I was figuring everything out as I went. It had
a number of design elements I was proud of, but as it grew it got increasingly
difficult to hack on to support the kinds of content I wanted.
Some of the things I'm proud of:
- the rounded corners and the drop shadows of the nav bar and home page platters
- the animation of the home page elements after the page loaded, especially that it was adaptive so it worked differently on smaller screens
- the text gradient of the site title in the nav bar, thanks to
background-clip: text
In With the New
My technical goals for a new theme are:
- play around with Hugo's module system
- structure templates to make them easier to work on, and crucially,
- make it easy to make modifications to the styling to support new posts without breaking older content
I also had a design goal to incorporate some elements common to Unix shells in the theme. I am thoroughly at home in the terminal, having used one for the past twenty years or so.
Architecture
This site is built with Hugo, which has a relatively new but extensive module system. I broke down my site into modules as follows:
termlite- The core of the theme. The design system parameters (spacing, typography, grid scaffolding) is here, along with templates to display "list" content and single pages.
photostream- Templates related to the [photo]({{< ref "/photos" >}}) section. The "list"
template for the photo stream is substantially different from standard, and so
is the single page template. So it lives in its own module that relies on
termlite. resource-builders- Helper templates, a.k.a. "partials", for processing site and page assets. For example, there are templates in here for concatenating CSS files into single assets, then minifying and hashing them.
feeds- Templates for RSS and Atom feeds. These are almost entirely unrelated to the content of the pages themeselves. I almost never touch these when I alter the site's layout.
image-utils- Helper templates for processing images.
I'm pretty happy with this division into functional components, but also unconvinced moving them into separate git submodules was the right call. Submodules are notoriously a pain to work with, and I'm feeling that a bit here. The docs around Hugo modules and Go modules seem to imply a one-to-one module to git repository mapping, and that's definitely the golden path. I wasn't able to figure out if that's a hard requirement, or something you can hack around.