docs(design): record the real content folder
This commit is contained in:
Lucas Winther
@@ -282,6 +282,28 @@ mockup of the transition.
|
||||
slim bar; when collapsed, A's strip appears in the panel; B's ribbons in the sea are an on/off
|
||||
switch ("Threads on the sea").
|
||||
|
||||
### 17. Real content added outside the repo
|
||||
|
||||
> "We have also added audio files, as well as a full version of Homer's Oddysey and Illiad to the
|
||||
> epic-the-musical-content directory in home."
|
||||
|
||||
What is in `~/epic-the-musical-content/` (1.5 GB, checked 2026-10-30):
|
||||
- `Songs and Lyrics/EPIC - The <Saga> Saga (<year>)/`: all 9 sagas, **40 songs as FLAC**, **37 `.lrc`
|
||||
timed-lyrics files** (3 songs have none), plus `album.nfo` (saga blurb, fandom-wiki credited) and
|
||||
`folder.jpg` cover art. File names: `Jorge Rivera-Herrans - EPIC - The <Saga> Saga - NN - <Title>.flac|.lrc`.
|
||||
- `Homers the Odyssey Book/The Odyssey.txt` and `The Illiad.txt`: Project Gutenberg #1727 and #2199,
|
||||
**Samuel Butler's prose translations** (public domain). Being prose, they have books and paragraphs,
|
||||
not line numbers, so the sample data's "Book 9, lines 105–460" references will not map onto them.
|
||||
|
||||
*(Claude's notes)*
|
||||
- The `.lrc` files make **synced lyrics** possible: the Listen & lyrics player can highlight the
|
||||
current line, not just the current part.
|
||||
- The Odyssey text makes the "real place in the Odyssey" link able to open the actual passage.
|
||||
- The audio, lyrics and cover art are Jorge Rivera-Herrans' copyrighted work. AGENTS.md currently says
|
||||
"lyrics are placeholders, never real lyrics". Proposed: keep this folder **out of git and out of the
|
||||
Docker image**; the server reads it from a `CONTENT_DIR` path, mounted read-only into the container.
|
||||
Needs the user's OK (it touches `src/server.ts`, the Dockerfile and the lyrics rule).
|
||||
|
||||
## Open questions (in priority order)
|
||||
|
||||
1. ~~Which sea-chart approach (08–11) reads best, or which mix?~~ 11's navigation + 10's style (§9).
|
||||
|
||||
@@ -1,3 +1,380 @@
|
||||
import { songs } from "../../data/sample";
|
||||
import type { Song } from "../../data/types";
|
||||
import { mountCredits } from "../../shared/credits";
|
||||
import { hereAt } from "./chart";
|
||||
import { cyclopsFrieze, GROUND_Y, MOUTH, troyFrieze, VB_FIT_H, VB_H, VB_W, VB_Y } from "./frieze";
|
||||
import { createPanel, TABS, type Tab } from "./panel";
|
||||
import { VoyageScene, ease, webglAvailable } from "./scene";
|
||||
import { applyPick, bright, byTrack, COURSE_Y_C, hStrip, indexOf, routeOf, songMotifs, stripX } from "./threads";
|
||||
|
||||
mountCredits();
|
||||
|
||||
/* ---------- beats (13's five, each with the song the panel follows) ---------- */
|
||||
|
||||
interface Beat { short: string; eyebrow: string; caption: string; songId: string }
|
||||
const BEATS: Beat[] = [
|
||||
{ short: "Frieze", eyebrow: "The Troy Saga · year 0", caption: "Troy falls", songId: "the-horse-and-the-infant" },
|
||||
{ short: "To sea", eyebrow: "Between sagas · a year at sea", caption: "Out on the open sea", songId: "full-speed-ahead" },
|
||||
{ short: "Landfall", eyebrow: "The Cyclops Saga · year 1", caption: "Landfall: Cyclops' Island", songId: "polyphemus" },
|
||||
{ short: "Curtain", eyebrow: "The Cyclops Saga", caption: "Polyphemus", songId: "polyphemus" },
|
||||
{ short: "Cave", eyebrow: "Inside the cave", caption: "Into the cave", songId: "survive" },
|
||||
];
|
||||
const SEG_DUR = [1.8, 2.0, 1.2, 1.6];
|
||||
const HOLD = 3.4;
|
||||
const songById = (id: string) => songs.find((s) => s.id === id)!;
|
||||
/** Each beat's song as an index on the voyage (track order), so strip markers can sail between them. */
|
||||
const BEAT_IDX = BEATS.map((b) => indexOf(songById(b.songId)));
|
||||
|
||||
type Paths = "a" | "b" | "c";
|
||||
const PATHS: Record<Paths, string> = { a: "In the panel", b: "In the world", c: "Timeline" };
|
||||
|
||||
/* ---------- params ---------- */
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
const clampBeat = (n: number) => Math.min(5, Math.max(1, Math.round(n) || 1));
|
||||
const startBeat = clampBeat(Number(params.get("beat") ?? 1));
|
||||
const freezeT = params.has("t") ? Math.min(1, Math.max(0, Number(params.get("t")) || 0)) : null;
|
||||
const startTab: Tab = TABS.some((t) => t.id === params.get("tab")) ? (params.get("tab") as Tab) : "about";
|
||||
const startOpen = params.get("panel") !== "0";
|
||||
let paths: Paths = (["a", "b", "c"] as const).find((m) => m === params.get("paths")) ?? "a";
|
||||
let pick: string | null = params.get("motif");
|
||||
|
||||
/* ---------- DOM ---------- */
|
||||
|
||||
const app = document.getElementById("app")!;
|
||||
const esc = (s: string) => s.replace(/[&<>"]/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """ })[c]!);
|
||||
app.className = "shell";
|
||||
app.innerHTML = `
|
||||
<section class="stage" id="stage" aria-label="The voyage, in five beats">
|
||||
<div class="stage__three" id="three"></div>
|
||||
<div class="stage__fallback" id="fallback" hidden><p>3D needs WebGL; the frieze beats still play.</p></div>
|
||||
<div class="frieze-box" id="fzbox" aria-hidden="true"></div>
|
||||
<div class="frieze-host frieze-host--troy" id="troy">${troyFrieze(songById(BEATS[0]!.songId))}</div>
|
||||
<div class="frieze-host frieze-host--cyclops" id="cyclops">${cyclopsFrieze(songById(BEATS[3]!.songId))}</div>
|
||||
<div class="wlabels" id="wlabels" aria-label="Motif threads in the world"></div>
|
||||
<div class="cut" id="cut" aria-hidden="true"></div>
|
||||
<header class="cap" id="cap" aria-live="polite">
|
||||
<p class="lbl cap__eyebrow" id="cap-eyebrow"></p>
|
||||
<h1 class="cap__title" id="cap-title"></h1>
|
||||
<button type="button" class="back" id="back" hidden>Back to sea</button>
|
||||
</header>
|
||||
<nav class="hud" id="hud" aria-label="Beats and paths">
|
||||
<div class="hud__row">
|
||||
<button type="button" class="hud__play" id="play" aria-pressed="false">Play</button>
|
||||
<button type="button" class="hud__step" id="prev" aria-label="Previous beat">←</button>
|
||||
<ol class="dots" id="dots">
|
||||
${BEATS.map((b, i) => `<li><button type="button" data-beat="${i + 1}"><span class="dots__n">${i + 1}</span><span class="lbl dots__label">${esc(b.short)}</span></button></li>`).join("")}
|
||||
</ol>
|
||||
<button type="button" class="hud__step" id="next" aria-label="Next beat">→</button>
|
||||
<div class="ptoggle" role="group" aria-label="Where the motif paths are shown">
|
||||
<span class="lbl ptoggle__label">Paths</span>
|
||||
${(["a", "b", "c"] as Paths[]).map((m) => `<button type="button" data-paths="${m}" title="${PATHS[m]}">${m.toUpperCase()}</button>`).join('<span class="ptoggle__sep" aria-hidden="true">·</span>')}
|
||||
<span class="ptoggle__name" id="paths-name"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tl" id="tl"></div>
|
||||
</nav>
|
||||
</section>
|
||||
<aside class="panel" id="panel" aria-label="Song companion"></aside>`;
|
||||
|
||||
const $ = (id: string) => document.getElementById(id)!;
|
||||
const stage = $("stage");
|
||||
const troy = $("troy");
|
||||
const cyclops = $("cyclops");
|
||||
const cut = $("cut");
|
||||
const capEl = $("cap");
|
||||
const tl = $("tl");
|
||||
const wlabels = $("wlabels");
|
||||
const playBtn = $("play") as HTMLButtonElement;
|
||||
const backBtn = $("back") as HTMLButtonElement;
|
||||
const troyParts = {
|
||||
figs: troy.querySelector<SVGGElement>(".f-figs")!,
|
||||
top: troy.querySelector<SVGGElement>(".f-top")!,
|
||||
bottom: troy.querySelector<SVGGElement>(".f-bottom")!,
|
||||
horizon: troy.querySelector<SVGPathElement>(".horizon-line")!,
|
||||
};
|
||||
const cyParts = {
|
||||
zoom: cyclops.querySelector<SVGGElement>(".f-zoom")!,
|
||||
mouth: cyclops.querySelector<SVGPathElement>(".mouth-fill")!,
|
||||
};
|
||||
|
||||
const setParam = (k: string, v: string | null) => {
|
||||
const u = new URL(location.href);
|
||||
if (v === null) u.searchParams.delete(k);
|
||||
else u.searchParams.set(k, v);
|
||||
history.replaceState(null, "", u);
|
||||
};
|
||||
|
||||
let scene: VoyageScene | null = null;
|
||||
if (webglAvailable()) {
|
||||
try { scene = new VoyageScene($("three"), reduced); } catch { scene = null; }
|
||||
}
|
||||
if (!scene) $("fallback").hidden = false;
|
||||
|
||||
const panel = createPanel($("panel"), {
|
||||
tab: startTab,
|
||||
open: startOpen,
|
||||
reduced,
|
||||
pick,
|
||||
pinned: paths === "a",
|
||||
onTab: (t) => setParam("tab", t),
|
||||
onOpen: (o) => { app.dataset.panel = o ? "open" : "closed"; setParam("panel", o ? null : "0"); },
|
||||
onPick: (id) => setPick(id),
|
||||
});
|
||||
app.dataset.panel = startOpen ? "open" : "closed";
|
||||
const here = panel.here;
|
||||
|
||||
/* ---------- motif pick: one choice, highlighted everywhere ---------- */
|
||||
|
||||
let song: Song = songById(BEATS[0]!.songId);
|
||||
|
||||
function setPick(id: string | null) {
|
||||
pick = id;
|
||||
panel.setPick(id);
|
||||
scene?.setPick(id);
|
||||
applyPick(stage, id);
|
||||
setParam("motif", id);
|
||||
}
|
||||
stage.addEventListener("click", (e) => {
|
||||
const b = (e.target as Element).closest<Element>("[data-pick]");
|
||||
if (b) { const id = b.getAttribute("data-pick"); setPick(pick === id ? null : id); }
|
||||
});
|
||||
|
||||
/** The song the panel, the threads and the labels follow (switches at each transition's midpoint). */
|
||||
function setSong(next: Song) {
|
||||
song = next;
|
||||
if (pick && !songMotifs(next).some((m) => m.id === pick)) pick = null;
|
||||
panel.setSong(next);
|
||||
scene?.setThreadSong(next);
|
||||
renderLabels();
|
||||
renderTimeline();
|
||||
setPick(pick);
|
||||
}
|
||||
|
||||
/* ---------- paths B: floating labels over the 3D ribbons ---------- */
|
||||
|
||||
function renderLabels() {
|
||||
wlabels.innerHTML = songMotifs(song).map((m) => {
|
||||
const r = routeOf(song, m.id);
|
||||
return `<button type="button" class="wl" data-m="${m.id}" data-pick="${m.id}" aria-pressed="false" style="--c:${bright(m.id)}" title="${esc(m.name)}: ${esc(r.from)} · ${esc(r.next)}">
|
||||
<span class="wl__name"><i aria-hidden="true"></i>${esc(m.name)}</span><span class="wl__note" data-note></span></button>`;
|
||||
}).join("");
|
||||
}
|
||||
|
||||
function placeLabels() {
|
||||
if (!scene || paths !== "b") return;
|
||||
const vis = p < 2 ? clamp01((p - 0.6) / 0.25) * (1 - clamp01((p - 2) / 0.25)) : p < 3.5 ? 1 - clamp01((p - 2) / 0.25) : clamp01((p - 3.78) / 0.15);
|
||||
wlabels.style.opacity = String(vis);
|
||||
wlabels.style.visibility = vis > 0.02 ? "visible" : "hidden";
|
||||
if (vis <= 0.02) return;
|
||||
const pts = scene.labelPoints(p);
|
||||
const cur = indexOf(song);
|
||||
const btns = [...wlabels.querySelectorAll<HTMLElement>(".wl")];
|
||||
// stack labels that would overlap, nearest the knot first
|
||||
const placed: { x: number; y: number }[] = [];
|
||||
pts.map((pt, k) => ({ pt, k })).sort((a, b) => b.pt.y - a.pt.y).forEach(({ pt, k }) => {
|
||||
const el = btns[k];
|
||||
if (!el) return;
|
||||
let y = pt.y;
|
||||
for (const q of placed) if (Math.abs(q.x - pt.x) < 200 && Math.abs(q.y - y) < 54) y = q.y - 56;
|
||||
placed.push({ x: pt.x, y });
|
||||
el.hidden = !pt.visible;
|
||||
el.style.transform = `translate(${Math.round(pt.x)}px, ${Math.round(y)}px)`;
|
||||
const s = byTrack[pt.song]!;
|
||||
const note = el.querySelector("[data-note]")!;
|
||||
const text = pt.ahead ? `next: ${s.track}. ${s.title}` : pt.song === cur ? "not heard again after this" : `last heard: ${s.track}. ${s.title}`;
|
||||
if (note.textContent !== text) note.textContent = text;
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- paths C: the timeline at the bottom ---------- */
|
||||
|
||||
const TL = { labelW: 168, rowH: 20, titles: true } as const;
|
||||
function renderTimeline() {
|
||||
if (paths !== "c") { tl.innerHTML = ""; return; }
|
||||
const width = tl.clientWidth;
|
||||
if (!width) return;
|
||||
tl.innerHTML = hStrip({ ...TL, width, song, pick });
|
||||
}
|
||||
|
||||
/* ---------- state ---------- */
|
||||
|
||||
let p = freezeT !== null ? Math.max(0, startBeat - 2 + freezeT) : startBeat - 1;
|
||||
let anim: { from: number; to: number; start: number; dur: number } | null = null;
|
||||
let cutting = false;
|
||||
let playing = false;
|
||||
let holdUntil = 0;
|
||||
let shownBeat = -1;
|
||||
|
||||
const clamp01 = (x: number) => Math.min(1, Math.max(0, x));
|
||||
const easeIn = (x: number) => { const t = clamp01(x); return t * t * t; };
|
||||
const easeInOut = (x: number) => { const t = clamp01(x); return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; };
|
||||
|
||||
/** The ship's place on the voyage (fractional song index) at beat position p. */
|
||||
function shipIdx(): number {
|
||||
const i = Math.min(3, Math.floor(p));
|
||||
const k = i === 1 ? easeInOut(p - 1) : ease(p - i);
|
||||
return BEAT_IDX[i]! + (BEAT_IDX[i + 1]! - BEAT_IDX[i]!) * k;
|
||||
}
|
||||
|
||||
/** How the band-cropped frieze sits in its box on the stage (px). */
|
||||
let fit = { s: 1, oy: 0 };
|
||||
function measureFit() {
|
||||
const box = $("fzbox");
|
||||
const w = box.clientWidth, h = box.clientHeight;
|
||||
if (!w || !h) return;
|
||||
const s = Math.min(w / VB_W, h / VB_FIT_H);
|
||||
fit = { s, oy: box.offsetTop + (h - VB_FIT_H * s) / 2 };
|
||||
const H = stage.clientHeight;
|
||||
scene?.setHorizon((fit.oy + (GROUND_Y - VB_Y) * s) / H);
|
||||
}
|
||||
|
||||
/* ---------- render: everything is a function of p ---------- */
|
||||
|
||||
function renderDom() {
|
||||
const s0 = clamp01(p);
|
||||
troy.hidden = s0 >= 1;
|
||||
if (!troy.hidden) {
|
||||
const flat = ease(s0 / 0.32);
|
||||
troyParts.figs.setAttribute("transform", `translate(0,${GROUND_Y}) scale(1,${(1 - flat).toFixed(4)}) translate(0,${-GROUND_Y})`);
|
||||
troyParts.figs.style.opacity = String(1 - ease((s0 - 0.1) / 0.24));
|
||||
const part = easeInOut((s0 - 0.12) / 0.5);
|
||||
troyParts.top.setAttribute("transform", `translate(0,${(-part * (GROUND_Y + 700)).toFixed(1)})`);
|
||||
troyParts.bottom.setAttribute("transform", `translate(0,${(part * (VB_H - GROUND_Y + 700)).toFixed(1)})`);
|
||||
troyParts.horizon.style.opacity = String(1 - ease((s0 - 0.5) / 0.22));
|
||||
}
|
||||
|
||||
// "You are here" on the route chart (Paths tab) follows the ship from open sea to the island.
|
||||
const [hx, hy] = hereAt(ease((p - 1.1) / 0.8));
|
||||
here.setAttribute("transform", `translate(${hx.toFixed(1)},${hy.toFixed(1)})`);
|
||||
|
||||
cyclops.hidden = p <= 2;
|
||||
if (!cyclops.hidden) {
|
||||
const drop = easeInOut(p - 2);
|
||||
// the curtain falls from fully above the stage: its glaze reaches 600 units below the viewBox
|
||||
const travel = fit.oy + (VB_H + 600 - VB_Y) * fit.s + 24;
|
||||
cyclops.style.transform = `translateY(${((drop - 1) * travel).toFixed(1)}px)`;
|
||||
const z = clamp01(p - 3);
|
||||
cyParts.mouth.style.opacity = String(1 - ease(z / 0.28));
|
||||
const scale = 1 + 15 * easeIn((z - 0.08) / 0.92);
|
||||
cyParts.zoom.setAttribute("transform", `translate(${MOUTH.x},${MOUTH.y}) scale(${scale.toFixed(4)}) translate(${-MOUTH.x},${-MOUTH.y})`);
|
||||
cyclops.style.opacity = String(1 - ease((z - 0.72) / 0.26));
|
||||
}
|
||||
stage.dataset.world = p < 0.5 ? "frieze" : p < 2.5 ? "sea" : p < 3.5 ? "frieze" : "cave";
|
||||
|
||||
// Captions dip and swap at each transition's midpoint; the panel and threads follow the same beat.
|
||||
const near = Math.round(p);
|
||||
const d = Math.abs(p - near);
|
||||
capEl.style.opacity = String(clamp01(1 - d * 3.2));
|
||||
if (near !== shownBeat) {
|
||||
shownBeat = near;
|
||||
const b = BEATS[near]!;
|
||||
$("cap-eyebrow").textContent = b.eyebrow;
|
||||
$("cap-title").textContent = b.caption;
|
||||
backBtn.hidden = near !== 4;
|
||||
if (b.songId !== song.id || !panelReady) { panelReady = true; setSong(songById(b.songId)); }
|
||||
}
|
||||
const target = anim ? anim.to : Math.round(p);
|
||||
document.querySelectorAll<HTMLButtonElement>("#dots button").forEach((btn, i) => {
|
||||
if (i === target) btn.setAttribute("aria-current", "step");
|
||||
else btn.removeAttribute("aria-current");
|
||||
});
|
||||
($("prev") as HTMLButtonElement).disabled = target <= 0;
|
||||
($("next") as HTMLButtonElement).disabled = target >= 4;
|
||||
|
||||
// the ship markers on the strips (A in the panel, C at the bottom) sail with the voyage
|
||||
const idx = shipIdx();
|
||||
if (paths === "a") panel.setShip(idx);
|
||||
if (paths === "c") {
|
||||
const m = tl.querySelector<SVGGElement>("[data-ship]");
|
||||
if (m) m.setAttribute("transform", `translate(${stripX({ ...TL, width: tl.clientWidth }, idx).toFixed(1)},${COURSE_Y_C})`);
|
||||
}
|
||||
placeLabels();
|
||||
}
|
||||
let panelReady = false;
|
||||
|
||||
/* ---------- navigation ---------- */
|
||||
|
||||
function go(to: number) {
|
||||
if (freezeT !== null || cutting) return;
|
||||
to = Math.min(4, Math.max(0, to));
|
||||
if (anim) { p = anim.to; anim = null; }
|
||||
if (to === p) return;
|
||||
if (reduced || Math.abs(to - p) !== 1) crossCut(to);
|
||||
else anim = { from: p, to, start: performance.now(), dur: SEG_DUR[Math.min(p, to)]! * 1000 };
|
||||
}
|
||||
|
||||
function crossCut(to: number) {
|
||||
cutting = true;
|
||||
cut.classList.add("is-on");
|
||||
window.setTimeout(() => {
|
||||
p = to;
|
||||
renderDom();
|
||||
cut.classList.remove("is-on");
|
||||
window.setTimeout(() => { cutting = false; holdUntil = performance.now() + HOLD * 1000; }, 380);
|
||||
}, reduced ? 260 : 300);
|
||||
}
|
||||
|
||||
function setPlaying(on: boolean) {
|
||||
playing = on;
|
||||
playBtn.textContent = on ? "Pause" : "Play";
|
||||
playBtn.setAttribute("aria-pressed", String(on));
|
||||
if (on) {
|
||||
if (Math.round(p) >= 4 && !anim) go(0);
|
||||
holdUntil = performance.now() + 1200;
|
||||
}
|
||||
}
|
||||
|
||||
function setPaths(m: Paths) {
|
||||
paths = m;
|
||||
document.body.dataset.paths = m;
|
||||
panel.setPinned(m === "a");
|
||||
scene?.setPaths(m === "b");
|
||||
wlabels.hidden = m !== "b";
|
||||
document.querySelectorAll<HTMLButtonElement>(".ptoggle button").forEach((b) => b.setAttribute("aria-pressed", String(b.dataset.paths === m)));
|
||||
$("paths-name").textContent = PATHS[m];
|
||||
setParam("paths", m === "a" ? null : m);
|
||||
measureFit();
|
||||
renderTimeline();
|
||||
applyPick(stage, pick);
|
||||
renderDom();
|
||||
}
|
||||
|
||||
playBtn.addEventListener("click", () => setPlaying(!playing));
|
||||
$("prev").addEventListener("click", () => { setPlaying(false); go((anim ? anim.to : p) - 1); });
|
||||
$("next").addEventListener("click", () => { setPlaying(false); go((anim ? anim.to : p) + 1); });
|
||||
backBtn.addEventListener("click", () => { setPlaying(false); go(1); });
|
||||
document.querySelectorAll<HTMLButtonElement>("#dots button").forEach((b) =>
|
||||
b.addEventListener("click", () => { setPlaying(false); go(Number(b.dataset.beat) - 1); }));
|
||||
document.querySelectorAll<HTMLButtonElement>(".ptoggle button").forEach((b) =>
|
||||
b.addEventListener("click", () => setPaths(b.dataset.paths as Paths)));
|
||||
window.addEventListener("keydown", (e) => {
|
||||
// Keys inside the panel (tabs, audio, links) belong to the panel.
|
||||
if (e.target instanceof Element && e.target.closest(".panel")) return;
|
||||
if (e.key === "ArrowRight") { setPlaying(false); go((anim ? anim.to : p) + 1); }
|
||||
else if (e.key === "ArrowLeft") { setPlaying(false); go((anim ? anim.to : p) - 1); }
|
||||
else if (e.key === " " && !(e.target instanceof HTMLButtonElement)) { e.preventDefault(); setPlaying(!playing); }
|
||||
});
|
||||
|
||||
/* ---------- loop ---------- */
|
||||
|
||||
const t0 = performance.now();
|
||||
function frame(now: number) {
|
||||
if (anim) {
|
||||
const k = clamp01((now - anim.start) / anim.dur);
|
||||
p = anim.from + (anim.to - anim.from) * k;
|
||||
if (k >= 1) { p = anim.to; anim = null; holdUntil = now + HOLD * 1000; }
|
||||
} else if (playing && !cutting && now >= holdUntil) {
|
||||
if (Math.round(p) >= 4) setPlaying(false);
|
||||
else go(Math.round(p) + 1);
|
||||
}
|
||||
scene?.render(p, (now - t0) / 1000 + 2.2);
|
||||
renderDom();
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
|
||||
new ResizeObserver(() => { measureFit(); renderTimeline(); applyPick(stage, pick); }).observe(stage);
|
||||
setPaths(paths);
|
||||
requestAnimationFrame(frame);
|
||||
if (params.get("play") === "1" && freezeT === null) setPlaying(true);
|
||||
|
||||
@@ -1 +1,593 @@
|
||||
body { margin: 0; --stub-16: 1; }
|
||||
/* 15 · Voyage, look 2 — 14's voyage in look 2 only, with look 3's cohesion (one ornament, one type
|
||||
pairing, terracotta + black accents across frieze, panel and HUD) and the motif paths out in the open. */
|
||||
@import "@fontsource/cormorant-garamond/latin-500.css";
|
||||
@import "@fontsource/cormorant-garamond/latin-600.css";
|
||||
@import "@fontsource/cormorant-garamond/latin-700.css";
|
||||
@import "@fontsource/cormorant-garamond/latin-500-italic.css";
|
||||
@import "@fontsource/inter/latin-400.css";
|
||||
@import "@fontsource/inter/latin-600.css";
|
||||
|
||||
:root {
|
||||
/* black-figure (04): the frieze, and now the accents of the whole interface */
|
||||
--clay: #c46a33;
|
||||
--clay-deep: #9a4520;
|
||||
--glaze: #1d140e;
|
||||
--added-white: #efe3c8;
|
||||
/* vellum (12): the reading surfaces */
|
||||
--vellum: #e3d6b4;
|
||||
--vellum-hi: #ece2c6;
|
||||
--vellum-lo: #e0d1ab;
|
||||
--iron: #2b2118;
|
||||
--iron-soft: #5a4836;
|
||||
--line: rgb(43 33 24 / 0.2);
|
||||
--serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
|
||||
--sans: "Inter", system-ui, sans-serif;
|
||||
--panel-w: 420px;
|
||||
--panel-slim: 56px;
|
||||
/* the frieze's key band, as a strip: shared by the frieze, the panel's top edge and the HUD */
|
||||
--meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect width='28' height='28' fill='%23c46a33'/%3E%3Cpath d='M0 25.2H28M4.2 25.2V3H24V20.3H9.8V8.4H18.2V14.7' fill='none' stroke='%231d140e' stroke-width='3.2'/%3E%3C/svg%3E");
|
||||
/* where the fitted frieze sits on the stage: between the caption and the HUD */
|
||||
--fz-top: 116px;
|
||||
--fz-bot: 92px;
|
||||
}
|
||||
body[data-paths="c"] { --fz-bot: 218px; }
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
overflow: hidden;
|
||||
background: var(--glaze);
|
||||
color: var(--iron);
|
||||
font-family: var(--sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
button { font: inherit; color: inherit; }
|
||||
:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
|
||||
[hidden] { display: none !important; }
|
||||
|
||||
/* one label style everywhere: the frieze's inscriptions (Cormorant, capitals, wide tracking) */
|
||||
.lbl { font: 600 0.875rem/1.2 var(--serif); letter-spacing: 0.16em; text-transform: uppercase; }
|
||||
|
||||
/* the shared ornament: a meander strip between two glaze rules */
|
||||
.meander-edge::before, .cap::before, .hud::before, .panel::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: 0;
|
||||
height: 14px;
|
||||
background: var(--meander) 0 0 / 14px 14px repeat-x;
|
||||
border-top: 2px solid var(--glaze);
|
||||
border-bottom: 2px solid var(--glaze);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ---------- shell: stage | panel, credits below both ---------- */
|
||||
.shell {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) var(--panel-w);
|
||||
transition: grid-template-columns 0.42s cubic-bezier(0.22, 0.8, 0.2, 1);
|
||||
}
|
||||
.shell[data-panel="closed"] { grid-template-columns: minmax(0, 1fr) var(--panel-slim); }
|
||||
[data-fan-credits] {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
padding: 0.8rem 1.5rem;
|
||||
background: var(--glaze);
|
||||
color: var(--added-white);
|
||||
opacity: 1;
|
||||
border-top: 2px solid var(--clay);
|
||||
}
|
||||
|
||||
/* ---------- stage ---------- */
|
||||
.stage {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: var(--glaze);
|
||||
isolation: isolate;
|
||||
}
|
||||
.stage__three, .cut, .stage__fallback { position: absolute; inset: 0; }
|
||||
.stage__three { z-index: 0; }
|
||||
.stage__canvas { display: block; width: 100%; height: 100%; }
|
||||
.stage__fallback { display: grid; place-items: center; background: linear-gradient(#a9c3c0, #f4dfb4 60%, #1d5a6e 61%); color: var(--iron); }
|
||||
|
||||
/* ---------- friezes: fitted between caption and HUD ---------- */
|
||||
.frieze-host, .frieze-box { position: absolute; left: 0; right: 0; top: var(--fz-top); bottom: var(--fz-bot); }
|
||||
.frieze-box { visibility: hidden; pointer-events: none; }
|
||||
.frieze-host { z-index: 2; pointer-events: none; will-change: transform, opacity; }
|
||||
.frieze { display: block; width: 100%; height: 100%; overflow: visible; }
|
||||
.frieze-host--cyclops { z-index: 3; }
|
||||
.f-surround { fill: var(--glaze); }
|
||||
.f-band { fill: var(--clay); }
|
||||
.ink { fill: var(--glaze); }
|
||||
.clay { fill: var(--clay); }
|
||||
.inc { fill: none; stroke: var(--clay); stroke-linecap: round; stroke-linejoin: round; }
|
||||
.limb { fill: none; stroke: var(--glaze); stroke-linecap: round; stroke-linejoin: round; }
|
||||
.limb-edge { fill: none; stroke: var(--clay); stroke-linecap: round; stroke-linejoin: round; }
|
||||
.oar { stroke: var(--glaze); stroke-width: 3.2; stroke-linecap: round; }
|
||||
.rig { fill: none; stroke: var(--glaze); stroke-width: 1.4; }
|
||||
.wave { fill: none; stroke: var(--glaze); stroke-linecap: round; }
|
||||
.ground { stroke: var(--glaze); stroke-width: 3.5; }
|
||||
.rule { fill: none; stroke: var(--glaze); stroke-width: 2.6; }
|
||||
.vol { fill: none; stroke: var(--glaze); stroke-width: 3; stroke-linecap: round; }
|
||||
.mean { fill: none; stroke: var(--glaze); stroke-width: 3; }
|
||||
.scroll { fill: none; stroke: var(--glaze); stroke-width: 3.4; stroke-linecap: round; }
|
||||
.frame-rule { display: none; }
|
||||
.inscr { font: 600 19px var(--serif); letter-spacing: 0.2em; fill: var(--glaze); }
|
||||
.saga-name { font: 600 15px var(--serif); letter-spacing: 0.22em; fill: var(--glaze); }
|
||||
.glow-a { stop-color: #e2803a; }
|
||||
.glow-b { stop-color: #3a170a; }
|
||||
.glow-c { stop-color: #0c0705; }
|
||||
|
||||
/* paths B in the frieze: the register under the ground line carries the motif threads */
|
||||
.f-threads { display: none; }
|
||||
body[data-paths="b"] .f-threads { display: inline; }
|
||||
body[data-paths="b"] .f-scroll { display: none; }
|
||||
.ft { pointer-events: auto; cursor: pointer; transition: opacity 0.2s ease; }
|
||||
.ft__edge { fill: none; stroke: var(--glaze); stroke-width: 8; stroke-linecap: round; }
|
||||
.ft__line { fill: none; stroke: var(--c); stroke-width: 4.2; stroke-linecap: round; }
|
||||
.ft__knot { fill: var(--added-white); stroke: var(--glaze); stroke-width: 3; }
|
||||
.ft__knot.is-here { fill: var(--c); }
|
||||
.ft__dot { fill: var(--c); stroke: var(--glaze); stroke-width: 2.4; }
|
||||
.ft__name { font: 700 17px var(--serif); letter-spacing: 0.12em; fill: var(--glaze); }
|
||||
.ft.is-on .ft__line { stroke-width: 6; }
|
||||
.ft.is-on .ft__edge { stroke-width: 10; }
|
||||
.ft.is-dim { opacity: 0.28; }
|
||||
|
||||
.cut {
|
||||
z-index: 6;
|
||||
background: var(--glaze);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.cut.is-on { opacity: 1; }
|
||||
|
||||
/* ---------- caption card ---------- */
|
||||
.cap {
|
||||
position: absolute;
|
||||
z-index: 7;
|
||||
top: 22px;
|
||||
left: 24px;
|
||||
max-width: 440px;
|
||||
padding: 22px 20px 12px;
|
||||
background: var(--vellum-hi);
|
||||
color: var(--iron);
|
||||
border: 2px solid var(--glaze);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 10px 28px -14px rgb(0 0 0 / 0.6);
|
||||
overflow: hidden;
|
||||
}
|
||||
.cap::before { border-top: 0; }
|
||||
.cap__eyebrow { margin: 0; color: var(--clay-deep); }
|
||||
.cap__title { margin: 4px 0 0; font: 600 2rem/1.1 var(--serif); }
|
||||
.back {
|
||||
margin-top: 8px;
|
||||
padding: 5px 14px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--glaze);
|
||||
color: var(--added-white);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ---------- HUD: the step bar (A, B) or the bottom timeline (C) ---------- */
|
||||
.hud {
|
||||
position: absolute;
|
||||
z-index: 7;
|
||||
left: 50%;
|
||||
bottom: 18px;
|
||||
transform: translateX(-50%);
|
||||
padding: 20px 12px 8px;
|
||||
background: var(--vellum-hi);
|
||||
color: var(--iron);
|
||||
border: 2px solid var(--glaze);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 12px 30px -14px rgb(0 0 0 / 0.65);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hud::before { border-top: 0; height: 12px; background-size: 12px 12px; }
|
||||
.hud__row { display: flex; align-items: center; gap: 8px; }
|
||||
.hud button { cursor: pointer; }
|
||||
.hud__play {
|
||||
min-width: 74px;
|
||||
padding: 7px 14px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--glaze);
|
||||
color: var(--added-white);
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.hud__step {
|
||||
width: 32px; height: 32px;
|
||||
border: 1.5px solid var(--glaze);
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
}
|
||||
.hud__step:disabled { opacity: 0.3; cursor: default; }
|
||||
.dots { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
|
||||
.dots button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 6px 5px 4px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--iron-soft);
|
||||
}
|
||||
.dots__label { font-size: 0.8125rem; letter-spacing: 0.1em; }
|
||||
.dots__n {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 21px; height: 21px;
|
||||
border: 1.5px solid currentColor;
|
||||
border-radius: 50%;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.dots button[aria-current] { color: var(--iron); }
|
||||
.dots button[aria-current] .dots__label { font-weight: 700; }
|
||||
.dots button[aria-current] .dots__n { background: var(--clay); border-color: var(--glaze); color: var(--glaze); }
|
||||
.ptoggle { display: flex; align-items: center; gap: 4px; margin-left: 6px; padding-left: 12px; border-left: 1.5px solid var(--line); }
|
||||
.ptoggle__label { margin-right: 4px; font-size: 0.8125rem; color: var(--iron-soft); }
|
||||
.ptoggle__sep { color: var(--iron-soft); }
|
||||
.ptoggle button {
|
||||
width: 28px; height: 28px;
|
||||
border: 1.5px solid transparent;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
font: 700 0.95rem var(--serif);
|
||||
}
|
||||
.ptoggle button:hover { border-color: var(--line); }
|
||||
.ptoggle button[aria-pressed="true"] { background: var(--clay); border-color: var(--glaze); color: var(--glaze); }
|
||||
.ptoggle__name { min-width: 84px; margin-left: 6px; font: italic 500 1rem var(--serif); color: var(--iron-soft); }
|
||||
.tl { display: none; }
|
||||
|
||||
/* C: the HUD grows into the voyage timeline across the bottom of the stage */
|
||||
body[data-paths="c"] .hud { left: 20px; right: 20px; bottom: 16px; transform: none; padding: 20px 16px 6px; }
|
||||
body[data-paths="c"] .hud__row { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
|
||||
body[data-paths="c"] .ptoggle { margin-left: auto; }
|
||||
body[data-paths="c"] .tl { display: block; padding-top: 4px; }
|
||||
|
||||
/* ---------- horizontal thread strips (A in the panel, C at the bottom) ---------- */
|
||||
.hs { display: grid; grid-template-columns: var(--label-w) auto; align-items: start; }
|
||||
.hs__labels { display: flex; flex-direction: column; }
|
||||
.hs__course-label { height: var(--course-h); display: flex; align-items: center; padding-bottom: calc(var(--course-h) - 32px); font: 600 0.75rem var(--serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--iron-soft); }
|
||||
.hs__m {
|
||||
display: flex; align-items: center; gap: 7px;
|
||||
padding: 0 6px 0 0;
|
||||
border: 0; border-radius: 3px;
|
||||
background: transparent;
|
||||
color: var(--c);
|
||||
font-size: 0.78rem; font-weight: 600;
|
||||
text-align: left; white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.hs__m i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--glaze); }
|
||||
.hs__m:hover { text-decoration: underline; text-underline-offset: 3px; }
|
||||
.hs__m.is-on { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
|
||||
.hs__m.is-dim { opacity: 0.4; }
|
||||
.hs__svg { display: block; overflow: visible; }
|
||||
.hs__here-band { fill: rgb(196 106 51 / 0.14); }
|
||||
.hs__course { fill: none; stroke: var(--clay-deep); stroke-width: 1.6; stroke-dasharray: 5 3.5; }
|
||||
.hs__saga { stroke: var(--glaze); stroke-width: 1.4; }
|
||||
.hs__saga-name { font: 600 9.5px var(--serif); letter-spacing: 0.16em; fill: var(--iron-soft); }
|
||||
.hs__stop circle { fill: var(--vellum-hi); stroke: var(--glaze); stroke-width: 1.6; }
|
||||
.hs__stop.is-current circle { fill: var(--clay); stroke-width: 2; }
|
||||
.hs__num { font: 600 10px var(--sans); fill: var(--iron-soft); text-anchor: middle; }
|
||||
.hs__num.is-current { fill: var(--iron); }
|
||||
.hs__title { font: 500 11px var(--sans); fill: var(--iron-soft); text-anchor: middle; }
|
||||
.hs__title.is-current { font-weight: 600; fill: var(--iron); }
|
||||
.hs__ship-hull, .hs__ship-sail { fill: var(--clay); stroke: var(--glaze); stroke-width: 1.4; stroke-linejoin: round; }
|
||||
.hs__ship-mast { stroke: var(--glaze); stroke-width: 1.6; }
|
||||
.hs__here { font: italic 600 12px var(--serif); fill: var(--clay-deep); }
|
||||
.thread { transition: opacity 0.2s ease; }
|
||||
.thread__line { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; opacity: 0.85; }
|
||||
.thread__knot { fill: var(--vellum-hi); stroke: var(--c); stroke-width: 2.2; }
|
||||
.thread__knot.is-here { fill: var(--c); stroke: var(--glaze); stroke-width: 1.6; }
|
||||
.thread.is-on .thread__line { stroke-width: 3.8; opacity: 1; }
|
||||
.thread.is-on .thread__knot { fill: var(--c); }
|
||||
.thread.is-dim { opacity: 0.2; }
|
||||
|
||||
/* ---------- B: floating labels over the 3D ribbons ---------- */
|
||||
.wlabels { position: absolute; inset: 0; z-index: 5; pointer-events: none; transition: opacity 0.2s linear; }
|
||||
.wl {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
translate: -50% calc(-100% - 14px);
|
||||
display: grid;
|
||||
gap: 0;
|
||||
padding: 4px 10px 5px;
|
||||
border: 1.5px solid var(--glaze);
|
||||
border-left: 5px solid var(--c);
|
||||
border-radius: 2px;
|
||||
background: var(--vellum-hi);
|
||||
color: var(--iron);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.6);
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.wl::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 14px; background: var(--glaze); }
|
||||
.wl__name { display: flex; align-items: center; gap: 6px; font: 700 0.8125rem/1.2 var(--serif); letter-spacing: 0.12em; text-transform: uppercase; }
|
||||
.wl__name i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--glaze); }
|
||||
.wl__note { font-size: 0.75rem; color: var(--iron-soft); }
|
||||
.wl.is-on { outline: 2px solid var(--clay); outline-offset: 1px; }
|
||||
.wl.is-dim { opacity: 0.45; }
|
||||
|
||||
/* ---------- the panel ---------- */
|
||||
.panel {
|
||||
position: relative;
|
||||
z-index: 8;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
background:
|
||||
repeating-linear-gradient(90deg, rgb(91 65 40 / 0.03) 0 1px, transparent 1px 7px),
|
||||
linear-gradient(180deg, var(--vellum-hi), #e6d9b8);
|
||||
color: var(--iron);
|
||||
border-left: 2px solid var(--glaze);
|
||||
box-shadow: -14px 0 30px -18px rgb(0 0 0 / 0.7);
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.panel::before { z-index: 3; height: 18px; background-size: 18px 18px; border-top: 0; }
|
||||
.panel__body {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: calc(var(--panel-w) - 2px);
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto minmax(0, 1fr);
|
||||
padding-top: 18px;
|
||||
transition: opacity 0.25s ease, transform 0.42s cubic-bezier(0.22, 0.8, 0.2, 1);
|
||||
}
|
||||
.panel[data-open="false"] .panel__body { opacity: 0; transform: translateX(40px); pointer-events: none; }
|
||||
|
||||
.panel__head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 22px 10px 24px; }
|
||||
.panel__song { flex: 1; min-width: 0; transition: opacity 0.18s ease, transform 0.18s ease; }
|
||||
.panel__eyebrow { margin: 0; font-size: 0.8125rem; color: var(--clay-deep); }
|
||||
.panel__title { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 2px; font: 600 2rem/1.05 var(--serif); }
|
||||
.panel__n, .panel__tab-n {
|
||||
flex: none;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 30px; height: 30px;
|
||||
border: 1.5px solid var(--glaze);
|
||||
border-radius: 50%;
|
||||
background: var(--clay);
|
||||
color: var(--glaze);
|
||||
font: 700 0.9375rem var(--sans);
|
||||
}
|
||||
.panel__n { transform: translateY(-3px); }
|
||||
.panel__sub { margin: 0; color: var(--iron-soft); }
|
||||
.panel__hide {
|
||||
flex: none;
|
||||
margin-top: 2px;
|
||||
padding: 5px 12px;
|
||||
border: 1.5px solid var(--line);
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
font-size: 0.875rem;
|
||||
color: var(--iron-soft);
|
||||
cursor: pointer;
|
||||
}
|
||||
.panel__hide:hover { color: var(--iron); border-color: var(--glaze); }
|
||||
|
||||
/* A: the pinned strip */
|
||||
.pin { margin: 2px 0 0; padding: 8px 22px 6px 24px; border-top: 1px solid var(--line); background: rgb(255 250 236 / 0.35); transition: opacity 0.18s ease; }
|
||||
.pin__head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 2px; font-size: 0.8125rem; color: var(--iron); }
|
||||
.pin__head span { font: italic 500 0.95rem var(--serif); letter-spacing: 0; text-transform: none; color: var(--iron-soft); }
|
||||
|
||||
.tabs { display: flex; gap: 4px; padding: 0 22px 0 24px; border-top: 1px solid var(--line); border-bottom: 1.5px solid var(--glaze); }
|
||||
.panel[data-pinned="false"] .tabs { border-top: 0; }
|
||||
.tabs button {
|
||||
position: relative;
|
||||
padding: 11px 9px 10px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--iron-soft);
|
||||
font: 600 0.9375rem var(--serif);
|
||||
letter-spacing: 0.1em;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tabs button[aria-selected="true"] { color: var(--iron); font-weight: 700; }
|
||||
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1.5px; height: 4px; background: var(--clay); border: 1px solid var(--glaze); border-bottom: 0; }
|
||||
.panel__view {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 18px 22px 28px 24px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--line) transparent;
|
||||
transition: opacity 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
.panel.is-swapping .panel__view, .panel.is-swapping .panel__song, .panel.is-swapping .pin { opacity: 0; transform: translateY(6px); }
|
||||
|
||||
/* the slim tab, shown when collapsed */
|
||||
.panel__tab {
|
||||
position: absolute;
|
||||
inset: 18px 0 0;
|
||||
width: var(--panel-slim);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 22px 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--iron);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s ease 0.1s;
|
||||
}
|
||||
.panel[data-open="false"] .panel__tab { opacity: 1; pointer-events: auto; }
|
||||
.panel__tab-arrow { font-size: 1.5rem; line-height: 1; color: var(--clay-deep); }
|
||||
.panel__tab-label { writing-mode: vertical-rl; font: 600 1rem var(--serif); letter-spacing: 0.16em; text-transform: uppercase; }
|
||||
|
||||
/* ---------- panel content ---------- */
|
||||
.sec { margin: 22px 0 8px; font: 600 1.3rem/1.2 var(--serif); }
|
||||
.panel__view > div > .sec:first-child, .panel__view > div > div:first-child > .sec:first-child { margin-top: 0; }
|
||||
.note {
|
||||
margin: 0 0 16px;
|
||||
padding: 9px 12px;
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: 4px;
|
||||
color: var(--iron-soft);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.hint { margin: 0 0 10px; color: var(--iron-soft); font-size: 0.875rem; }
|
||||
|
||||
/* About */
|
||||
.facts { margin: 0; display: grid; gap: 0; }
|
||||
.facts div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
|
||||
.facts dt { padding-top: 2px; font: 600 0.8125rem var(--serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--iron-soft); }
|
||||
.facts dd { margin: 0; }
|
||||
.facts a, .about a { color: var(--clay-deep); text-underline-offset: 3px; }
|
||||
.about__fact { margin: 14px 0 0; font: italic 500 1.2rem/1.35 var(--serif); }
|
||||
.parts { margin: 0; padding: 0; list-style: none; }
|
||||
.parts li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
|
||||
.parts__name { font-weight: 600; }
|
||||
.parts__who { color: var(--iron-soft); text-align: right; }
|
||||
.panel .audio-slot { padding: 12px 14px; border: 1px dashed var(--line); border-radius: 4px; color: var(--iron-soft); opacity: 1; font-size: 0.875rem; }
|
||||
.panel .video-cards { gap: 8px; }
|
||||
.panel .video-card {
|
||||
position: relative;
|
||||
padding: 9px 14px 9px 36px;
|
||||
border: 1.5px solid var(--glaze);
|
||||
border-radius: 2px;
|
||||
background: #f3ecd8;
|
||||
color: var(--iron);
|
||||
font-weight: 600;
|
||||
}
|
||||
.panel .video-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 13px; top: 50%;
|
||||
border: 6px solid transparent;
|
||||
border-left: 9px solid var(--clay);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Paths: route chart */
|
||||
.route {
|
||||
margin: 0;
|
||||
padding: 8px 9px 6px;
|
||||
background: linear-gradient(160deg, #ece2c6, #dccca5);
|
||||
color: var(--iron);
|
||||
border: 1.5px solid var(--glaze);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.route figcaption { margin-top: 4px; font: italic 500 0.95rem var(--serif); color: var(--iron-soft); }
|
||||
.chart__svg { display: block; width: 100%; height: auto; }
|
||||
.c-vellum { fill: #e6dab9; }
|
||||
.c-frame { fill: none; stroke: var(--iron); stroke-width: 0.8; }
|
||||
.c-rhumb { fill: none; stroke: rgb(154 69 32 / 0.18); stroke-width: 0.5; }
|
||||
.c-land { fill: #c9b07a; stroke: var(--iron); stroke-width: 0.9; }
|
||||
.c-ink { fill: none; stroke: var(--iron); stroke-width: 0.7; }
|
||||
.c-course { fill: none; stroke: var(--clay-deep); stroke-width: 1.3; stroke-dasharray: 3 2.4; }
|
||||
.c-port { fill: #f3ebd6; stroke: var(--iron); stroke-width: 0.9; }
|
||||
.c-num { font: 600 7px var(--sans); fill: var(--iron); }
|
||||
.c-place { font: 600 italic 14px var(--serif); fill: var(--iron); }
|
||||
.c-sea { font: italic 500 9px var(--serif); fill: var(--clay-deep); }
|
||||
.c-rose circle { fill: none; stroke: var(--iron-soft); stroke-width: 0.6; }
|
||||
.c-rose path { fill: var(--iron-soft); }
|
||||
.c-here__ring { fill: rgb(196 106 51 / 0.25); stroke: var(--clay-deep); stroke-width: 1.4; }
|
||||
.c-here__dot { fill: var(--clay-deep); }
|
||||
.c-here__label { font: 600 9.5px var(--sans); fill: var(--clay-deep); paint-order: stroke; stroke: #efe6cd; stroke-width: 2.5px; }
|
||||
|
||||
/* Paths: motif picks */
|
||||
.mlist { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
|
||||
.mpick {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
padding: 8px 12px 9px;
|
||||
border: 1px solid var(--line);
|
||||
border-left: 4px solid var(--c);
|
||||
border-radius: 2px;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.mpick:hover { background: var(--vellum-lo); }
|
||||
.mpick[aria-pressed="true"] { background: var(--vellum-lo); border-color: var(--c); }
|
||||
.mpick.is-dim { opacity: 0.5; }
|
||||
.mpick__name { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--c); }
|
||||
.mpick__name i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
|
||||
.mpick__path { color: var(--iron-soft); font-size: 0.875rem; }
|
||||
|
||||
/* Paths: the vertical thread strip */
|
||||
.vstrip { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: start; }
|
||||
.vstrip__rows { grid-column: 1 / -1; grid-row: 1; margin: 0; padding: 0; list-style: none; }
|
||||
.vstrip__row {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 calc(var(--cols) * 26px + 30px) 0 8px;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
background: transparent;
|
||||
color: var(--iron-soft);
|
||||
text-align: left;
|
||||
font-size: 0.9375rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.vstrip__row:hover { background: var(--vellum-lo); }
|
||||
.vstrip__row.is-current { color: var(--iron); font-weight: 600; background: rgb(196 106 51 / 0.14); }
|
||||
.vstrip__row.is-picked { outline: 2px solid var(--clay); outline-offset: -2px; color: var(--iron); }
|
||||
.vstrip__n { width: 18px; text-align: right; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
|
||||
.vstrip__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.vstrip__now { padding: 0 7px; border: 1px solid var(--glaze); border-radius: 999px; background: var(--clay); color: var(--glaze); font-size: 0.75rem; font-weight: 600; }
|
||||
.vstrip__threads { grid-column: 2; grid-row: 1; margin-right: 12px; pointer-events: none; overflow: visible; }
|
||||
|
||||
/* Lyrics */
|
||||
.part { margin: 0 0 16px; padding: 4px 0 6px 14px; border-left: 4px solid var(--c); transition: opacity 0.2s ease, background-color 0.2s ease; }
|
||||
.part.is-on { background: color-mix(in srgb, var(--c) 9%, transparent); }
|
||||
.part.is-dim { opacity: 0.45; }
|
||||
.part__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 4px; }
|
||||
.part__head h3 { margin: 0; font: 600 1.3rem/1.2 var(--serif); font-variant-numeric: lining-nums; }
|
||||
.part__who { display: flex; flex-wrap: wrap; gap: 4px; }
|
||||
.singer { padding: 1px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--iron-soft); }
|
||||
.part__lines p { margin: 2px 0; font: italic 500 1.15rem/1.45 var(--serif); }
|
||||
.part__motifs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
|
||||
.mtag { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 7px; border: 1px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
|
||||
.mtag i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
|
||||
.mtag:hover, .mtag.is-on { border-color: var(--c); }
|
||||
.mtag.is-on { background: color-mix(in srgb, var(--c) 26%, transparent); }
|
||||
|
||||
/* Fan works */
|
||||
.fw { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.fw__card { display: grid; align-content: start; gap: 2px; padding: 0 0 10px; border-radius: 2px; background: #f3ecd8; border: 1.5px solid var(--glaze); overflow: hidden; }
|
||||
.fw__card > p { margin: 0 10px; }
|
||||
.fw__thumb { display: block; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 6px; border-bottom: 1.5px solid var(--glaze); }
|
||||
.t-bg, .t-frame, .t-hole { fill: #d9c8a0; }
|
||||
.t-ink { fill: var(--iron); }
|
||||
.t-line { fill: none; stroke: #f3ead6; stroke-width: 2; stroke-linecap: round; }
|
||||
.fw__type { font-size: 0.75rem; color: var(--clay-deep); }
|
||||
.fw__title { font: 600 1.05rem/1.25 var(--serif); }
|
||||
.fw__by { font-size: 0.875rem; color: var(--iron-soft); }
|
||||
.fw__credit { margin-top: 4px !important; font-size: 0.8125rem; color: var(--iron-soft); text-decoration: underline dotted; text-underline-offset: 3px; }
|
||||
.fw__credit span { text-decoration: none; display: inline-block; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.cut { transition-duration: 0.25s; }
|
||||
.shell, .panel__body, .panel__view, .panel__song, .pin { transition: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user