The clip gallery joins the site
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
co-authored by
Claude Fable 5.1
Claude Fable 5.1
parent
86070b42a3
commit
3723b8f211
@@ -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">
|
||||
|
||||
@@ -1970,6 +1970,7 @@
|
||||
<button class="about-link" onclick={() => { helpTab = "about"; showHelp = true; }}>
|
||||
about this game — a labor of love
|
||||
</button>
|
||||
<a class="about-link clips-link" href="/clips">watch clips from the labyrinth</a>
|
||||
<label class="field">
|
||||
<span>Your wizard's name</span>
|
||||
<input bind:value={name} maxlength="20" placeholder="e.g. Mordecai" />
|
||||
@@ -3129,6 +3130,7 @@
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.about-link:hover { color: #43331f; }
|
||||
.clips-link { display: inline-block; margin: 0 0 0.9rem; }
|
||||
.field { display: block; text-align: left; margin-bottom: 1rem; }
|
||||
.field span {
|
||||
display: block;
|
||||
|
||||
Reference in New Issue
Block a user