From 3c98373ad6a89128d51ad00f2d247070f670e340 Mon Sep 17 00:00:00 2001 From: Barely Removable Date: Sat, 22 Aug 2026 12:26:11 -0700 Subject: [PATCH] Refine slab mark proportions; stack header+banner instead of magic top offset --- static/icon.svg | 6 +++--- static/index.html | 17 +++++++++++++---- static/style.css | 17 ++++++++++++----- 3 files changed, 28 insertions(+), 12 deletions(-) diff --git a/static/icon.svg b/static/icon.svg index 349bcc7..bb5ae46 100644 --- a/static/icon.svg +++ b/static/icon.svg @@ -2,8 +2,8 @@ - - - + + diff --git a/static/index.html b/static/index.html index c5c3a2c..aa253d9 100644 --- a/static/index.html +++ b/static/index.html @@ -22,6 +22,10 @@ + +
@@ -29,10 +33,14 @@ This is the literal object the whole app estimates, so it says what this is without belonging to any one card game — which a checkmark (or any single game's iconography) doesn't. --> -

Card Grader

@@ -44,6 +52,7 @@
+
diff --git a/static/style.css b/static/style.css index fb71059..934366c 100644 --- a/static/style.css +++ b/static/style.css @@ -88,8 +88,13 @@ main { /* ------------------------------------------------------------- topbar */ +/* The sticky unit is the header + banner together (see index.html) — the + banner used to sticky itself to a hardcoded top offset matching the + header's height, which broke the moment the header grew. */ +.chrome { position: sticky; top: 0; z-index: 20; } + .topbar { - position: sticky; top: 0; z-index: 20; + position: relative; /* containing block for the holo edge below */ background: rgba(8, 12, 20, .82); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); @@ -136,10 +141,13 @@ main { Drawn as flat two-tone geometry rather than the gradient-blob-with-a- checkmark it replaced: that read as a generic app badge and said nothing about grading. Thin strokes and no glow keep it legible at 22px. */ -.brand-mark { flex: none; width: 21px; height: 26px; display: block; } +.brand-mark { flex: none; width: 18px; height: 27px; display: block; } .brand-mark .mark-case { stroke: var(--accent); } .brand-mark .mark-label { fill: var(--accent-2); } -.brand-mark .mark-card { fill: var(--accent); opacity: .34; } +/* .48, not the .34 this started at — below roughly .45 the card window + stops separating from the case interior at topbar size and the mark + collapses into an empty outline. Checked by rendering it at 42px. */ +.brand-mark .mark-card { fill: var(--accent); opacity: .48; } .topbar-actions { display: flex; gap: 9px; flex-wrap: wrap; } @@ -394,7 +402,6 @@ textarea { resize: vertical; min-height: 64px; } /* -------------------------------------------------------------- banner */ .banner { - position: sticky; top: 60px; z-index: 15; padding: 12px 24px; font-size: 13.5px; background: color-mix(in srgb, var(--accent) 22%, var(--ground)); color: var(--ink); @@ -492,7 +499,7 @@ textarea { resize: vertical; min-height: 64px; } .grid td { padding: 11px 8px; } .grid th { padding: 9px 8px; } .cardcell img, .cardcell .thumb-blank { width: 40px; height: 56px; } - .banner { top: 54px; padding: 11px 14px; } + .banner { padding: 11px 14px; } /* The slab stays horizontal — stacking it would bury the number, which is the one thing someone opens this app to see. Just tighter. */