Rail
The page’s one ink field: the logo, the menu, and in a document a map of the page.
The rail beside this page is the live one. Below are slices of its field, built from the same markup.
- Introduction
- The pipeline, end to end
- Converting negatives
- Gallery
States
-
Cell at rest
on the field
A ring in the field’s text colour.
-
Cell hot
hover or :focus-visible
A --state cell that fires and wobbles; its name flies out on a rule.
-
Menu open
aria-expanded="true"
On the field the open control is a --state cell, breathing.
-
Current page
aria-current="page"
A still --state fill on the field.
Anatomy
| Width | 64px on index pages; 232px in document mode, collapsible to 64px |
|---|---|
| Field | --ink with --chip-fg content; in the dark theme a raised dark panel, so a light bar never glares |
| Index | the logo; the menu cell at the screen’s middle; a neuron mark at the foot, a mark and not a control |
| Document | a back cell with its section’s name, the page’s h2s as a TOC, the collapse cell top right, the menu cell at the foot |
| TOC rows | 1½ modules tall on --rail-hairline hairlines, half a module in from each side; a 24px node column, half a module, the label cut to one line; 55% at rest, 100% once read |
| Map | rows at their sections’ places in the page: at most 60% of the room and three rows a section, gaps sized by each section’s height |
| Axon | a dot wide down the node column, --rail-tissue ahead of the reader and --chip-fg behind; a node per section, 2.5 dots plus 0.5 a minute up to five |
| Current | its node a --state cell that breathes, one slow harmonic at ~15fps |
| Flyouts | a cell’s name prints on the paper past the field’s edge, at the end of a rule from the cell; the back cell’s prints on the field beside it |
The current node’s frame rate is read from ui.ts at build time; the map’s figures are from rail-axon.ts.
Decisions
-
A map, not a list
The TOC is a scaled map of the page. It first filled the bar from the back cell to the dock, so a short TOC spread over the whole height; a version capped to twice the list read as just a list.
-
Gaps by height
Gaps were sized by words first, but a post’s sections often have near-equal word counts, so the map came out even. Height is what the reader feels.
-
The axon
It replaced a progress fill rising behind a centred TOC, which read as a gauge and rose with the page rather than the sections. The axon is the writing index’s grammar, so the rail adds no new idea.
-
No loud rule
The TOC hung from a --chip-fg rule that was the loudest line on the field. It went.
-
A neuron at the foot
The load readout at the rail’s foot moved to the site menu’s Performance row; a neuron mark took its place.
-
Flyouts on paper
Names pop out as flyouts in the tooltip grammar, replacing framed paper tags. Printed past the edge, the back cell’s name landed about 200px from its cell, so it prints on the field.
-
No machine cell
The agents view is a page, reached from the site menu and the document heroes, so the rail has no cell for it.