rules

• Lime (--accent) is for navigation and things you can act on. Labels, headings in footers and metadata stay grey.
• All caps come from CSS: the caps selector list at the end of global.css, or the .caps utility. Write the HTML in normal case.
• Only unclassed links inside p, li, td, dd, blockquote and figcaption get the underline and highlight. A link with a class styles itself.
• Internal links end in a slash: /now/sep-2026/.
• Public pages allow no inline styles (style-src 'self'). Only internal/ pages, like this one, use them.
• No JavaScript on the site. The two lines at the bottom of this page are the only exception, and this page is never deployed.

colour

Tokens live on html in global.css. The values below are read from the stylesheet when the page loads, so they're always current.

surfaces and lines

text and accent

ratings

type

Ioskeley Mono, self-hosted in /assets/fonts/ioskeleymono/ at weights 300, 400, 600 and 700, each with an italic. Root size 16px. Paragraphs and list items use a 1.65 line height, and body is capped at 78ch.

weights

light 300 · regular 400 · semibold 600 · bold 700
light italic · italic · semibold italic · bold italic

heading spacing

h2 has 3rem above it and h3 2.25rem, so a new section reads as a bigger break than a sub-section. On phones they drop to about 2.75rem and 1.75rem.

text

function greet(name) {
    return `hello, ${name}`;
}

post

A post is an article holding a .page-header--post, which turns it into the panel. The likes and comments block is written by functions/_middleware.js; the markup below copies what it outputs. A .pager straight after the article sits 1rem under it. An optional .post-banner photo can open the panel: 2:1 (4:3 on phones), bled to the panel edges, linking to the photo's page. .post-banner--row (a figure, no link) holds several photos side by side, as on /about/. On phones the panel and pager cards run edge to edge.

.post-banner (optional, first in the article; --high / --low / --left / --right move the crop, on the banner or one photo)

/now

Wake Me Up When September Ends

3 September 2026

posts

.post-item-media (one image keeps its shape) / .post-item-media--grid (two or more, square crops)

.post-item-gif: a klipy gif as a looping mp4, the still img instead with reduced motion. my own videos are a video.post-item-player (controls, preload="none")

.post-item-quote, .post-item-video (bluesky's thumbnail, links out), .post-item-note (fallback when the appview lookup fails)

someone @someone.example the quoted post's text, clamped to four lines.

quoting →

wayfinding

listings

projects

.project-card, projects page

Jan '26 · re-design

Saturn

A cozy yet minimalist personal website

.project-banner (the tall gradient banner at the top of a project page) is page-specific and not shown here. .project-banner--log lets it grow around a commit log.

media

The .lightbox opens on :target, with no JavaScript. It covers the whole screen, so it isn't shown here; see /photos/ and the tracker walls. On /photos/ each lightbox shows the photo's name and a .lightbox-details link to its page.

Each photo has a page at /photos/<file name>/: .photo-entry puts the whole photo beside an .entry-heading (title, date, place, camera, film), stacked on phones. Clicking the photo opens a single lightbox, #full. Posts and banners link here, never to #view-….

.img-scaled caps an image's height (26rem, or --short 18rem, --medium 24rem, --tall 30rem) and centres it.

responsive

• ≤ 900px: photo wall drops to two columns.
• ≤ 768px: less page padding, h1 1.6rem, project cards stack. Paragraphs stop using text-wrap: pretty.
• ≤ 600px: header stacks with the nav on one row and "home" hidden; meta-split, tables, project stats, entry hero and the pager stack; a .post-banner--row keeps its middle photo; the footer drops // and PGP.
• ≤ 480px: 1rem page gutter; h1 1.5rem, h2 1.2rem, h3 1.05rem; the post panel and pager cards run edge to edge; photo wall one column, tracker walls two; the footer also drops changelog.

preferences

• prefers-reduced-motion: transitions and animations are effectively turned off.
• prefers-contrast: high: white text, yellow accent, white borders, underlined links.
• print: black on white, nav and pager hidden, URLs printed after links.