The screen titles go upright, and Bungee ships subset
10 KB instead of 119 — the face carries only the characters this game sets, and the command to redo it is in PROJECT.md. The header strip's titles take it at 23px: a strip at the top of a screen is signage, not an announcement, so it stops leaning. Bangers keeps what it was always for — the primary button, the ceremonies, and everything the canvas shouts. The poster wall's rooms go back to acid beside it, with the scale carrying the hierarchy. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
313f6d82bf
commit
4c0ede33db
4 files changed
+37
-7
No files matched your search
+24
@@ -595,6 +595,30 @@ can add the class, and Oliver kept seeing `LEVEL 1 · LEAGUE 1` snap to the real
|
|||||||
is in the HTML now and main.js only ever takes it off. The keyboard-hint strip hides with it
|
is in the HTML now and main.js only ever takes it off. The keyboard-hint strip hides with it
|
||||||
(`body:has(#splash.busy) #hint`), so the loading screen really is court, title and bar.
|
(`body:has(#splash.busy) #hint`), so the loading screen really is court, title and bar.
|
||||||
|
|
||||||
|
**A THIRD FACE, AND THE TITLES GO UPRIGHT** (2026-08-31). Bangers has no upright cut — the slant
|
||||||
|
is drawn into the glyphs, which is why the chevrons have always been Silkscreen — so a heading
|
||||||
|
that wanted to shout without leaning had nowhere to go. **Bungee** (SIL OFL, licence beside it in
|
||||||
|
`assets/fonts/`) is bundled as the third voice: arcade signage, upper case by design, in-world
|
||||||
|
where a system sans read as borrowed chrome. The registers are now:
|
||||||
|
- **Bangers** ANNOUNCES — the primary button, PROMOTED., NEW PERSONAL BEST, and everything the
|
||||||
|
canvas shouts (SET, CHAPTER, EPIC!).
|
||||||
|
- **Silkscreen** is the HUD — numbers, labels, captions, anything read at leisure.
|
||||||
|
- **Bungee** NAMES THE ROOM — the header strip's screen titles (23px) and the poster wall's
|
||||||
|
section headings (15px). You are not being shouted at there, you are being told where you are.
|
||||||
|
|
||||||
|
It ships SUBSET to the characters the game actually sets — 10 KB instead of 119. To redo it after
|
||||||
|
a copy change that needs a new glyph:
|
||||||
|
|
||||||
|
uv run --with fonttools pyftsubset assets/fonts/Bungee-Regular.ttf \
|
||||||
|
--unicodes="U+0020-007E,U+00A0,U+00B7,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2026,U+2605,U+00D7" \
|
||||||
|
--layout-features="" --no-hinting --desubroutinize \
|
||||||
|
--output-file=assets/fonts/Bungee-Subset.ttf
|
||||||
|
|
||||||
|
(the full TTF is not in the repo — fetch it from google/fonts ofl/bungee first). Two CSS traps
|
||||||
|
this cost us: `#intro h2` carries an id, so the header rule needs one too or the announcement face
|
||||||
|
wins; and the poster wall's captions live INSIDE `.mgroup` now, so a bare `.mgroup b` restyles
|
||||||
|
every poster on the screen — scope to `> header`.
|
||||||
|
|
||||||
**THE MENU DEALS ITSELF IN.** The canvas modals have always arrived on an easeOutBack overshoot;
|
**THE MENU DEALS ITSELF IN.** The canvas modals have always arrived on an easeOutBack overshoot;
|
||||||
every menu screen does the same now — on EVERY arrival, not just the boot (Oliver, twice: "immer
|
every menu screen does the same now — on EVERY arrival, not just the boot (Oliver, twice: "immer
|
||||||
reinfliegen" and "auch für die untermenüs"). `@keyframes dealIn` flies an element in from the left
|
reinfliegen" and "auch für die untermenüs"). `@keyframes dealIn` flies an element in from the left
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
+13
-7
@@ -49,9 +49,11 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
|
|||||||
/* ...and the UPRIGHT display face (2026-08-31). Bangers is drawn slanted — there is no upright
|
/* ...and the UPRIGHT display face (2026-08-31). Bangers is drawn slanted — there is no upright
|
||||||
cut of it, which is also why the chevrons are Silkscreen — so the shelf labels that wanted to
|
cut of it, which is also why the chevrons are Silkscreen — so the shelf labels that wanted to
|
||||||
shout without leaning needed a third voice. Bungee is an arcade/signage face, upper case by
|
shout without leaning needed a third voice. Bungee is an arcade/signage face, upper case by
|
||||||
design, and it stays in-world where a system sans did not. SIL OFL, licence beside it. */
|
design, and it stays in-world where a system sans did not. SIL OFL, licence beside it.
|
||||||
|
SUBSET to the characters this game actually sets (ASCII plus the few marks the copy uses):
|
||||||
|
10 KB instead of 119 — pyftsubset, and the command is in PROJECT.md if it ever needs redoing. */
|
||||||
@font-face { font-family: 'Bungee'; font-weight: 400; font-display: block;
|
@font-face { font-family: 'Bungee'; font-weight: 400; font-display: block;
|
||||||
src: url('assets/fonts/Bungee-Regular.ttf?v=86') format('truetype'); }
|
src: url('assets/fonts/Bungee-Subset.ttf?v=86') format('truetype'); }
|
||||||
/* html needs a real HEIGHT: the root element's background paints the viewport, but a GRADIENT is
|
/* html needs a real HEIGHT: the root element's background paints the viewport, but a GRADIENT is
|
||||||
laid out in the root's own box — and with the canvas position:fixed the root has no content and
|
laid out in the root's own box — and with the canvas position:fixed the root has no content and
|
||||||
collapses, so the gradient render.js sets had nowhere to go. */
|
collapses, so the gradient render.js sets had nowhere to go. */
|
||||||
@@ -231,10 +233,14 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
|
|||||||
/* the overlay is HIDDEN during play, not removed: a restart puts it straight back, and the
|
/* the overlay is HIDDEN during play, not removed: a restart puts it straight back, and the
|
||||||
display:grid above would otherwise win over the hidden attribute */
|
display:grid above would otherwise win over the hidden attribute */
|
||||||
#intro[hidden] { display: none; }
|
#intro[hidden] { display: none; }
|
||||||
/* Screen titles and the primary button are BANGERS — the same announcement face the canvas uses
|
/* THREE REGISTERS NOW (2026-08-31). Bangers still ANNOUNCES — the primary button, PROMOTED.,
|
||||||
for SET and CHAPTER. A screen title is a thing that shouts. Everything that is a NUMBER or a
|
NEW PERSONAL BEST, and everything the canvas shouts (SET, CHAPTER, EPIC!). Silkscreen is
|
||||||
label stays Silkscreen, so the two registers keep meaning what they have always meant. */
|
still the HUD: numbers, labels, anything you read at leisure. And the SCREEN TITLES moved to
|
||||||
|
Bungee: upright signage, which is what the strip at the top of a screen actually is — you are
|
||||||
|
not being shouted at, you are being told which room you are in. */
|
||||||
#intro h2 { margin: 0; font: 400 26px Bangers, cursive; color: var(--acid); letter-spacing: 1.5px; }
|
#intro h2 { margin: 0; font: 400 26px Bangers, cursive; color: var(--acid); letter-spacing: 1.5px; }
|
||||||
|
/* #intro h2 above carries an id, so this needs one too or the announcement face wins */
|
||||||
|
#intro .hdr h2 { font: 400 23px/1.2 Bungee, Bangers, cursive; letter-spacing: 0.5px; }
|
||||||
#intro h3 { display: flex; justify-content: space-between; margin: 20px 0 9px;
|
#intro h3 { display: flex; justify-content: space-between; margin: 20px 0 9px;
|
||||||
font: 400 10px Silkscreen, monospace; color: var(--dim); letter-spacing: 2px;
|
font: 400 10px Silkscreen, monospace; color: var(--dim); letter-spacing: 2px;
|
||||||
text-align: left; }
|
text-align: left; }
|
||||||
@@ -243,7 +249,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
|
|||||||
padding: 10px 12px; margin: 0 -14px; border-bottom: 2px solid var(--line);
|
padding: 10px 12px; margin: 0 -14px; border-bottom: 2px solid var(--line);
|
||||||
background: var(--solid);
|
background: var(--solid);
|
||||||
padding-top: max(10px, env(safe-area-inset-top)); }
|
padding-top: max(10px, env(safe-area-inset-top)); }
|
||||||
.hdr h2 { padding-left: 2px; }
|
.hdr h2 { padding-left: 2px; } /* (its face is set with the other titles above) */
|
||||||
/* UPRIGHT, not Bangers: the announcement face is drawn slanted, and a slanted arrow read as
|
/* UPRIGHT, not Bangers: the announcement face is drawn slanted, and a slanted arrow read as
|
||||||
italic on every screen. Silkscreen's ASCII < > are straight pixel arrows. */
|
italic on every screen. Silkscreen's ASCII < > are straight pixel arrows. */
|
||||||
.chev { width: 34px; height: 34px; flex: none; background: none; border: 2px solid var(--line);
|
.chev { width: 34px; height: 34px; flex: none; background: none; border: 2px solid var(--line);
|
||||||
@@ -518,7 +524,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
|
|||||||
/* SCOPED TO THE HEADER, not to the section: the posters live INSIDE .mgroup now, so a bare
|
/* SCOPED TO THE HEADER, not to the section: the posters live INSIDE .mgroup now, so a bare
|
||||||
descendant selector here restyled every caption on the wall (it stayed invisible while this
|
descendant selector here restyled every caption on the wall (it stayed invisible while this
|
||||||
rule still named Silkscreen — the moment the family changed, the posters changed with it). */
|
rule still named Silkscreen — the moment the family changed, the posters changed with it). */
|
||||||
#modeList .mgroup > header b { display: block; letter-spacing: 0.5px; color: var(--cream);
|
#modeList .mgroup > header b { display: block; letter-spacing: 0.5px; color: var(--acid);
|
||||||
text-shadow: none; font: 400 15px/1.3 Bungee, Bangers, cursive; }
|
text-shadow: none; font: 400 15px/1.3 Bungee, Bangers, cursive; }
|
||||||
/* ...and the strap goes back to the quiet register under it: a shouted line over a system-sans
|
/* ...and the strap goes back to the quiet register under it: a shouted line over a system-sans
|
||||||
line was two foreign voices in one header */
|
line was two foreign voices in one header */
|
||||||
|
|||||||
Reference in new issue
Block a user