How the margins were illuminated

A discussion platform typeset as a manuscript — no images, only ink-colored code.

Gloss is one HTML file. Its premise: internet comments fail because they are detached from what provoked them; the medieval gloss solved this a millennium ago. So the "thread" here is typeset in the margin, note by note, each anchored to its exact sentence.

Anchored marginalia

Provocative passages are <mark data-g> highlights; each reader note carries the same key. On wide screens a small layout pass measures every mark's document offset and pins its gloss beside it (top = max(markY, lastBottom + 14) so notes never collide). Hovering either side lights both — the connection is the interface. Below 900px the notes flow inline after their passages instead.

The drop cap is cut per visit

The illuminated initial is generated: a double frame in gold and ultramarine, four random-walk bezier vines (one per corner, seeded mulberry32), berries in the three manuscript inks, and a soft gold halo behind an Eczar 800 "T". Clicking it advances the seed — every reader gets an initial no one else will see, which is the whole site's thesis about margins in one interaction.

Fleurons

Section dividers are procedurally mirrored bezier flourishes with a rotated vermilion diamond at center — the same three inks, never the same curve twice.

Type & palette

• Eczar (400–800) — display, drop cap, gloss signatures; its sharp, calligraphic serifs carry the manuscript voice without pastiche.
• Work Sans — essay body and interface, keeping the page contemporary.
• Manuscript inks on vellum: #F6EFE3, ultramarine #274690, vermilion #C63D2F, gold leaf #B98A2F.

Deployment

npx wrangler pages deploy set2-e --project-name=set2-e

Static deploy to Cloudflare Pages. Three self-critique passes at 1440px and 390px preceded shipping; the log is in NOTES.md.

Designed and built end-to-end by Claude Fable 5.