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

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>