ninja_hippo/card-grader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refine slab mark proportions; stack header+banner instead of magic top offset

Browse source
This commit is contained in:
Barely Removable 2026-08-22 12:26:11 -07:00
parent 527558bef2
commit 3c98373ad6
3 changed files with 28 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

6
static/icon.svg
View file

@ -2,8 +2,8 @@
<!-- Matches the in-app brand mark: a graded slab — case, label, and the
card sealed inside. Kept in step with .brand-mark in style.css. -->
<rect width="128" height="128" rx="26" fill="#0e1522"/>
<rect x="38.5" y="20.5" width="51" height="87" rx="9" fill="none"
<rect x="41.5" y="18.5" width="45" height="91" rx="7.5" fill="none"
stroke="#4d9bff" stroke-width="5"/>
<rect x="48" y="31" width="32" height="9" rx="3.5" fill="#3ddcc0"/>
<rect x="48" y="49" width="32" height="45" rx="4.5" fill="#4d9bff" opacity="0.34"/>
<rect x="50" y="30" width="28" height="8" rx="3" fill="#3ddcc0"/>
<rect x="50" y="49" width="28" height="46" rx="3.5" fill="#4d9bff" opacity="0.48"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 548 B

After

Width:  |  Height:  |  Size: 548 B

Before After
Before After

17
static/index.html
View file

@ -22,6 +22,10 @@
</head>
<body>
<!-- Header and banner stick as one unit, so the banner sits under the header
by stacking rather than by a hardcoded top offset — that offset silently
went stale (and overlapped) the moment the header's height changed. -->
<div class="chrome">
<header class="topbar">
<div class="topbar-inner">
<div class="brand">
@ -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. -->
<svg class="brand-mark" viewBox="0 0 24 30" fill="none" aria-hidden="true" focusable="false">
<rect class="mark-case" x="1.15" y="1.15" width="21.7" height="27.7" rx="3.4" stroke-width="1.7"/>
<rect class="mark-label" x="5.2" y="5.3" width="13.6" height="3.3" rx="1.3"/>
<rect class="mark-card" x="5.2" y="11.9" width="13.6" height="12.9" rx="1.6"/>
<!-- Proportioned to a real slab (18:28 ≈ 0.64, against PSA's ~0.62)
with restrained corners. Squarer, rounder earlier drafts read as
a phone icon at topbar size, which is the failure mode for any
small rounded rectangle. -->
<svg class="brand-mark" viewBox="0 0 20 30" fill="none" aria-hidden="true" focusable="false">
<rect class="mark-case" x="1" y="1" width="18" height="28" rx="2.6" stroke-width="1.6"/>
<rect class="mark-label" x="4.2" y="4.6" width="11.6" height="3" rx="1.2"/>
<rect class="mark-card" x="4.2" y="10.6" width="11.6" height="14.2" rx="1.4"/>
</svg>
<h1>Card Grader</h1>
</div>
@ -44,6 +52,7 @@
</header>
<div id="banner" class="banner" hidden></div>
</div><!-- /.chrome -->
<main>

17
static/style.css
View file

@ -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. */