Refine slab mark proportions; stack header+banner instead of magic top offset
This commit is contained in:
Barely Removable
parent
527558bef2
commit
3c98373ad6
3 changed files with 28 additions and 12 deletions
|
|
@ -2,8 +2,8 @@
|
||||||
<!-- Matches the in-app brand mark: a graded slab — case, label, and the
|
<!-- 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. -->
|
card sealed inside. Kept in step with .brand-mark in style.css. -->
|
||||||
<rect width="128" height="128" rx="26" fill="#0e1522"/>
|
<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"/>
|
stroke="#4d9bff" stroke-width="5"/>
|
||||||
<rect x="48" y="31" width="32" height="9" rx="3.5" fill="#3ddcc0"/>
|
<rect x="50" y="30" width="28" height="8" rx="3" fill="#3ddcc0"/>
|
||||||
<rect x="48" y="49" width="32" height="45" rx="4.5" fill="#4d9bff" opacity="0.34"/>
|
<rect x="50" y="49" width="28" height="46" rx="3.5" fill="#4d9bff" opacity="0.48"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 548 B After Width: | Height: | Size: 548 B |
|
|
@ -22,6 +22,10 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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">
|
<header class="topbar">
|
||||||
<div class="topbar-inner">
|
<div class="topbar-inner">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
|
|
@ -29,10 +33,14 @@
|
||||||
This is the literal object the whole app estimates, so it says
|
This is the literal object the whole app estimates, so it says
|
||||||
what this is without belonging to any one card game — which a
|
what this is without belonging to any one card game — which a
|
||||||
checkmark (or any single game's iconography) doesn't. -->
|
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">
|
<!-- Proportioned to a real slab (18:28 ≈ 0.64, against PSA's ~0.62)
|
||||||
<rect class="mark-case" x="1.15" y="1.15" width="21.7" height="27.7" rx="3.4" stroke-width="1.7"/>
|
with restrained corners. Squarer, rounder earlier drafts read as
|
||||||
<rect class="mark-label" x="5.2" y="5.3" width="13.6" height="3.3" rx="1.3"/>
|
a phone icon at topbar size, which is the failure mode for any
|
||||||
<rect class="mark-card" x="5.2" y="11.9" width="13.6" height="12.9" rx="1.6"/>
|
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>
|
</svg>
|
||||||
<h1>Card Grader</h1>
|
<h1>Card Grader</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -44,6 +52,7 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div id="banner" class="banner" hidden></div>
|
<div id="banner" class="banner" hidden></div>
|
||||||
|
</div><!-- /.chrome -->
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -88,8 +88,13 @@ main {
|
||||||
|
|
||||||
/* ------------------------------------------------------------- topbar */
|
/* ------------------------------------------------------------- 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 {
|
.topbar {
|
||||||
position: sticky; top: 0; z-index: 20;
|
position: relative; /* containing block for the holo edge below */
|
||||||
background: rgba(8, 12, 20, .82);
|
background: rgba(8, 12, 20, .82);
|
||||||
-webkit-backdrop-filter: blur(14px) saturate(1.4);
|
-webkit-backdrop-filter: blur(14px) saturate(1.4);
|
||||||
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-
|
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
|
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. */
|
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-case { stroke: var(--accent); }
|
||||||
.brand-mark .mark-label { fill: var(--accent-2); }
|
.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; }
|
.topbar-actions { display: flex; gap: 9px; flex-wrap: wrap; }
|
||||||
|
|
||||||
|
|
@ -394,7 +402,6 @@ textarea { resize: vertical; min-height: 64px; }
|
||||||
/* -------------------------------------------------------------- banner */
|
/* -------------------------------------------------------------- banner */
|
||||||
|
|
||||||
.banner {
|
.banner {
|
||||||
position: sticky; top: 60px; z-index: 15;
|
|
||||||
padding: 12px 24px; font-size: 13.5px;
|
padding: 12px 24px; font-size: 13.5px;
|
||||||
background: color-mix(in srgb, var(--accent) 22%, var(--ground));
|
background: color-mix(in srgb, var(--accent) 22%, var(--ground));
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
|
|
@ -492,7 +499,7 @@ textarea { resize: vertical; min-height: 64px; }
|
||||||
.grid td { padding: 11px 8px; }
|
.grid td { padding: 11px 8px; }
|
||||||
.grid th { padding: 9px 8px; }
|
.grid th { padding: 9px 8px; }
|
||||||
.cardcell img, .cardcell .thumb-blank { width: 40px; height: 56px; }
|
.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 slab stays horizontal — stacking it would bury the number, which is
|
||||||
the one thing someone opens this app to see. Just tighter. */
|
the one thing someone opens this app to see. Just tighter. */
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue