/colophon

What this site is built from, and why each choice has stuck. Lifted out of /about because it kept getting longer.

The whole thing, in numbers

html files
40-ish, hand-written. No templating engine. The shared chrome lives in my fingers.
css
One style.css, ~770 lines, inlined into every page by the build script. No tailwind, no preprocessor, no postcss, no autoprefixer. The targets are 2022+ browsers and I'm fine with that.
javascript
~120 lines across feed.js (homepage) plus a few year-stamp scripts. No dependencies. No bundle.
page weight
~30 kb gzipped per page including the inlined CSS. The homepage is the heaviest because of the feed data; it's still under 50 kb.
requests
Three. The HTML, the favicon, and the feed JS on the homepage. That's it.
build
A 40-line shell script that copies files, inlines style.css into each page's <style> block, and runs gzip --keep --best. I keep threatening to rewrite it in Go.

Type

body
Inter if your system has it, otherwise the OS sans stack. Loaded from the system, never from a CDN. With font-feature-settings: "ss01","cv11" for the single-storey a and the slashed zero.
serif
Newsreader italic, also system-only, for the occasional pull-quote and the bits where I want to sound like I'm thinking out loud.
mono
JetBrains Mono, with ui-monospace behind it. Used for labels, dates, code, and most of the visual furniture. The little p/ mark is JetBrains Mono at 0.68 rem and a -0.5px letter-spacing.

Nothing is hosted by Google. Nothing is downloaded at runtime. If your OS doesn't have these fonts, the fallback chain renders the page in whatever you've got. That's the deal.

Colors

The palette is a fork of my Neovim colorscheme, which is itself a fork of Sonokai Shusia. Five hits of warm amber (#e9b36a) against a near-black (#0f1013), with a single mint accent (#7dd3c0) reserved for live / "fresh" things. The danger color (#d9766e) shows up only on drafts and the 404 page. 

--bg:        #0f1013
--surface:   #191a21
--text:      #e6e6ea
--muted:     #9799a3
--accent:    #e9b36a   (warm)
--accent-2:  #7dd3c0   (mint — live, fresh, "now")
--danger:    #d9766e   (drafts, errors)

Hosting

  • A small VPS in Frankfurt — 2 vCPU, 4 GB RAM, more disk than the site will ever use.
  • nginx serving static files, with gzip_static on and brotli_static on.
  • HTTPS via Let's Encrypt + acme.sh on a cronjob. Auto-renews; I check the email once a year out of guilt.
  • HTTP/2. No HTTP/3 yet — I'd want to dogfood the QUIC post first.
  • DNS at deSEC. They're non-profit, in Germany, and they have a CLI.

What's not here

No cookies. No analytics. No fingerprinting. No CDN beacons. No service worker, no push notifications, no "subscribe to our newsletter" modal. No JavaScript that runs on a page you haven't asked for. The only "tracking" is nginx's access log, which I read by hand on a Sunday once a month and then forget about for the other 29 days.

Source

Not public. It's not hidden, exactly — it's just boring. You can read it with view-source. If you want a starter, look at danluu.com or taniarascia.com; both are more polished, both have public sources, both are better places to learn from than mine.

Accessibility

  • Color contrast: --text on --bg is 14.8:1. --muted on --bg is 7.1:1.
  • Every page is keyboard-navigable; the nav order is the visual order.
  • The feed's filter chips are real <button> elements.
  • No fixed font-sizes below ~12 px; root is 15.5 px and most labels are 0.72 rem of that.
  • prefers-reduced-motion respect is on my list. It's been on the list for a while.

License

Prose: CC BY 4.0. Code snippets: MIT unless a post says otherwise. The fonts are licensed by their respective people.

See also: /uses (what I work on this with) · /changelog (what changed and when) · /about.

Last edited: a couple of weeks ago, when I split this out of /about.