TehRiehlDealandClaude Opus 5
c4f1fd9f84
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>
44 lines
1.2 KiB
JSON
44 lines
1.2 KiB
JSON
{
|
|
"name": "teh-riehl-skill-tree-portfolio",
|
|
"private": true,
|
|
"version": "0.0.1",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite dev",
|
|
"build": "vite build",
|
|
"preview": "vite preview",
|
|
"prepare": "svelte-kit sync || echo ''",
|
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
"lint": "prettier --check . && eslint .",
|
|
"format": "prettier --write .",
|
|
"format:check": "prettier --check .",
|
|
"test": "vitest run",
|
|
"test:watch": "vitest",
|
|
"og:image": "./scripts/generate-og-image.sh"
|
|
},
|
|
"devDependencies": {
|
|
"@sveltejs/adapter-auto": "^7.0.0",
|
|
"@sveltejs/adapter-static": "^3.0.10",
|
|
"@sveltejs/eslint-config": "^10.0.1",
|
|
"@sveltejs/kit": "^2.49.1",
|
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
"eslint": "^10.4.1",
|
|
"eslint-plugin-svelte": "^3.19.0",
|
|
"globals": "^17.6.0",
|
|
"prettier": "^3.8.3",
|
|
"prettier-plugin-svelte": "^4.1.0",
|
|
"svelte": "^5.45.6",
|
|
"svelte-check": "^4.3.4",
|
|
"typescript": "^5.9.3",
|
|
"typescript-eslint": "^8.60.1",
|
|
"vite": "^7.2.6",
|
|
"vitest": "^4.1.8"
|
|
},
|
|
"dependencies": {
|
|
"@fontsource-variable/cinzel": "^5.3.0",
|
|
"gsap": "^3.14.2",
|
|
"pixi.js": "^8.15.0"
|
|
}
|
|
}
|