/* Web and print presentation of the chapter-video decks. Published to /videos/_deck/slides.css by scripts/generate-video-assets.ts. The slide markup is byte-for-byte what the video was shot from: absolute geometry against a 1920x1080 canvas, from deck.css. This file does two things that file cannot: 1. Releases html/body from the fixed 1920x1080 canvas so slides can sit in a flowing page, and scales each slide down inside a 16:9 frame. 2. Adds two print modes — 1-up landscape, and 3-up portrait with a notes column — selected by a class on . The avatar bubble is display:none in deck.css outside debug renders, so the lower-right quadrant is already blank on every published and printed slide. That is deliberate: on paper the space reads as margin, and nothing important is ever laid into it. */ @import url('deck.css'); /* ---- release the fixed canvas ------------------------------------------- */ html, body { width: auto; height: auto; overflow: visible; background: #ffffff; } /* ---- the scaled slide frame --------------------------------------------- .slide is 1920x1080 and immovable. .slide-frame is a 16:9 box at whatever width the container gives it; the slide is scaled from its top-left corner to fill exactly that box. --s is the scale factor: 960/1920 = .5 by default, so the deck is correct at its 960px max width with no JavaScript at all. A ResizeObserver refines --s at narrower widths. */ .slide-frame { --s: 0.5; position: relative; width: 100%; aspect-ratio: 1920 / 1080; overflow: hidden; background: var(--slide-bg); border: 1px solid #e2e8f0; border-radius: 6px; } .slide-frame > .slide { position: absolute; top: 0; left: 0; transform: scale(var(--s)); transform-origin: top left; border-radius: 0; } /* ---- page chrome (screen only) ------------------------------------------ */ .deck-page { max-width: 1000px; margin: 0 auto; padding: 32px 20px 80px; font-family: var(--font-sans); color: var(--ink); } .deck-head { border-bottom: 1px solid var(--rule); padding-bottom: 20px; margin-bottom: 24px; } .deck-head .kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .deck-head h1 { font-size: 30px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; margin: 10px 0 12px; } .deck-head .meta { font-size: 14px; color: var(--ink-subtle); } .deck-head .meta a { color: var(--accent); text-decoration: none; } .deck-head .meta a:hover { text-decoration: underline; } .deck-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px; font-size: 14px; } .deck-tools .label { color: var(--ink-subtle); margin-right: 2px; } .deck-tools button { font: inherit; padding: 7px 14px; border: 1px solid var(--rule); border-radius: 999px; background: #fff; color: var(--ink-body); cursor: pointer; } .deck-tools button:hover { border-color: var(--accent); color: var(--accent); } .deck-tools button[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: #fff; } .deck-tools .print { margin-left: auto; font-weight: 600; } /* ---- 1-up ---------------------------------------------------------------- */ .deck-1up .sheet { margin-bottom: 40px; } .sheet-num { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 8px; } /* ---- 3-up + notes -------------------------------------------------------- */ .deck-3up .sheet { display: grid; grid-template-columns: 46% 1fr; column-gap: 28px; row-gap: 26px; align-items: start; margin-bottom: 48px; padding-bottom: 40px; border-bottom: 1px solid #f1f5f9; } /* Slide and note alternate as grid children, so each pair shares a row and a long note pushes its own slide's row down rather than desyncing the column. */ .deck-3up .note { font-size: 13px; line-height: 1.5; color: var(--ink-body); padding-bottom: 14px; border-bottom: 1px solid var(--rule); } .deck-3up .note .n { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 5px; } /* Screen shows one deck at a time; print follows the same class. */ body.mode-1up .deck-3up, body.mode-3up .deck-1up { display: none; } /* ---- print --------------------------------------------------------------- Named pages so the two modes can print at different orientations from one document. --s is forced here because the ResizeObserver writes an inline value that would otherwise win. */ @page slide-page { size: letter landscape; margin: 0.35in; } @page handout-page { size: letter portrait; margin: 0.5in; } @media print { html, body { background: #fff; } .no-print { display: none !important; } .deck-page { max-width: none; padding: 0; } .deck-1up .sheet { page: slide-page; break-inside: avoid; break-after: page; margin: 0; } .deck-1up .sheet:last-child { break-after: auto; } .deck-1up .sheet-num { display: none; } /* 10.3in of printable width; the frame is capped at 960px = scale .5 so the slide keeps the same rasterization it has on screen. */ .deck-1up .slide-frame { --s: 0.5 !important; width: 960px; margin: 0 auto; border: 1px solid #e2e8f0; } .deck-3up .sheet { page: handout-page; break-inside: avoid; break-after: page; margin: 0; padding: 0; border: 0; grid-template-columns: 396px 1fr; gap: 22px; } .deck-3up .sheet:last-child { break-after: auto; } /* 384px wide inside a 396px column: 384/1920 = .2 */ .deck-3up .slide-frame { --s: 0.2 !important; width: 384px; } .deck-3up .note { font-size: 10.5px; line-height: 1.45; } }