/* ============================================================================ THE GATHERING — web/assets/css/gather.css A gathered book seen spine-on. Eleven gatherings, one per part of this page, marked as a binder marks them: a bar on the fold of each section so that a misgathered book shows at a glance. The bar of a part you have read is inked; the part you are in inks as you pass through it; the parts ahead are the unset rule. Nothing moves that the reader did not move. Reference: signature / collating marks — Gaskell, A New Introduction to Bibliography, Oxford 1972, Part 2. ADDS NO VERTICAL PIXEL. It lives in the left trim margin, which is 20px of empty gutter at 390 and 80px at 1280. No text moves. DECLARED DEPARTURE: it stays under prefers-reduced-motion, quantised (§5), against this house's blanket motion gate. Reason in §5. ========================================================================== */ .gather { display: none; } @supports (animation-timeline: view()) and (timeline-scope: --b5r-g1) { /* 1. THE TIMELINES ------------------------------------------------------ Hoisted to the root so a fixed rail that is nobody's descendant can see them. Named by CLASS, never by nth-of-type: forauthors.js inserts .b5r-bar as main's first child and would shift every index by one. */ html { timeline-scope: --b5r-g1, --b5r-g2, --b5r-g3, --b5r-g4, --b5r-g5, --b5r-g6, --b5r-g7, --b5r-g8, --b5r-g9, --b5r-g10, --b5r-g11; } .hero { view-timeline-name: --b5r-g1; view-timeline-axis: block; } .book { view-timeline-name: --b5r-g2; view-timeline-axis: block; } /* BOTH names, at ONE site. .inside is .bk-scene-track; view-timeline-name is a list and a later declaration REPLACES it. Delete the two view-timeline lines from scenes.css §2 when this lands, or the book scene dies silently. */ .inside { view-timeline-name: --b5r-inside, --b5r-g3; view-timeline-axis: block, block; } .path { view-timeline-name: --b5r-g4; view-timeline-axis: block; } .options { view-timeline-name: --b5r-g5; view-timeline-axis: block; } .doesnt { view-timeline-name: --b5r-g6; view-timeline-axis: block; } .yours { view-timeline-name: --b5r-g7; view-timeline-axis: block; } .write { view-timeline-name: --b5r-g8; view-timeline-axis: block; } .begin { view-timeline-name: --b5r-g9; view-timeline-axis: block; } .house { view-timeline-name: --b5r-g10; view-timeline-axis: block; } .colophon{ view-timeline-name: --b5r-g11; view-timeline-axis: block; } /* 2. THE SPINE ---------------------------------------------------------- MEASURED: at 390 the gutter is 20px and live text starts at x=20, so a 4px rail 4px out leaves 12px of air. At 1280 live text starts at x=80, so an 8px rail 32px out leaves 40px. z-index 41 is over the masthead's 40 (or the letterhead's ground would bury it at scroll 0) and under the thumb bar's 60. */ .gather { position: fixed; left: var(--s1); width: var(--lead); top: calc(var(--mo-strip, 0px) + env(safe-area-inset-top, 0px) + var(--s6)); bottom: calc(5rem + var(--s6)); z-index: 41; display: flex; flex-direction: column; gap: var(--s2); pointer-events: none; } /* The thumb bar goes static at 840 (press.css §14), so the foot is free. */ @media (min-width: 52.5rem) { .gather { bottom: var(--s6); } } /* 80px of trim margin, measured. The spine is seen closer, not differently. */ @media (min-width: 80rem) { .gather { left: var(--s8); width: var(--s2); } } /* 3. THE MARKS ---------------------------------------------------------- flex: 1 1 0, so the eleven share whatever height is free. No media query, no maintained number: it fits a 568px phone, an 800px desktop and Larger print without being told about any of them. --ink-30 is licensed by press.css §1 as NON-TEXT ONLY and computes 3.69:1 on --canvas, passing WCAG 2.2 SC 1.4.11. VERIFY it on --sink (#E8E0D0) too; if it falls under 3:1 there, use --ink-45. */ .gather i { display: block; position: relative; flex: 1 1 0; min-height: var(--lead); max-height: calc(16 * var(--lead)); /* SOFTENED after looking at it. --ink-30 unset and --ink inked put a 4px near-black bar 660px tall twelve pixels from the text: it read as a heavy border on the page rather than as a mark in the margin, which is the opposite of a thing that reports quietly. --rule unset and --ink-45 inked keeps the same two-state reading — you can see at a glance which gatherings are behind you — at the weight of a printer's mark. --ink-45 on --canvas is 6.25:1, so the distinction survives a bad screen and passes SC 1.4.11 with room to spare. */ background: var(--rule); } /* 4. THE INK ------------------------------------------------------------ A transform, never a height: a scroll-driven transform is composited; an animated height runs layout on every frame, which on a poor connection is the difference between scrolling and stuttering. Longhands, never the `animation` shorthand — the shorthand resets animation-timeline and animation-range and would silently un-scroll the whole rail (scenes.css §3 makes the same warning). RANGE: `contain` is the honest default — the mark inks while its part owns the screen. TUNE IT by walking the page at 390 and 1280, the way scenes.css tuned 62%/38%; `cover 0% cover 100%` is the smoother alternative but starts inking before a word has been read. */ .gather i::after { content: ""; position: absolute; inset: 0; background: var(--ink-45); transform: scaleY(0); transform-origin: top center; animation-name: b5r-ink; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-range: contain 0% contain 100%; } @keyframes b5r-ink { to { transform: scaleY(1); } } .gather i:nth-child(1)::after { animation-timeline: --b5r-g1; } .gather i:nth-child(2)::after { animation-timeline: --b5r-g2; } .gather i:nth-child(3)::after { animation-timeline: --b5r-g3; } .gather i:nth-child(4)::after { animation-timeline: --b5r-g4; } .gather i:nth-child(5)::after { animation-timeline: --b5r-g5; } .gather i:nth-child(6)::after { animation-timeline: --b5r-g6; } .gather i:nth-child(7)::after { animation-timeline: --b5r-g7; } .gather i:nth-child(8)::after { animation-timeline: --b5r-g8; } .gather i:nth-child(9)::after { animation-timeline: --b5r-g9; } .gather i:nth-child(10)::after { animation-timeline: --b5r-g10; } .gather i:nth-child(11)::after { animation-timeline: --b5r-g11; } /* 5. REDUCED MOTION — kept, quantised ------------------------------------ SC 2.2.2 does not apply: nothing here starts automatically. The rail moves only as far as the reader moves it. Removing the only orientation cue for the readers most likely to need one is the worse harm, so the departure from this house's blanket gate is deliberate: each mark now snaps from unset to inked when its part is finished, and nothing on the screen ever appears to slide. */ @media (prefers-reduced-motion: reduce) { .gather i::after { animation-timing-function: steps(1, end); } } /* 6. THE ONE GUARD ------------------------------------------------------ The skip link is the only control that appears at top-left on focus. Painting it over the rail satisfies SC 2.4.12 (AAA), not merely 2.4.11 (AA), and costs one line. */ .skip:focus { z-index: 62; } @media print { .gather { display: none; } } }