From 3723b8f211e5c922b34bc030b0a603680c1a7215 Mon Sep 17 00:00:00 2001 From: Eric Wagoner Date: Wed, 2 Sep 2026 21:39:53 -0400 Subject: [PATCH] The clip gallery joins the site MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The box lid links to the clips beside the about line, and the gallery pages wear the site's own dress — its masthead with a way back to the table, Oswald headings, Archivo Narrow body, the parchment-and-gold buttons — so a shared clip and the game it came from read as one place. The clip page's subtitle is the blurb alone, the title being the heading. Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG --- packages/server/src/clips.ts | 52 ++++++++++++++++++++++-------------- packages/web/src/App.svelte | 2 ++ 2 files changed, 34 insertions(+), 20 deletions(-) diff --git a/packages/server/src/clips.ts b/packages/server/src/clips.ts index ba9675d..dece34a 100644 --- a/packages/server/src/clips.ts +++ b/packages/server/src/clips.ts @@ -9,31 +9,38 @@ const esc = (s: string) => const PAGE_CSS = ` * { box-sizing: border-box; } - body { margin: 0; background: #171a21; color: #d6d2c4; - font-family: Georgia, "Times New Roman", serif; } - a { color: #e8c87a; } - .wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 3rem; } - h1 { font-size: 1.6rem; letter-spacing: 0.04em; margin: 0 0 0.3rem; } + body { margin: 0; background: #171a20; color: #d8d2c0; font-family: "Archivo Narrow", sans-serif; } + a { color: #e0b34a; } + .wrap { max-width: 1100px; margin: 0 auto; padding: 1.4rem 1.25rem 3rem; } + .mast { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.6rem; + border-bottom: 1px solid rgba(233, 225, 203, 0.18); padding-bottom: 0.7rem; } + .mast a { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 0.18em; + font-size: 0.95rem; color: #e9e1cb; text-decoration: none; } + .mast .crumb { color: #8d8672; font-size: 0.85rem; letter-spacing: 0.06em; } + .mast .deal { margin-left: auto; font-size: 0.8rem; letter-spacing: 0.12em; color: #e0b34a; } + h1 { font-family: "Oswald", sans-serif; font-weight: 500; font-size: 1.7rem; letter-spacing: 0.06em; + text-transform: uppercase; margin: 0 0 0.3rem; color: #e9e1cb; } h1 a { color: inherit; text-decoration: none; } - p.sub { color: #8b8778; margin: 0 0 1.6rem; } + p.sub { color: #a49c86; margin: 0 0 1.6rem; font-size: 1.05rem; max-width: 46rem; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; } - .card { background: #1f232d; border: 1px solid #2c3140; border-radius: 8px; + .card { background: #1f232d; border: 1px solid rgba(233, 225, 203, 0.18); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; display: block; } + .card:hover { border-color: #e0b34a; } .card img { width: 100%; display: block; aspect-ratio: 736 / 577; object-fit: cover; } .card .meta { padding: 0.7rem 0.9rem 0.9rem; } - .card .t { color: #e8c87a; letter-spacing: 0.03em; } - .card .b { font-size: 0.9rem; line-height: 1.45; margin-top: 0.3rem; color: #b5b0a1; } - .card .s { float: right; color: #8b8778; font-size: 0.85rem; } + .card .t { font-family: "Oswald", sans-serif; color: #e0b34a; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.95rem; } + .card .b { font-size: 0.95rem; line-height: 1.4; margin-top: 0.3rem; color: #b5b0a1; } + .card .s { float: right; color: #8d8672; font-size: 0.85rem; font-family: "Courier Prime", monospace; } video { width: 100%; border-radius: 6px; display: block; background: #000; } .takes { display: grid; gap: 1.5rem; margin-top: 1.4rem; } - .take h2 { font-size: 1.05rem; color: #e8c87a; font-weight: normal; - letter-spacing: 0.04em; margin: 0 0 0.5rem; } - .foot { margin-top: 2.2rem; color: #8b8778; font-size: 0.95rem; } - .share { font: inherit; font-size: 0.95rem; letter-spacing: 0.03em; cursor: pointer; - color: #e8c87a; background: #1f232d; border: 1px solid #3a4052; border-radius: 6px; - padding: 0.45rem 1rem; margin: -0.6rem 0 0.4rem; } - .share:hover { border-color: #e8c87a; } - .share.done { color: #b5b0a1; } + .take h2 { font-family: "Oswald", sans-serif; font-size: 0.9rem; color: #e0b34a; font-weight: 500; + letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.5rem; } + .foot { margin-top: 2.2rem; color: #8d8672; font-size: 0.95rem; } + .share { font: inherit; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; + font-family: "Oswald", sans-serif; color: #43331f; background: #e9e1cb; border: 1.5px solid #43331f; + border-radius: 3px; padding: 0.4rem 1rem; margin: -0.6rem 0 0.4rem; } + .share:hover { background: #f2d27a; } + .share.done { background: #d8d2c0; } `; // The share button: the phone's own share sheet where there is one, @@ -55,6 +62,9 @@ const shell = (metas: string[], body: string) => ` + + + ${metas.join("\n")} @@ -98,6 +108,7 @@ export function clipsIndexHtml(clips: ClipMeta[], base: string): string { `).join("\n"); const body = ` +

Clips from the labyrinth

Scenes of Wiz-War, played by the rules and filmed through the wizards' own eyes. Each clip has a first-person take and a board take of the same moves.

@@ -126,8 +137,9 @@ export function clipPageHtml(clip: ClipMeta, base: string): string { ``, ]; const body = ` -

Clips from the labyrinth

-

${esc(clip.title)} — ${esc(clip.blurb)}

+ +

${esc(clip.title)}

+

${esc(clip.blurb)}

diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte index 72b5993..29db92c 100644 --- a/packages/web/src/App.svelte +++ b/packages/web/src/App.svelte @@ -1970,6 +1970,7 @@ + watch clips from the labyrinth