---
title: Termlite, A New Site Theme
slug: termlite
description: >
  In 2024, I built a new theme for this site, incorporating Unix terminal
  elements and making several architectural improvements over my previous theme.
date: 2025-01-01
draft: true
tags:
  - Meta
  - Web Design
  - Termlite
  - Platters
---

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.