Field manual: how entries are typeset here

This entry is the reference sheet for the site. It shows every element a post can use, so I can check the styling in one place and copy the syntax when I write. Whenever the design changes, this is the page I look at first.

Text

Body copy is set in Archivo at 17 px with a measure of about 68 characters. Bold is for the one phrase a skimmer should catch, italic is for titles and terms, and inline code covers file names like astro.config.mjs. Links look like this one to the Astro docs. Keyboard shortcuts use Shift + /. Footnotes collect at the bottom.¹

Make it work, make it right, make it fast. The order matters more than the speed.

Lists

Unordered lists use square markers:

Release notes go out with every major and minor version.
Hotfixes skip the train but still need a ticket.
- Nested items step in one level.
Anything without an owner does not ship.

Ordered lists count with leading zeros, which keeps short sequences aligned:

Cut the release branch.
Freeze scope and run regression.
Ship, then write down what surprised you.

Notes

Code

Code blocks get a header with the language and a copy button. Highlighting follows the site theme.

// src/scripts/shutter-timing.ts
export const FULL = { close: 280, hold: 130, open: 420 };
export const QUICK = { close: 190, hold: 30, open: 320 };

python

import torch.nn.functional as F

def dpo_loss(policy_logratios, reference_logratios, beta=0.1):
    """Each argument is log p(chosen | x) - log p(rejected | x) for one model."""
    return -F.logsigmoid(beta * (policy_logratios - reference_logratios)).mean()

pnpm install
pnpm dev

Math

Inline math sits in the line: direct preference optimization keeps the policy $\pi_\theta$ close to a reference policy $\pi_{\text{ref}}$ , and $\beta$ sets how close. Display math gets its own block and scrolls sideways on narrow screens:

\mathcal{L}_{\text{DPO}} = -\,\mathbb{E}_{(x,\,y_w,\,y_l)\sim\mathcal{D}} \left[\log \sigma\!\left( \beta \log \frac{\pi_\theta(y_w \mid x)}{\pi_{\text{ref}}(y_w \mid x)} - \beta \log \frac{\pi_\theta(y_l \mid x)}{\pi_{\text{ref}}(y_l \mid x)} \right)\right]

Tables

Tables use tabular figures so numbers line up. This one lists the page transition you saw on the way in.

Phase	Section change	Within a section	Motion
Close	280 ms	190 ms	Accelerates into contact
Hold	130 ms	30 ms	Lock frame names the destination
Open	420 ms	320 ms	Fast release, long settle

Figures

Figures carry a numbered caption. Charts are drawn from real data; this one reads the same constants as the transition code.

Fig. 01 · Shutter timing in milliseconds, read from src/scripts/shutter-timing.ts.

Disclosure

Why does the shutter wait for the next page?

The plates close while the next page downloads, so the wait is hidden behind motion. If the page arrives early, the lock frame still holds for a beat; if it arrives late, a progress line appears on the plate.

That is the full kit. If a future entry needs something new, it gets added here first.

The site does not bind any shortcuts yet. This one is only here to show the style. ↩