Another blog redesign
The new design is dead. Long live the new design.
Motivation
Occasionally I find myself hunting for something elusive on the internet. I’m not sure what, exactly. A place, or maybe just a vibe. Something underground or furtive, like a digital speakeasy or secret society. Perhaps an exclusive BBS or pubnix of yore.
This may be what draws me to the terminal and Vim. It’s also led me to make Gopher holes and Gemini capsules in the past, and to lurk in places like midnight.pub. Each of these things offers some of what I’m after, but no bullseye yet.
So, I decided to redesign my blog to capture some of that vibe I’m looking for and to accommodate Vimmish keyboard navigation.
General structure
I’m styling the site mostly like Vim’s :help pages, which are just text files with
some basic markup
for links and such.
Nice and simple and geeky.
Text style
All text is the same size like in a terminal.
The page titles are prefixed by a row of = symbols like in Vim help.
Headers in the page footers (for footnotes, tags, and backlinks) are in caps like subsection titles in Vim help.
Headers in the page body are different. I prefixed them with their Markdown syntax, similar to what you see in some Markdown editors. This is a deviation from Vim help style, but it helps distinguish the page sections from the footer sections.
For the font face, I wanted a balance of geekiness and readability. While I’m liking Iosevka in my terminal, I wanted something more prose-centric for this blog. I tried a few fonts before landing on iA Writer Duo, “a two-spaced typeface that gives a bit more room to W’s and M’s, based on IBM Plex.”1 So it’s almost monospace, but a bit more prose-friendly. Balance!
For colors, I’m sticking closely to the Gruvbox palette. Warm and retro. I still haven’t found anything I like better than Gruvbox dark, though I’m still on the fence about its light mode.
Keyboard shortcuts
You can use j and k to navigate the links on a page, and Enter to follow the one you’ve selected.
gg and G will jump to the top and bottom of the page, respectively.
I was torn between using j and k to navigate links or having them scroll the page like they do in Vimium.
Scrolling the page is closer to their actual Vim function.
But, in many Vim-like UIs, those keys tend to let the user navigate actionable items, like links, rather than just scroll.
Plus, line-wise movement on a blog page doesn’t add much value, whereas link-wise movement does.
So I stuck with link navigation.
Still, I wanted a way to scroll, so I added both { / } (navigate by paragraph in Vim) and u / d (similar to C-u and C-d in Vim) as scroll up / down bindings.
I may end up changing these.
We’ll see.
I added a pretty cool search UI triggered with /, but I ended up removing it.
While I tend to reach for / when I’m in the Vim mindset,
there’s not a lot of sense in re-implementing such a basic browser function, and it added significant code complexity.
I thought about adding Ctrl-o and Ctrl-i, Vim’s shortcuts for going back and forward, but they conflict with built-in browser shortcuts on some systems.
And as with search, I figure people should stick with the built-in commands anyway.
Hit ? to see all the available shortcuts.
Note that JavaScript is required for any of this to work, but the site should function just fine without it.
AI
Yes, I used an agent (mostly Antigravity using Gemini Argon) to do a lot of the implementation work, though I was in the code throughout, reviewing changes and handwriting some of them. Since this redesign is mostly making my blog simpler, it was pretty easy to follow along.
I’ll admit that the JavaScript behind the keyboard shortcuts is, at the moment, mostly vibecoded, and it could do with a more attentive code review from yours truly. I skimmed it and it looks roughly sane.
Feels
I’m just a few hours into this design, and I already feel more bonded with it than any of my prior ones.
First, I’ve captured some of that vibe I’m looking for.
Second, I like the simplicity; choosing Vim’s :help and Gruvbox for inspiration means fewer decisions and easier implementation.
And IMHO, the keyboard shortcuts are super fun.
If you find any problems or have other feedback, please email me!