From 7807e901f7da42dbc1d7bfff98418f9f6bf3daf8 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Fri, 3 Jan 2025 11:53:06 -0800 Subject: [PATCH] blog: Termlite (draft) --- content/blog/2025/termlite/index.md | 84 +++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 content/blog/2025/termlite/index.md diff --git a/content/blog/2025/termlite/index.md b/content/blog/2025/termlite/index.md new file mode 100644 index 0000000..c104e0e --- /dev/null +++ b/content/blog/2025/termlite/index.md @@ -0,0 +1,84 @@ +--- +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.