Slide Deck

Slide deck

Single-file HTML decks on a fixed 1600×900 canvas: identical on a 4K monitor and a hotel projector, zero dependencies, works over file://. Each slide carries its presenter script inside itself; the same file serves the room, the presenter popup, the printed handout, and the readable presenter edition.

Quick start

1. Copy assets/deck-template.html to the output path. It is a working deck — open it in a browser to see the machinery.
2. Replace the <title>, topbar text, and the four example <section class="slide"> blocks with real slides.
3. For the presenter edition, copy the file again and change <body> to <body class="presenter-file">. Never fork slide content between editions.
4. Verify (both scripts need chromium on PATH):

   python3 scripts/check-slides.py path/to/deck.html   # fit audit — gates the build
   python3 scripts/shoot-slides.py path/to/deck.html   # PNG per slide
   

5. Open the PNGs and look at them. The audit checks fit; only an eye catches colliding labels, dead space, or bottom-heavy slides.

Rules that are load-bearing

• Slides are 1600×900 px. No vw/vh/% for slide content — px only. The stage transform does all scaling.
• overflow:hidden on .slide is intentional. Content that doesn't fit is a build bug: cut or split the slide, never enable scroll.
• Keep justify-content:safe center on .sbody — plain center spills overflow over the title where the audit can't see it.
• Every slide ends with p.cite pinned at the bottom, even "Sources: internal discussion". A bare bottom edge reads unfinished.
• No external resources — no CDN, web fonts, or remote images. Embed Chart.js inline if charts are needed.
• Slide <section>s are direct children of #deck only.
• Keep the literal </body> out of new JS strings — the screenshot harness patches before the last one.

Slide anatomy

<section class="slide" data-hour="Block 00:00-01:00" data-t="0:05" data-dur="8">
  <p class="kicker">Eyebrow</p>
  <h1>Title</h1>
  <div class="sbody">…</div>
  <p class="cite">Sources: …</p>
  <div class="script">…presenter notes…</div>
</section>

data-hour labels the block (set on a block's first slide), data-t is the planned clock position, data-dur the planned minutes — the presenter timer flags overruns against them.

Authoring

Component catalogue, slide types, the svg.dia diagram system, retheming via :root tokens, and the build-script pattern for 15+ slide decks: read references/authoring.md.

Talk-track schema (.script blocks: say-exactly, do-now, ask, expected, if-quiet, bridge, timing, …), presenter view, and the presenter-file edition: read references/presenter-notes.md.

Editing the runtime or stylesheet, writing a deck generator, charts, print, or the audit/screenshot internals: read references/runtime-contract.md.

Interaction patterns worth reaching for

• .veil blurs a value until V is pressed — the room commits a guess before seeing the answer. Pair with a .predict box.
• .divider slides reset attention between blocks; .hourbar pips show progress through the day.
• .flow, .ladder, .orbit, .days, .roles, .check cover most structural needs before any new CSS.

Common mistakes