From 6ea06ee42b63ee26eb9f5a3a33827c2d3f163d1b Mon Sep 17 00:00:00 2001 From: Oliver Rieger Date: Sat, 29 Aug 2026 15:57:10 +0200 Subject: [PATCH] =?UTF-8?q?The=20way-up=20ribbon=20hangs=20over=20the=20bo?= =?UTF-8?q?rder=20=E2=80=94=20sized=20to=20stay=20out=20of=20the=20neighbo?= =?UTF-8?q?uring=20poster?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5 --- PROJECT.md | 9 +++++---- index.html | 18 +++++++++--------- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/PROJECT.md b/PROJECT.md index 355c2a6..398f58c 100644 --- a/PROJECT.md +++ b/PROJECT.md @@ -500,10 +500,11 @@ Oliver's retest ("schon viel besser") with five polish items, all built: straight ASCII `<`/`>` instead — the announcement face keeps its job, arrows stop leaning. - **The plaque wears rounded corners (8px) and real padding** (12/14 against 8/10). - **THE WAY-UP RIBBON**: the tag became a banderole — red field, thick white Silkscreen with a - light shadow, rotated -45° over the poster's top-left corner, ends clipped by the poster's own - `overflow: hidden` (that clip is what sells the wrap). And it shows on BOTH picker levels: the - top-level ZOMBIE TENNIS poster carries it too (`tag` on the MENU row), so the click path to the - promotion is marked from the first screen. + light shadow, rotated -45° over the poster's top-left corner, and (Oliver's follow-up) hanging + PAST the border on both sides rather than being clipped inside it — sized so the overhang stays + out of the neighbouring poster (120px band; the first cut at 148px lay across the poster above). + It shows on BOTH picker levels: the top-level ZOMBIE TENNIS poster carries it too (`tag` on the + MENU row), so the click path to the promotion is marked from the first screen. - **Poster captions grew**: titles 12 → 15 bold, sub lines 9 → 10 and a brighter grey — "viel Text in sehr kleiner Schrift" was true of every banner. - **The card performs its entrance**: earned badges and the current crest BREATHE a subtle gold diff --git a/index.html b/index.html index 2acacb1..e9a29e1 100644 --- a/index.html +++ b/index.html @@ -330,15 +330,16 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat #cdCareer { display: flex; align-items: center; gap: 8px; } #cdCareer u { font: 700 8px Silkscreen, monospace; color: var(--dim); text-decoration: none; letter-spacing: 1px; } - /* the WAY-UP RIBBON: the standing answer to "how do I advance", worn as a banderole wrapped - over the poster's corner (Oliver: bigger, red, thick white type, light shadow). The poster - clips its ends diagonally (overflow hidden + the -45deg rotation), which is what sells the - wrap. */ - .way { position: absolute; top: 20px; left: -42px; width: 150px; transform: rotate(-45deg); + /* the WAY-UP RIBBON: the standing answer to "how do I advance", worn as a banderole laid OVER + the poster's corner — deliberately hanging past the border on both sides (Oliver), so it + reads as wrapped around the button rather than printed on it. z-index above the border, + no clipping anywhere on the path. */ + .way { position: absolute; top: 22px; left: -30px; width: 120px; transform: rotate(-45deg); + z-index: 2; padding: 6px 0; font: 700 11px Silkscreen, monospace; font-style: normal; text-align: center; color: #fff; background: var(--red); border-top: 1px solid rgba(255,255,255,0.35); border-bottom: 1px solid #69201c; - text-shadow: 1px 1px 0 rgba(0,0,0,0.55); box-shadow: 0 2px 6px rgba(0,0,0,0.4); + text-shadow: 1px 1px 0 rgba(0,0,0,0.55); box-shadow: 0 2px 6px rgba(0,0,0,0.45); letter-spacing: 1px; text-decoration: none; } #plRow s i, #cdBar s i, #cdCareer s i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #3f9560, var(--acid) 55%, #e8b23a); @@ -408,8 +409,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat a live answer to the header's question; tapping answers and advances. The only memory shown is the LAST tag — an indicator, not a selection. A border that means "SERVE UP will use this" exists solely on the final screen, where a confirm button actually follows. */ - #modeList button.mode, #modeSub button.mode { overflow: hidden; /* clips the WAY-UP ribbon's ends */ - display: flex; align-items: flex-end; width: 100%; min-height: 96px; + #modeList button.mode, #modeSub button.mode { display: flex; align-items: flex-end; width: 100%; min-height: 96px; margin: 0 0 8px; padding: 7px 9px; background-size: cover; background-position: center bottom; image-rendering: pixelated; border: 2px solid var(--line); color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; @@ -846,6 +846,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat - +