1 min read

Colophon

How this site is made

A dithered sphere on black

A colophon is the note at the back of a book about how it was made. Here's this site's.

Type#

Headlines are set in Instrument Serif, rebuilt out of square modules in the browser so they read like a bitmap font. Body text is Instrument Sans, and the small labels are Xanh Mono. All three are open-source.

Pixels#

Images render in from coarse to fine as you scroll to them. Hover one and a small patch pixelates under your cursor.

The dither#

The background is a drifting cloud of tone printed in 1-bit dots with ordered (Bayer) dithering, drawn by a small shader. It starts somewhere new on every visit, gathers around your cursor and ripples when you click empty space.

Under the hood#

Pages are built from sections I can rearrange in a dashboard. Everything is stored in a small SQLite database, and the whole look can be changed without touching code.