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