Style guide

The site uses the Dracula palette with system sans-serif type. The homepage, article headers and navigation follow study 09A. Monospace is reserved for code.

Layout and navigation

The page header, masthead text, post list and footer share a 700px column. The purple background spans the viewport. The homepage headline reaches 112px; article titles stop at 68px, or 55px for longer titles. Everything stays left aligned.

The homepage contains a brief introduction and the five most recent posts. The header links directly to Writing, About, Sports and Reading. Reading jumps to a section at the end of About. The footer holds the Rust reference, tags, RSS, GitHub and style guide. Both sets of links wrap on narrow screens.

Articles use the same purple masthead for their title, description, author and publication date. The body returns to the dark reading column. Archive, About and tag pages use the same shell without article metadata. Archive and tag pages show only the title in their masthead.

Reference pages

Only static reference pages use body.wide. Above 1224px, their main content can widen to 1272px and split into .panes. Their masthead and navigation keep the reading measure. Long code and tables scroll inside their own containers.

Colour

Use native CSS nesting to group related selectors and states under their component. Keep nesting shallow and preserve selector specificity. No preprocessor is needed.

CSS rules use tokens. Hex values belong in the :root definitions, not component rules. Purple surfaces use --color-masthead-text, the dark page colour, for text, links and focus outlines.

Sport filters may repeat their text labels with a hue on a border or fill. Sport chips also use that hue on their label. Colour never carries the category alone.

Typography

--font-sans uses the platform UI font, then Segoe UI and Arial. --font-mono uses installed developer fonts. No webfonts or theme assets are fetched.

Headings use sentence case and descend one level at a time. Hierarchy comes from size and spacing. There are no numbered heading decorations, prompts, status bars or blinking cursors. The homepage headline uses a 0.9 line height and tight tracking; article titles use 1.05.

Components

Post list

A quiet date sits above each title, followed by the description. A thin solid rule separates entries. Titles are neutral; archive links use cyan. Descriptions wrap in full.

• 22 May 2025Evals are useful

  Testing prompts and models with repeatable scenarios and clear assertions.

Code and tables

Code uses the inset surface, a subtle border and monospace type. Highlighting happens at build time. Wide tables belong in .scroll-x with a named region that can receive keyboard focus.

go build -o ssg .
go test ./...

Cards and callouts

Use cards for grouped reference material. Reading uses plain lists under muted shelf headings on About. Keep article lists unboxed. Card titles sit inside the surface.

Disclosure and controls

All posts Browse by tag

Tags, sport filters and reading shelves retain their category labels. Active controls change their fill or border as well as colour. Square corners apply throughout.

Accessibility

• Every page has one main heading and a skip link to its main content.
• Navigation wraps. Focusable text is never truncated or clipped.
• Focus rings are cyan on dark surfaces and dark on the purple masthead.
• Reference disclosures use native browser behavior and need no JavaScript.
• At 320px, the page stays within the viewport. Only code and table containers scroll sideways.
• The theme has no animation, external requests or scripts. The sports page keeps its existing content filters.

Layout tokens

The complete token definitions and shared components live in theme.css. Keep this guide in step with changes to those definitions.