, I started using the Modus Themes by Protesilaos Stavrou in Emacs. I wrote a bit about the Modus themes in Why I Chose Emacs as My New Text Editor .
As an exercise, I switched my site’s theme colors to those from the modus-operandi and modus-vivendi; The light and dark themes respecively.
Why the switch? As I don’t use a lot of images, I felt I wanted more colors. Previously, I used Adobe Color to help choose related colors, but I wanted to add a few more.
Throughout the site, I use a few standard yet not often used HTML elements:
abbrblockquoteandcitedetailsandsummarydfndl,dt, andddinsanddelmarktime
I found myself wanting to call out three elements that I find close in meaning:
- abbr
- connects an abbreviation and it's expanded word
- dfn
- the word/phrase defined by the following text
- dt
- a defined term followed by a definition detail (e.g.
dd)
I also wanted to gently call out dates. Each date element has a machine readable datetime attribute, which is not presented by most browsers. I thought it would be nice to differentiate these elements.
And I’ve got blockquotes, marginalia, and updates to consider. Each somewhat unique in purpose. The actual mental “Ah Ha” moment was seeing Modus patch updates around docstrings and comments. I started thinking of updates and marginlia as comments. And blockquotes as somewhat analogous to a docstring. Namely two different colors for two different types of human readable elements of code.
As the number of elements I used grew, I didn’t initially expand the color pallette; I didn’t want a haphazard set of colors.
Separate from blogging, I started tinkering with my Emacs configuration of the Modus themes.
I noticed how the Modus themes colored my Org-Mode (Org-mode 📖) files, and found these changes welcome and legible. So I spent a bit of time refactoring my Cascading Stylesheet (CSS 📖) to use Modus colors.
Along the way I learned about CSS var.
I want the colors to spark a bit of curiosity. To nudge people to open up their Inspect Element to see what’s going on. My favorite aspect of web development is that the CSS and HTML are available for anyone to inspect; This transparency is what made the web what it is.
I also want the colors to not overwhelm you, the reader. Instead, I want the colors to be a companion in your reading Take on Rules.
And with Protesilaos’ attention to mixing colors, I felt comforable adding some hover behavior. My hope is that this hover behavior helps provide a useful visual clue.
For example, if you hover over the superscript side note numbers, this will highlight corresponding marginalia.
These changes, while subtle, bring me joy. I learned a little bit more about CSS and removed some duplication.