eric/wizwar6e
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

The clip gallery joins the site

Browse Source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG
This commit is contained in:
Eric Wagoner
2026-09-02 21:39:53 -04:00
co-authored by Claude Fable 5.1
parent 86070b42a3
commit 3723b8f211
2 changed files with 34 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/server/src/clips.ts
+32 -20
View File
@@ -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) => `<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Archivo+Narrow:wght@400;600&family=Courier+Prime&display=swap" rel="stylesheet">
${metas.join("\n")}
<style>${PAGE_CSS}</style>
</head>
@@ -98,6 +108,7 @@ export function clipsIndexHtml(clips: ClipMeta[], base: string): string {
</div>
</a>`).join("\n");
const body = `
<nav class="mast"><a href="/">Wiz-War</a><span class="crumb">clips</span><a class="deal" href="/">deal yourself in →</a></nav>
<h1>Clips from the labyrinth</h1>
<p class="sub">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.</p>
@@ -126,8 +137,9 @@ export function clipPageHtml(clip: ClipMeta, base: string): string {
`<meta name="twitter:card" content="summary_large_image"/>`,
];
const body = `
<h1><a href="/clips">Clips from the labyrinth</a></h1>
<p class="sub">${esc(clip.title)} — ${esc(clip.blurb)}</p>
<nav class="mast"><a href="/">Wiz-War</a><span class="crumb"><a href="/clips" style="font:inherit;letter-spacing:inherit;text-transform:none;color:inherit">clips</a> / ${esc(clip.title)}</span><a class="deal" href="/">deal yourself in →</a></nav>
<h1><a href="/clips">${esc(clip.title)}</a></h1>
<p class="sub">${esc(clip.blurb)}</p>
<button class="share" type="button" data-title="${esc(clip.title)}" data-text="${esc(clip.blurb)}">Share this clip</button>
<div class="takes">
<div class="take">