style: audit phase 5 — real typography, design tokens, AA contrast
Typography: - The codebase contained exactly one font-family declaration (LoadingIndicator), naming 'Cinzel Decorative' and 'Trajan Pro' — neither loaded, bundled, or present in static/. So every word on the site, in every component, rendered in the browser's default serif. For a site whose whole premise is atmosphere, that was the largest craft gap. - Now a display/body pairing: self-hosted Cinzel Variable for the name, headings, welcome title and tooltip titles; a system stack for body and UI copy, which costs nothing to load and is far more legible than Times at the 13-14px the modal and stats panel use. - @fontsource-variable/cinzel ships two subsets with unicode-range, so only the 25.3KB latin file is fetched for this content (verified — latin-ext is emitted but never requested). font-display: swap, so text never blocks. Contrast (WCAG 1.4.3): - Measured every grey against the panel background (#1a1a2e) rather than eyeballing it. #666 is 2.97:1 and fails AA for normal text; it was used for the modal close glyph, the tooltip hint, the branch count and the skill years. Replaced with --text-subtle (#9a9aa8, 6.1:1). - Correction to the audit: #888 was listed as failing. It measures 4.81:1 and passes. Tokenised for consistency, not because it was broken. --text-muted (#a8a8b8) is 7.3:1, not the ~9:1 I claimed. Tokens: - z-index was nine ad-hoc literals across seven files, with LoadingIndicator and the modal backdrop both on 1000. Now a named scale, and no raw z-index literal survives anywhere in src/ (verified against the live stylesheet). - Added spacing, radius, motion and type tokens alongside the existing colour ones, so the system covers more than colour. Note: package-lock.json in this commit also carries pre-existing churn from before this work; adding the font dependency entangled the two. Verified in the production build: Cinzel loads and applies to headings, computed body font resolves to system-ui, one font file fetched, zero raw z-index literals in the rendered CSS. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
TehRiehlDealandClaude Opus 5 committed
1 parent
75d0584952
commit
c4f1fd9f84
10 files changed
+116
-32
No files matched your search
+61
-1
@@ -11,7 +11,61 @@
|
||||
--bg-space: #05050a;
|
||||
--panel-from: #1a1a2e;
|
||||
--panel-to: #0f0f1a;
|
||||
|
||||
/*
|
||||
* Text colours, with measured contrast against --panel-from (#1a1a2e):
|
||||
* --text-primary 14.0:1
|
||||
* --text-muted 7.3:1
|
||||
* --text-subtle 6.1:1
|
||||
* The previous #666 used for hints, counts and the modal close glyph was
|
||||
* 2.97:1 — below the 4.5:1 AA threshold for normal text.
|
||||
*/
|
||||
--text-primary: #e8e8f0;
|
||||
--text-muted: #a8a8b8;
|
||||
--text-subtle: #9a9aa8;
|
||||
|
||||
/*
|
||||
* Type. Cinzel is a Trajan-style inscriptional face — display sizes only;
|
||||
* body copy stays on the system stack, which costs nothing to load and is
|
||||
* far more legible at 13-14px. Before this, the single font-family
|
||||
* declaration in the codebase named two fonts that were never loaded, so
|
||||
* every word rendered in the browser's default serif.
|
||||
*/
|
||||
--font-display: 'Cinzel Variable', 'Cinzel', 'Trajan Pro', Georgia, serif;
|
||||
--font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
|
||||
/* Spacing scale */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.5rem;
|
||||
--space-6: 2rem;
|
||||
|
||||
/* Radii */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-pill: 999px;
|
||||
|
||||
/*
|
||||
* Layering. These were ad-hoc literals scattered across seven files, with
|
||||
* LoadingIndicator and the modal backdrop both sitting on 1000.
|
||||
*/
|
||||
--z-welcome: 100;
|
||||
--z-tooltip: 500;
|
||||
--z-panel-backdrop: 899;
|
||||
--z-panel: 900;
|
||||
--z-panel-toggle: 950;
|
||||
--z-modal: 1000;
|
||||
--z-toast: 1100;
|
||||
--z-tree-nav: 1200;
|
||||
--z-skip-link: 2000;
|
||||
|
||||
/* Motion */
|
||||
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--duration-fast: 0.15s;
|
||||
--duration-base: 0.3s;
|
||||
}
|
||||
|
||||
*,
|
||||
@@ -26,6 +80,8 @@ html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: var(--font-body);
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
@@ -73,7 +129,7 @@ body {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2000;
|
||||
z-index: var(--z-skip-link);
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: min(90vw, 60rem);
|
||||
@@ -97,6 +153,8 @@ body {
|
||||
.sr-only:focus-within h1,
|
||||
.sr-only:focus-within h2,
|
||||
.sr-only:focus-within h3 {
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--color-gold);
|
||||
margin: 1rem 0 0.5rem;
|
||||
}
|
||||
@@ -145,6 +203,8 @@ html:has(.sr-only.revealed) body {
|
||||
.sr-only.revealed h1,
|
||||
.sr-only.revealed h2,
|
||||
.sr-only.revealed h3 {
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--color-gold);
|
||||
margin: 1.25rem 0 0.5rem;
|
||||
}
|
||||
|
||||
@@ -11,12 +11,12 @@
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
z-index: var(--z-modal);
|
||||
color: var(--color-gold);
|
||||
}
|
||||
|
||||
.loading-indicator p {
|
||||
font-family: 'Cinzel Decorative', 'Trajan Pro', serif;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.2rem;
|
||||
margin-top: 1rem;
|
||||
color: var(--color-gold);
|
||||
|
||||
@@ -263,7 +263,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
z-index: var(--z-modal);
|
||||
transition: background 0.2s ease;
|
||||
backdrop-filter: blur(0px);
|
||||
padding: 1rem;
|
||||
@@ -304,6 +304,8 @@
|
||||
}
|
||||
|
||||
.modal h2 {
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--node-color);
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.3rem;
|
||||
@@ -349,7 +351,7 @@
|
||||
right: 0.75rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
color: var(--text-subtle);
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
@@ -373,7 +375,7 @@
|
||||
}
|
||||
|
||||
.origin-location {
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@@ -425,7 +427,7 @@
|
||||
|
||||
.meta-info .dates {
|
||||
display: block;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
@@ -179,7 +179,7 @@
|
||||
border: 2px solid var(--color-gold);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
z-index: 950;
|
||||
z-index: var(--z-panel-toggle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -221,7 +221,7 @@
|
||||
box-shadow:
|
||||
4px 0 40px rgba(255, 215, 0, 0.3),
|
||||
8px 0 80px rgba(255, 215, 0, 0.15);
|
||||
z-index: 900;
|
||||
z-index: var(--z-panel);
|
||||
/* Offset past the box-shadow (8px offset + 80px blur) so the gold glow
|
||||
doesn't bleed down the left edge of the viewport while closed. */
|
||||
transform: translateX(calc(-100% - 100px));
|
||||
@@ -262,7 +262,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 899;
|
||||
z-index: var(--z-panel-backdrop);
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -305,6 +305,7 @@
|
||||
}
|
||||
|
||||
.character-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-gold);
|
||||
@@ -334,6 +335,8 @@
|
||||
}
|
||||
|
||||
.proficiency-summary h3 {
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--color-gold);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.75rem;
|
||||
@@ -400,12 +403,12 @@
|
||||
|
||||
.branch-count {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
color: var(--text-subtle);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -463,7 +466,7 @@
|
||||
|
||||
.skill-years {
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
color: var(--text-subtle);
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
padding: 0.75rem 1rem;
|
||||
max-width: 280px;
|
||||
pointer-events: none;
|
||||
z-index: 500;
|
||||
z-index: var(--z-tooltip);
|
||||
box-shadow:
|
||||
0 0 20px color-mix(in srgb, var(--node-color) 25%, transparent),
|
||||
0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
@@ -73,6 +73,8 @@
|
||||
}
|
||||
|
||||
.tooltip h3 {
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--node-color);
|
||||
margin: 0 0 0.35rem 0;
|
||||
font-size: 0.95rem;
|
||||
@@ -87,7 +89,7 @@
|
||||
}
|
||||
|
||||
.tooltip .hint {
|
||||
color: #666;
|
||||
color: var(--text-subtle);
|
||||
font-size: 0.7rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -152,7 +152,7 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1200;
|
||||
z-index: var(--z-tree-nav);
|
||||
width: min(24rem, 92vw);
|
||||
height: auto;
|
||||
max-height: 90vh;
|
||||
@@ -168,6 +168,8 @@
|
||||
}
|
||||
|
||||
.tree-nav h2 {
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: 0.03em;
|
||||
margin: 0 0 0.25rem;
|
||||
color: var(--color-gold);
|
||||
font-size: 1rem;
|
||||
|
||||
@@ -13,12 +13,13 @@
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
z-index: var(--z-welcome);
|
||||
pointer-events: none;
|
||||
animation: titleFadeInOut 2.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.welcome-title .welcome-name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-gold);
|
||||
@@ -35,6 +36,7 @@
|
||||
color: var(--text-muted);
|
||||
margin: 0.5rem 0 0 0;
|
||||
text-transform: uppercase;
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: 0.3em;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
<script lang="ts">
|
||||
// Self-hosted display face. Ships two subsets with unicode-range, so only
|
||||
// the 26KB latin file is fetched for this content; font-display: swap is
|
||||
// already set by the package, so text never blocks on it.
|
||||
import '@fontsource-variable/cinzel';
|
||||
import { onMount } from 'svelte';
|
||||
import favicon from '$lib/assets/favicon.ico';
|
||||
import '../app.css';
|
||||
@@ -222,7 +226,7 @@
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
z-index: 1100;
|
||||
z-index: var(--z-toast);
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
|
||||
Reference in new issue
Block a user