blog: Termlite (draft)

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.