diff --git a/prototype/a-ledger.html b/prototype/a-ledger.html new file mode 100644 index 0000000..b99ea47 --- /dev/null +++ b/prototype/a-ledger.html @@ -0,0 +1,144 @@ + + + + +A — Ledger is the frame + + + + + + +
Option A — the ledger is the frame · zero images
+ +
+
+ Shadows Over Westgate + + fol. i +
+ +
+
Being an account of the city and its debts
+
+

Shadows Over Westgate

+
A record kept against the dark
+
+
+

Everyone in this city is compromised. The only question the ledger asks is by how much, and to whom.

+
Open the record
+
+ +
+

Latest entries

fol. ii — vii
+
The Ashgate ConcessionLedgerkeeper41
+
On the matter of the second sealV. Marrow17
+
Debts owed to the Clockmakers' GuildAnonymous8
+
Petition: the widow at CandlewharfHouse Verrine63
+
Errata to the census of 1114Ledgerkeeper2
+
+ +
+
+

From the archive

+
+

The city keeps two books. One is public, ruled and countersigned, and it is a lie of omission. The other is this one.

+

Entries are made nightly. Corrections are made rarely, and never by the same hand twice.

+
+ +
+ +
Kept at Westgatefol. vii of ccxi
+
+ + diff --git a/prototype/forum.html b/prototype/forum.html new file mode 100644 index 0000000..31c4a08 --- /dev/null +++ b/prototype/forum.html @@ -0,0 +1,91 @@ + + + + +Westgate — the archive + + + + + + + +
Indoors — app density (--fit: .35)
+
+ +
+ Shadows Over Westgate + +
+
+ +
The gates are open. Fourteen souls walk the city tonight.
+ +
The City·The Archive·Entries of the Court
+ +
+
+
+

Entries of the Court

+ New entry +
+ +
+
EntryHandRepliesLast
+
The Ashgate ConcessionLedgerkeeper412h
+
On the matter of the second sealV. Marrow175h
+
Debts owed to the Clockmakers' GuildAnonymous89h
+
Petition: the widow at CandlewharfHouse Verrine631d
+
Errata to the census of 1114Ledgerkeeper21d
+
Concerning the Foundry night shiftGrell292d
+
A list of names, unsignedAnonymous1042d
+
On lamp oil and its accountingSable63d
+
The harbour tithe, revisedHouse Verrine124d
+
Who kept the third keyV. Marrow386d
+
+ +
1 · 2 · 3 · 4 · 211
+
+ + +
+ + +
+ + diff --git a/prototype/index.html b/prototype/index.html new file mode 100644 index 0000000..c1124b6 --- /dev/null +++ b/prototype/index.html @@ -0,0 +1,105 @@ + + + + +Westgate — outdoors + + + + + + + +
Outdoors — showcase density (--fit: 1)
+
+ +
+ Shadows Over Westgate + +
+
+ +
The gates are open. Fourteen souls walk the city tonight.
+ +
+
+ + + + + + +
+
+
A gothic-fantasy roleplay city
+

The lamps are lit.
No one is innocent.

+

Renaissance stone, clockwork and lightning, and a court that has ruled from behind the shutters for four hundred years. You are already compromised. Decide what it bought you.

+
+ Enter the city + Read the archive +
+
+
+ +
+
Decadence

The Court

Houses, favours, and debts that outlive the people who signed them.

+
Decay

The Wards

Candlewharf, Ashgate, the Foundry. Gaslight where the money is, dark where it is not.

+
Machinery

The Guild

Clockwork, steam, and the new lightning — sold to anyone who can pay the interest.

+
+ +
+
+
Latest dispatches
+ All entries → +
+
+
+
The Ashgate ConcessionLedgerkeeper412h
+
On the matter of the second sealV. Marrow175h
+
Petition: the widow at CandlewharfHouse Verrine631d
+
+
+ + +
+ + diff --git a/prototype/shell.css b/prototype/shell.css new file mode 100644 index 0000000..555f1e4 --- /dev/null +++ b/prototype/shell.css @@ -0,0 +1,108 @@ +/* Throwaway prototype — Frame B shell, two metals, one shell / two densities. + Not for merge. Values here are candidates, not tokens. */ +: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; + /* second metal — structural only */ + --pewter:#8c8f97; --pewter-deep:#5a5d64; + --filament:#c8b08a; + /* the Threshold: one knob per density */ + --fit:1; /* ornament weight: 1 outdoors, 0.35 indoors */ + --page:1420px; + --rail:2rem; /* One Rail: the only horizontal edge on any page */ +} +*{box-sizing:border-box} +body{margin:0;background:var(--grave);color:var(--ash); + font:400 1rem/1.6 Jost,system-ui,sans-serif} +a{color:var(--gold)} +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)} +.label.dull{color:var(--pewter)} +.page{max-width:var(--page);margin:0 auto} +.fade-rule{height:1px;background:linear-gradient(90deg,transparent,var(--gilt),transparent)} + +/* ---- lintel: identical on every page ---- */ +.lintel{ + display:flex;align-items:center;gap:2rem;padding:.85rem var(--rail);position:relative; + background:linear-gradient(180deg,#1b1a1f,#111015); + border-top:1px solid rgba(140,143,151,calc(.28 * var(--fit) + .06)); + box-shadow:0 14px 30px rgba(0,0,0,.5); +} +/* the lintel's underside is a gilt rule that fades out, not a hard line */ +.lintel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; + background:linear-gradient(90deg,transparent,rgba(194,163,90,.32) 12%, + rgba(194,163,90,.32) 88%,transparent)} +.rivets{position:absolute;inset:auto 0 6px 0;display:flex;justify-content:space-between; + padding:0 1rem;opacity:var(--fit)} +.rivets i{width:4px;height:4px;border-radius:50%;background:var(--pewter-deep); + box-shadow:inset 0 1px 0 rgba(255,255,255,.25)} +.mark{font-family:Cinzel,serif;color:var(--gold);letter-spacing:.18em; + text-transform:uppercase;font-size:.86rem;text-decoration:none} +.lintel nav{display:flex;gap:1.6rem;margin-left:auto} +.lintel nav a{color:var(--ink-muted);text-decoration:none;font-family:Cinzel,serif; + font-size:.78rem;letter-spacing:.14em;text-transform:uppercase} +.lintel nav a:hover{color:var(--gold-lit)} +.lintel nav a[aria-current]{color:var(--gold);border-bottom:1px solid var(--gilt)} + +/* ---- status: a sentence, on every page ---- */ +.status{display:flex;align-items:center;gap:.8rem;padding:.9rem var(--rail); + background:var(--panel-deep);font-size:.88rem;color:var(--ink-muted); + position:relative} +.status::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; + background:linear-gradient(90deg,transparent,rgba(140,143,151,.24) 12%, + rgba(140,143,151,.24) 88%,transparent)} +.lamp{width:8px;height:8px;border-radius:50%;background:var(--filament); + box-shadow:0 0 10px 2px rgba(200,176,138,.5)} + +/* ---- foundation: identical on every page ---- */ +.foundation{padding:1.6rem var(--rail);background:#0a090c;position:relative; + display:flex;justify-content:space-between;color:var(--dust); + font-size:.74rem;letter-spacing:.1em} +.foundation::before{content:"";position:absolute;left:0;right:0;top:0;height:1px; + background:linear-gradient(90deg,transparent,rgba(194,163,90,.26) 12%, + rgba(194,163,90,.26) 88%,transparent)} + +/* ---- buttons ---- */ +.btn{display:inline-block;padding:.6rem 1.3rem;font-family:Cinzel,serif;font-size:.76rem; + letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--gilt); + color:var(--ink);background:linear-gradient(180deg,#2a2214,#1a1510);text-decoration:none} +.btn.dull{border-color:rgba(140,143,151,.4);color:var(--pewter); + background:linear-gradient(180deg,#232529,#16171b)} + +/* ---- gilded frame: a notched plate with corner marks, not a box ---- + Edges fade rather than stop; corners are cut, then re-marked in gilt. */ +/* No corner marks: an ornament inset from an edge agrees with nothing and + reads as misalignment. The plate is carried by material and fading rules. */ +.framed{position:relative} +/* a rule that fades at both ends — the default separator */ +.hair{height:1px;border:0;margin:0; + background:linear-gradient(90deg,transparent,rgba(194,163,90,.34) 18%, + rgba(194,163,90,.34) 82%,transparent)} +.hair.dull{background:linear-gradient(90deg,transparent,rgba(140,143,151,.3) 18%, + rgba(140,143,151,.3) 82%,transparent)} + +/* ---- ledger interior: the archive material ---- */ +.ledger{background:var(--panel); + box-shadow:inset 0 0 0 1px rgba(194,163,90,.10), + inset 0 1px 0 rgba(255,255,255,.022), + 0 8px 22px rgba(0,0,0,.28)} +.ledger .row{display:grid;grid-template-columns:1fr 8rem 4rem 5rem;gap:1rem; + align-items:baseline;min-height:1.78rem;padding:.5rem 1.2rem; + border-bottom:1px solid rgba(194,163,90,.07)} +.ledger .row:hover{background:linear-gradient(90deg,rgba(53,30,40,.55),transparent)} +.ledger .t{color:var(--ink);font-family:Cinzel,serif;font-size:.95rem;text-decoration:none} +.ledger .m,.ledger .n,.ledger .d{font-size:.8rem;text-align:right;color:var(--dust)} +.ledger .n{color:var(--gold);font-variant-numeric:tabular-nums} +/* header row uses pewter — it structures, it is not touchable */ +.ledger .head{background:var(--panel-deep);border-bottom:1px solid rgba(140,143,151,.2)} +.ledger .head span{font-family:Cinzel,serif;font-size:.7rem;letter-spacing:.14em; + text-transform:uppercase;color:var(--pewter)} + +.tag{color:#7a7168;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase; + text-align:center;padding:1rem 0 .4rem}