/* --------------------------------------------------------------- The boiling display face, carried over from the app (src/renderer/styles/index.css → .font-serif-display, and src/renderer/styles/boil-keyframes.css for the @keyframes). Each of the ten faces is one hand-redrawn pass over Minion (see type-experiment/). Cycling font-family through them at 8fps makes the letterforms shimmer — the "boiling line" look. Swapping the whole face is what makes this affordable: no per-character spans, no DOM changes. Every face carries Minion's own advance widths and vertical metrics, so only the outlines change between frames and nothing re-flows once the faces are in. Nothing here activates on its own. boil.js loads the ten faces and only then sets data-boil on , so a page that never gets the faces (no JS, offline, Save-Data) simply stays in EB Garamond rather than strobing between the two while they arrive. Each face covers A-Z a-z 0-9 and common punctuation only; anything else (accents, symbols, ellipsis) falls through to EB Garamond, which is why the fallback list is repeated on every keyframe. --------------------------------------------------------------- */ @font-face { font-family: 'HolmesBoil0'; font-display: swap; src: url(fonts/boil/HolmesBoil-0.woff2) format('woff2'); } @font-face { font-family: 'HolmesBoil1'; font-display: swap; src: url(fonts/boil/HolmesBoil-1.woff2) format('woff2'); } @font-face { font-family: 'HolmesBoil2'; font-display: swap; src: url(fonts/boil/HolmesBoil-2.woff2) format('woff2'); } @font-face { font-family: 'HolmesBoil3'; font-display: swap; src: url(fonts/boil/HolmesBoil-3.woff2) format('woff2'); } @font-face { font-family: 'HolmesBoil4'; font-display: swap; src: url(fonts/boil/HolmesBoil-4.woff2) format('woff2'); } @font-face { font-family: 'HolmesBoil5'; font-display: swap; src: url(fonts/boil/HolmesBoil-5.woff2) format('woff2'); } @font-face { font-family: 'HolmesBoil6'; font-display: swap; src: url(fonts/boil/HolmesBoil-6.woff2) format('woff2'); } @font-face { font-family: 'HolmesBoil7'; font-display: swap; src: url(fonts/boil/HolmesBoil-7.woff2) format('woff2'); } @font-face { font-family: 'HolmesBoil8'; font-display: swap; src: url(fonts/boil/HolmesBoil-8.woff2) format('woff2'); } @font-face { font-family: 'HolmesBoil9'; font-display: swap; src: url(fonts/boil/HolmesBoil-9.woff2) format('woff2'); } /* * Generated by type-experiment/make_boil_css.py — regenerate with: * python3 make_boil_css.py 80 > src/renderer/styles/boil-keyframes.css * and copy the block below from there. * * The order is shuffled rather than 0,1,2..9: a plain rotation is visibly * rhythmic and the eye locks onto the cycle. 80 frames drawn evenly from the * ten faces, never repeating a face back to back (a repeat reads as the * animation stalling), gives a 10s period that reads as random. * * font-family is a discrete property: steps(1, end) is what makes each keyframe * hold its face for the whole interval instead of flipping at the midpoint. */ /* 80 frames @ 8fps = 10s before the order repeats */ @keyframes holmes-boil { 0% { font-family: 'HolmesBoil6', 'EB Garamond', Palatino, Georgia, serif; } 1.25% { font-family: 'HolmesBoil4', 'EB Garamond', Palatino, Georgia, serif; } 2.5% { font-family: 'HolmesBoil9', 'EB Garamond', Palatino, Georgia, serif; } 3.75% { font-family: 'HolmesBoil3', 'EB Garamond', Palatino, Georgia, serif; } 5% { font-family: 'HolmesBoil1', 'EB Garamond', Palatino, Georgia, serif; } 6.25% { font-family: 'HolmesBoil5', 'EB Garamond', Palatino, Georgia, serif; } 7.5% { font-family: 'HolmesBoil0', 'EB Garamond', Palatino, Georgia, serif; } 8.75% { font-family: 'HolmesBoil8', 'EB Garamond', Palatino, Georgia, serif; } 10% { font-family: 'HolmesBoil7', 'EB Garamond', Palatino, Georgia, serif; } 11.25% { font-family: 'HolmesBoil2', 'EB Garamond', Palatino, Georgia, serif; } 12.5% { font-family: 'HolmesBoil9', 'EB Garamond', Palatino, Georgia, serif; } 13.75% { font-family: 'HolmesBoil4', 'EB Garamond', Palatino, Georgia, serif; } 15% { font-family: 'HolmesBoil6', 'EB Garamond', Palatino, Georgia, serif; } 16.25% { font-family: 'HolmesBoil7', 'EB Garamond', Palatino, Georgia, serif; } 17.5% { font-family: 'HolmesBoil0', 'EB Garamond', Palatino, Georgia, serif; } 18.75% { font-family: 'HolmesBoil8', 'EB Garamond', Palatino, Georgia, serif; } 20% { font-family: 'HolmesBoil3', 'EB Garamond', Palatino, Georgia, serif; } 21.25% { font-family: 'HolmesBoil1', 'EB Garamond', Palatino, Georgia, serif; } 22.5% { font-family: 'HolmesBoil5', 'EB Garamond', Palatino, Georgia, serif; } 23.75% { font-family: 'HolmesBoil2', 'EB Garamond', Palatino, Georgia, serif; } 25% { font-family: 'HolmesBoil7', 'EB Garamond', Palatino, Georgia, serif; } 26.25% { font-family: 'HolmesBoil2', 'EB Garamond', Palatino, Georgia, serif; } 27.5% { font-family: 'HolmesBoil6', 'EB Garamond', Palatino, Georgia, serif; } 28.75% { font-family: 'HolmesBoil5', 'EB Garamond', Palatino, Georgia, serif; } 30% { font-family: 'HolmesBoil9', 'EB Garamond', Palatino, Georgia, serif; } 31.25% { font-family: 'HolmesBoil0', 'EB Garamond', Palatino, Georgia, serif; } 32.5% { font-family: 'HolmesBoil8', 'EB Garamond', Palatino, Georgia, serif; } 33.75% { font-family: 'HolmesBoil3', 'EB Garamond', Palatino, Georgia, serif; } 35% { font-family: 'HolmesBoil1', 'EB Garamond', Palatino, Georgia, serif; } 36.25% { font-family: 'HolmesBoil4', 'EB Garamond', Palatino, Georgia, serif; } 37.5% { font-family: 'HolmesBoil9', 'EB Garamond', Palatino, Georgia, serif; } 38.75% { font-family: 'HolmesBoil3', 'EB Garamond', Palatino, Georgia, serif; } 40% { font-family: 'HolmesBoil4', 'EB Garamond', Palatino, Georgia, serif; } 41.25% { font-family: 'HolmesBoil1', 'EB Garamond', Palatino, Georgia, serif; } 42.5% { font-family: 'HolmesBoil8', 'EB Garamond', Palatino, Georgia, serif; } 43.75% { font-family: 'HolmesBoil6', 'EB Garamond', Palatino, Georgia, serif; } 45% { font-family: 'HolmesBoil7', 'EB Garamond', Palatino, Georgia, serif; } 46.25% { font-family: 'HolmesBoil0', 'EB Garamond', Palatino, Georgia, serif; } 47.5% { font-family: 'HolmesBoil2', 'EB Garamond', Palatino, Georgia, serif; } 48.75% { font-family: 'HolmesBoil5', 'EB Garamond', Palatino, Georgia, serif; } 50% { font-family: 'HolmesBoil0', 'EB Garamond', Palatino, Georgia, serif; } 51.25% { font-family: 'HolmesBoil5', 'EB Garamond', Palatino, Georgia, serif; } 52.5% { font-family: 'HolmesBoil7', 'EB Garamond', Palatino, Georgia, serif; } 53.75% { font-family: 'HolmesBoil1', 'EB Garamond', Palatino, Georgia, serif; } 55% { font-family: 'HolmesBoil6', 'EB Garamond', Palatino, Georgia, serif; } 56.25% { font-family: 'HolmesBoil4', 'EB Garamond', Palatino, Georgia, serif; } 57.5% { font-family: 'HolmesBoil8', 'EB Garamond', Palatino, Georgia, serif; } 58.75% { font-family: 'HolmesBoil2', 'EB Garamond', Palatino, Georgia, serif; } 60% { font-family: 'HolmesBoil9', 'EB Garamond', Palatino, Georgia, serif; } 61.25% { font-family: 'HolmesBoil3', 'EB Garamond', Palatino, Georgia, serif; } 62.5% { font-family: 'HolmesBoil5', 'EB Garamond', Palatino, Georgia, serif; } 63.75% { font-family: 'HolmesBoil9', 'EB Garamond', Palatino, Georgia, serif; } 65% { font-family: 'HolmesBoil4', 'EB Garamond', Palatino, Georgia, serif; } 66.25% { font-family: 'HolmesBoil7', 'EB Garamond', Palatino, Georgia, serif; } 67.5% { font-family: 'HolmesBoil8', 'EB Garamond', Palatino, Georgia, serif; } 68.75% { font-family: 'HolmesBoil1', 'EB Garamond', Palatino, Georgia, serif; } 70% { font-family: 'HolmesBoil2', 'EB Garamond', Palatino, Georgia, serif; } 71.25% { font-family: 'HolmesBoil3', 'EB Garamond', Palatino, Georgia, serif; } 72.5% { font-family: 'HolmesBoil6', 'EB Garamond', Palatino, Georgia, serif; } 73.75% { font-family: 'HolmesBoil0', 'EB Garamond', Palatino, Georgia, serif; } 75% { font-family: 'HolmesBoil9', 'EB Garamond', Palatino, Georgia, serif; } 76.25% { font-family: 'HolmesBoil0', 'EB Garamond', Palatino, Georgia, serif; } 77.5% { font-family: 'HolmesBoil3', 'EB Garamond', Palatino, Georgia, serif; } 78.75% { font-family: 'HolmesBoil4', 'EB Garamond', Palatino, Georgia, serif; } 80% { font-family: 'HolmesBoil5', 'EB Garamond', Palatino, Georgia, serif; } 81.25% { font-family: 'HolmesBoil2', 'EB Garamond', Palatino, Georgia, serif; } 82.5% { font-family: 'HolmesBoil8', 'EB Garamond', Palatino, Georgia, serif; } 83.75% { font-family: 'HolmesBoil6', 'EB Garamond', Palatino, Georgia, serif; } 85% { font-family: 'HolmesBoil7', 'EB Garamond', Palatino, Georgia, serif; } 86.25% { font-family: 'HolmesBoil1', 'EB Garamond', Palatino, Georgia, serif; } 87.5% { font-family: 'HolmesBoil8', 'EB Garamond', Palatino, Georgia, serif; } 88.75% { font-family: 'HolmesBoil1', 'EB Garamond', Palatino, Georgia, serif; } 90% { font-family: 'HolmesBoil6', 'EB Garamond', Palatino, Georgia, serif; } 91.25% { font-family: 'HolmesBoil2', 'EB Garamond', Palatino, Georgia, serif; } 92.5% { font-family: 'HolmesBoil5', 'EB Garamond', Palatino, Georgia, serif; } 93.75% { font-family: 'HolmesBoil7', 'EB Garamond', Palatino, Georgia, serif; } 95% { font-family: 'HolmesBoil4', 'EB Garamond', Palatino, Georgia, serif; } 96.25% { font-family: 'HolmesBoil3', 'EB Garamond', Palatino, Georgia, serif; } 97.5% { font-family: 'HolmesBoil0', 'EB Garamond', Palatino, Georgia, serif; } 98.75% { font-family: 'HolmesBoil9', 'EB Garamond', Palatino, Georgia, serif; } } /* --------------------------------------------------------------- Where it applies. One list covering both pages; a selector that matches nothing on a given page costs nothing. Italic display text is deliberately left out — there is no italic boil face, so it would render as a synthetic slant of the roman and lose the true italic letterforms. Those lines stay in real EB Garamond Italic: index.html .case-q, .kicker exports.html .hero-kicker, .pane-blurb --------------------------------------------------------------- */ :root[data-boil='on'] .display, :root[data-boil='on'] .hero-h1, :root[data-boil='on'] .hero h1, :root[data-boil='on'] .tag-head, :root[data-boil='on'] .find-said, :root[data-boil='on'] .say-name, :root[data-boil='on'] .say-text, :root[data-boil='on'] .card h3, :root[data-boil='on'] .legend h3, :root[data-boil='on'] .pane-name, :root[data-boil='on'] .move h3, :root[data-boil='on'] .pull { /* 80 frames / 8fps = 10s before the sequence repeats */ animation: holmes-boil 10s steps(1, end) infinite; } /* Two headings set part of their line in italic. They inherit the boiling family from the parent, and browsers disagree about what to do with an italic request against a family that has only a roman face: Chrome drops to the next family with a real italic, others slant the roman. Naming the fallback stack here settles it — the italic run always gets EB Garamond Italic, and a declaration on the child outranks the parent's inheritance, animated or not. */ :root[data-boil] .hero-h1 em, :root[data-boil] .pull em { font-family: 'EB Garamond', Palatino, 'Palatino Linotype', Georgia, 'Times New Roman', serif; } /* --------------------------------------------------------------- Tracking correction. The boil faces keep Minion's advance widths, which set a touch looser than EB Garamond at these sizes, so the swap-over reads gappy. Each value below is the element's own letter-spacing from its page tightened by a further -.01em; the no-JS EB Garamond fallback keeps the page's base value. Matches [data-boil='on'] and 'still' alike — any state where a boil face is actually showing. .hero h1 is guarded with :not(.hero-h1): index's hero h1 carries the .hero-h1 class and would otherwise match both rules, with the exports-tuned value winning on specificity. Each page's hero keeps its own base (-.012em index, -.018em exports). --------------------------------------------------------------- */ :root[data-boil='on'] .display, :root[data-boil='still'] .display, :root[data-boil='on'] .tag-head, :root[data-boil='still'] .tag-head, :root[data-boil='on'] .card h3, :root[data-boil='still'] .card h3, :root[data-boil='on'] .move h3, :root[data-boil='still'] .move h3 { letter-spacing: -.015em; /* base -.005em */ } :root[data-boil='on'] .find-said, :root[data-boil='still'] .find-said, :root[data-boil='on'] .say-name, :root[data-boil='still'] .say-name, :root[data-boil='on'] .say-text, :root[data-boil='still'] .say-text, :root[data-boil='on'] .legend h3, :root[data-boil='still'] .legend h3 { letter-spacing: -.01em; /* base 0 */ } :root[data-boil='on'] .pane-name, :root[data-boil='still'] .pane-name, :root[data-boil='on'] .pull, :root[data-boil='still'] .pull { letter-spacing: -.02em; /* base -.01em */ } :root[data-boil='on'] .hero-h1, :root[data-boil='still'] .hero-h1 { letter-spacing: -.022em; /* base -.012em */ } :root[data-boil='on'] .hero h1:not(.hero-h1), :root[data-boil='still'] .hero h1:not(.hero-h1) { letter-spacing: -.028em; /* base -.018em */ } /* Reduced motion, and the app's data-boil="off" escape hatch: hold one frame, so the hand-drawn face survives without the movement. */ :root[data-boil='still'] .display, :root[data-boil='still'] .hero-h1, :root[data-boil='still'] .hero h1, :root[data-boil='still'] .tag-head, :root[data-boil='still'] .find-said, :root[data-boil='still'] .say-name, :root[data-boil='still'] .say-text, :root[data-boil='still'] .card h3, :root[data-boil='still'] .legend h3, :root[data-boil='still'] .pane-name, :root[data-boil='still'] .move h3, :root[data-boil='still'] .pull { font-family: 'HolmesBoil0', 'EB Garamond', Palatino, Georgia, serif; } @media (prefers-reduced-motion: reduce) { :root[data-boil='on'] .display, :root[data-boil='on'] .hero-h1, :root[data-boil='on'] .hero h1, :root[data-boil='on'] .tag-head, :root[data-boil='on'] .find-said, :root[data-boil='on'] .say-name, :root[data-boil='on'] .say-text, :root[data-boil='on'] .card h3, :root[data-boil='on'] .legend h3, :root[data-boil='on'] .pane-name, :root[data-boil='on'] .move h3, :root[data-boil='on'] .pull { animation: none; font-family: 'HolmesBoil0', 'EB Garamond', Palatino, Georgia, serif; } }