book-template-astro

Stage 0 · commit 3 of 19. This page now uses the Tufte 2-column layout. On desktop, sidenotes live in the right margin alongside their referencing paragraph. On mobile, they reflow inline as visually-distinct asides — always visible, nothing hidden, no tap required.

Tufte layout + sidenotes

This paragraph demonstrates the 2-column grid. The main text is constrained to about 65ch — the long-form reading measure — while the right margin holds notes at 28ch. This note sits in the right margin on desktop. Resize your browser below 48rem and watch it reflow inline as a colored aside with a left-bar. The layout is pure CSS — no JavaScript is required to position or reveal sidenotes. They are always present in the document flow; the only thing that changes across breakpoints is where they sit.

The philosophy is Gwern's Sidenotes In Web Design · Gwern Branwen (2020)T3-practitioner original sidenotes should display by default, and any reader effort defeats the point. Click-to-reveal patterns turn a sidenote into an endnote with extra steps.

The typographic conventions that make this work trace back to Edward Tufte's book design Tufte CSS · Dave Liepmann (2014)T3-practitioner original and through Dave Liepmann's CSS port. On phone-width screens there is no margin to float into, so the note becomes an inline aside rather than being hidden behind a tap.

How it works

On desktop, .sidenote uses float: right with a negative margin-right to push into the space beyond the main text column. Below 48rem, the media query unsets the float and styles the element as a colored inline block immediately after its position in the document.

Warm Tol palette

Five semantic hues inherited from the LaTeX book. Colorblind-safe (Tol Bright base).

Callout tints

Soft 6% blends with paper, used as callout backgrounds with a colored left-bar.

Typography

Body text in Roboto Variable, self-hosted via @fontsource-variable. Line height is 1.6 — targeting long-form reading. Variable fonts collapse 9 weight files into one, saving bandwidth. Self-hosted means no external CDN call at runtime. Paragraphs indent by 1em with zero vertical gap, except the first paragraph after a heading (standard book typography).

This second paragraph indents at the start, visually marking it as continuation rather than a fresh topic. Inline monospace code renders in Source Code Pro Variable with subtle background and border.

Code block

function greet(name: string): string {
  return `Hello, ${name}`;
}

greet("reader");  // → "Hello, reader"

Blockquote

Sidenotes should display by default — any user effort defeats the point. — Gwern (on mobile footnote UX)

Table

Callouts · batch 1

Six visual-block callouts. Each uses the palette's semantic role (green = tip, blue = info, plum = authority, rose = warning) plus shared padding and left-bar treatment.

Callouts · batch 2 (comparative)

Two callouts specifically for the Evolution cornerstone of each chapter: Convergence (tools agree — stable principle) and Divergence (tools differ — open design space). Both use the gold palette; a dashed left-bar on Divergence signals instability.

Status — Stage 0 complete

All 19 commits in Stage 0 have landed. The scaffold is at v0.1-stage0-complete. Next: Stage 1 ports Ch 5 "Context as Currency" from the existing LaTeX book to validate the Koller-Friedman pedagogy on real content.

Browse all chapters grouped by Part, with volatility and freshness metadata on every card. The convergence dashboard tracks which agentic-coding patterns have landed in which tools. Or visit the design chapter to see every component through the routing pipeline. Open /search/ to try full-text search. Toggle dark mode (top-right ☀/☾) or the version dropdown (top-right v). Resize to phone width to watch sidenotes reflow as inline asides.