84 lines
3.1 KiB
Markdown
84 lines
3.1 KiB
Markdown
---
|
|
title: Termlite, A New Site Theme
|
|
slug: termlite
|
|
description:
|
|
date: 2025-01-01T16:52:08-08:00
|
|
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.
|