ShadowsOverWestgate/sow-nodebb-theme
3
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Activity

prototype: frame B click-through for the north star ticket

Browse Source 
Throwaway prototype backing issue #49. Two pages sharing one shell
(index.html outdoors, forum.html indoors) plus the rejected ledger-frame
option (a-ledger.html) kept for comparison.

Not for merge. Values here are candidates, not tokens.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
archvillainette
2026-07-31 12:09:01 +02:00
co-authored by Claude Opus 5
parent cfef363107
commit 0705b0100e
4 changed files with 448 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
prototype/a-ledger.html
+144
View File
@@ -0,0 +1,144 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A — Ledger is the frame</title>
<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=Cinzel:wght@600&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root{
--gold:#c2a35a; --gilt:#a8893f; --gold-lit:#e0c878;
--plum-noir:#351e28; --blood:#8e3438; --wax:#a84a4e;
--crypt:#0f0d12; --grave:#09080b;
--panel:#18141d; --panel-deep:#110f15; --panel-raised:#201924;
--bone:#e6e0d6; --ash:#b9b2a6; --dust:#9a9086;
--ink:#d8c28a; --ink-muted:#a99d8f;
--rule:1.78rem;
}
*{box-sizing:border-box}
body{
margin:0; background:var(--grave); color:var(--ash);
font:400 1rem/1.6 Jost, system-ui, sans-serif;
padding:2.5rem 1rem 4rem;
}
h1,h2,h3{font-family:Cinzel,Georgia,serif;font-weight:600;color:var(--bone);margin:0;
text-shadow:0 1px 0 rgba(0,0,0,.9), 0 0 10px rgba(104,32,76,.16)}
.label{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:.78rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
/* the book: one bound object, hard edges, margins */
.book{
max-width:1180px;margin:0 auto;background:var(--crypt);
border:1px solid rgba(194,163,90,.22);
box-shadow:0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.03);
position:relative;
}
/* corner pieces — bookbinding */
.book::before,.book::after{content:"";position:absolute;width:34px;height:34px;pointer-events:none}
.book::before{top:8px;left:8px;border-top:1px solid var(--gilt);border-left:1px solid var(--gilt)}
.book::after{bottom:8px;right:8px;border-bottom:1px solid var(--gilt);border-right:1px solid var(--gilt)}
/* topbar reads as a running head, not a nav bar */
.runninghead{
display:flex;justify-content:space-between;align-items:baseline;
padding:1.1rem 3.2rem .9rem;border-bottom:1px solid rgba(194,163,90,.18);
background:linear-gradient(180deg,#1a1017,var(--crypt));
}
.runninghead nav{display:flex;gap:1.8rem}
.runninghead a{color:var(--ink-muted);text-decoration:none;font-family:Cinzel,serif;
font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.runninghead a:hover{color:var(--gold-lit)}
.folio{color:var(--dust);font-size:.74rem;letter-spacing:.1em}
/* frontispiece — a title page, not a hero */
.frontispiece{padding:4.5rem 3.2rem 3rem;text-align:center;
background:radial-gradient(120% 90% at 50% 0%, rgba(53,30,40,.55), transparent 70%)}
.frontispiece h1{font-size:2.9rem;letter-spacing:.04em}
.frontispiece .sub{color:var(--dust);font-size:.82rem;letter-spacing:.22em;
text-transform:uppercase;font-family:Cinzel,serif;margin-top:.9rem}
.fade-rule{height:1px;margin:1.8rem auto;max-width:420px;
background:linear-gradient(90deg,transparent,var(--gilt),transparent)}
.seal{display:inline-block;margin-top:.4rem;width:44px;height:44px;border-radius:50%;
background:radial-gradient(circle at 35% 30%, var(--wax), #5e2124);
box-shadow:inset 0 -2px 6px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.5)}
.epigraph{max-width:560px;margin:1.6rem auto 0;color:var(--ink-muted);
font-style:italic;font-size:.95rem}
/* the index: entries in ruled columns */
.leaf{padding:1rem 3.2rem 3rem}
.leaf-head{display:flex;justify-content:space-between;align-items:baseline;
padding-bottom:.5rem;border-bottom:1px solid rgba(194,163,90,.14);margin-bottom:.2rem}
.entry{
display:grid;grid-template-columns:1fr 8rem 5rem;gap:1rem;align-items:baseline;
min-height:var(--rule);padding:.42rem 0;
border-bottom:1px solid rgba(194,163,90,.07);
}
.entry:hover{background:linear-gradient(90deg,rgba(53,30,40,.5),transparent)}
.entry .t{color:var(--ink);font-family:Cinzel,serif;font-size:.98rem}
.entry .m{color:var(--dust);font-size:.8rem;text-align:right}
.entry .n{color:var(--gold);font-size:.8rem;text-align:right;font-variant-numeric:tabular-nums}
.two{display:grid;grid-template-columns:1fr 300px;gap:3rem;padding:0 3.2rem 3rem}
.marginalia{border-left:1px solid rgba(194,163,90,.14);padding-left:1.4rem}
.marginalia p{font-size:.88rem;color:var(--dust)}
.plaque{display:inline-block;padding:.28rem .7rem;border:1px solid rgba(194,163,90,.3);
background:var(--panel-deep);color:var(--ink);font-family:Cinzel,serif;
font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.colophon{padding:1.4rem 3.2rem;border-top:1px solid rgba(194,163,90,.18);
display:flex;justify-content:space-between;color:var(--dust);font-size:.74rem;
letter-spacing:.08em;background:var(--panel-deep)}
.tag{color:#7a7168;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
text-align:center;margin:0 auto 1.2rem;max-width:1180px}
</style>
</head>
<body>
<div class="tag">Option A — the ledger is the frame · zero images</div>
<div class="book">
<div class="runninghead">
<span class="label">Shadows Over Westgate</span>
<nav><a href="#">The Court</a><a href="#">Entries</a><a href="#">Archive</a><a href="#">Petitions</a><a href="#">Enter</a></nav>
<span class="folio">fol. i</span>
</div>
<div class="frontispiece">
<div class="label">Being an account of the city and its debts</div>
<div class="fade-rule"></div>
<h1>Shadows Over Westgate</h1>
<div class="sub">A record kept against the dark</div>
<div class="fade-rule"></div>
<div class="seal"></div>
<p class="epigraph">Everyone in this city is compromised. The only question the ledger asks is by how much, and to whom.</p>
<div style="margin-top:1.6rem"><span class="plaque">Open the record</span></div>
</div>
<div class="leaf">
<div class="leaf-head"><h2 style="font-size:1.05rem;letter-spacing:.06em">Latest entries</h2><span class="folio">fol. ii — vii</span></div>
<div class="entry"><span class="t">The Ashgate Concession</span><span class="m">Ledgerkeeper</span><span class="n">41</span></div>
<div class="entry"><span class="t">On the matter of the second seal</span><span class="m">V. Marrow</span><span class="n">17</span></div>
<div class="entry"><span class="t">Debts owed to the Clockmakers' Guild</span><span class="m">Anonymous</span><span class="n">8</span></div>
<div class="entry"><span class="t">Petition: the widow at Candlewharf</span><span class="m">House Verrine</span><span class="n">63</span></div>
<div class="entry"><span class="t">Errata to the census of 1114</span><span class="m">Ledgerkeeper</span><span class="n">2</span></div>
</div>
<div class="two">
<div>
<h3 style="font-size:1rem;letter-spacing:.06em">From the archive</h3>
<div class="fade-rule" style="margin:.9rem 0 1.2rem;max-width:none"></div>
<p>The city keeps two books. One is public, ruled and countersigned, and it is a lie of omission. The other is this one.</p>
<p>Entries are made nightly. Corrections are made rarely, and never by the same hand twice.</p>
</div>
<aside class="marginalia">
<div class="label" style="font-size:.7rem">Standing</div>
<p style="margin-top:.8rem">The record is open. Fourteen hands are writing tonight.</p>
<div class="fade-rule" style="margin:1.2rem 0;max-width:none"></div>
<div class="label" style="font-size:.7rem">Seals in force</div>
<p style="margin-top:.8rem">Verrine · Marrow · the Guild</p>
</aside>
</div>
<div class="colophon"><span>Kept at Westgate</span><span>fol. vii of ccxi</span></div>
</div>
</body>
</html>