How this site is put together, for anyone who cares about that sort of thing. I do, so here it is.
The stack
This site is an Obsidian vault. Quartz turns it into HTML, GitHub Actions builds it on every push, and GitHub Pages serves it. Writing a note and publishing it are the same action, which is the only reason anything gets published at all.
There is also an OpenClaw instance running on Fly.io wired up to the repo, so I can update the site without a laptop in front of me. A push is a push whether I typed it or asked for it.
Type
Headings are Fraunces, body text is Karla, code is IBM Plex Mono.
Fraunces has an optical size axis that runs from 9 to 144. Its default sits at 9, the cut drawn for small text, and that default is what you get from Google Fonts unless you name the axis in the request. The usual setup therefore hands you the text cut scaled up to headline size, which is not the same thing as a headline: the strokes come out heavier and the details blunter than the design intends. The files here are self-hosted with the axis intact, so the browser picks an optical size to match the type size.
Nobody will notice. That is more or less the theme of this entire site.
Color
Slate and dark purple, with a neon yellow lifted from a Lamy Safari in the neonyellow special edition. My favorite pen.
The neon has exactly one job, which is marking where you are: the heading you are level with in the table of contents, the page you have open in the sidebar, the words that matched your search. It is never decoration.
Reading
One column, capped near 68 characters, because a line of text running the full width of a browser window is a line nobody finishes. Leading is set unitless so it tracks the font size instead of drifting apart from it. There is no packaged theme underneath any of this. The stylesheet is written directly against Quartz’s own base, which is less clever and much easier to reason about.
Not here
No analytics. Nothing follows you around. Your browser keeps a little state locally, which color mode you picked and which pages you have already opened, so the graph can color those differently, and none of it leaves your machine or reaches me. The fonts come from this domain rather than from Google, though the graph does fetch d3 and pixi from a CDN, because that is baked into the plugin and not something I can point elsewhere.