Switch the site to the light "Papier & Gold" palette
Requested: make the site lighter, the way the colours were originally. Taken from the house palette "Papier & Gold" (warm off-white, gold as the only accent): papier #FCFAF6, papier-2 #F4EFE4, card #FFFDF8, ink #1C1813, quiet #6B6154. Gold needs more than one hex value. The old dark theme used a single light gold for both text and fills, which works on a dark ground but breaks on paper: #C9A461 as text scores 2.25:1. So primary and accent are now the dark gold #7A5D1F, which carries fill *and* type (5.90:1 on paper, and takes cream text on top), with #FFFDF8 as its contrast. googleBlue became Google's actual link blue so the search mock stays readable on a light ground. Fonts untouched. Fixed a pre-existing bug this exposed: ".nav-links a" also matched the header CTA and overrode .btn-primary's colour, so the button rendered muted text on the primary fill - 1.01:1, effectively invisible. It just never showed on the dark theme, where both tones were light. Narrowed to ".nav-links ul a", matching the :hover rule right below it. Rebuilt the logo as a transparent PNG: logo.jpg had the old dark background baked in and sat on the page as a black box, with its "WEBDESIGN" label in light grey that disappears on paper. The pill is preserved pixel for pixel (row-wise fill so the dark lettering inside stays opaque, then eroded 1px to drop the old anti-aliasing halo); the label is recoloured to ink. logo.jpg is kept. Verified in the browser across all three pages: 228 rendered text elements measured, 0 WCAG AA failures, tightest pair 5.82 - which is exactly the documented figure for "quiet on paper". No horizontal scroll, no console errors. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
parent
a105bee995
commit
f8763ed6f5
4 changed files with 51 additions and 51 deletions
|
|
@ -3,7 +3,7 @@
|
||||||
"description": "Larpaso entwickelt individuelle Websites für Kunden – mit KI-gestützter Entwicklung als Schwerpunkt."
|
"description": "Larpaso entwickelt individuelle Websites für Kunden – mit KI-gestützter Entwicklung als Schwerpunkt."
|
||||||
},
|
},
|
||||||
"nav": {
|
"nav": {
|
||||||
"logo": "/logo.jpg",
|
"logo": "/logo.png",
|
||||||
"logoAlt": "larpaso Webdesign",
|
"logoAlt": "larpaso Webdesign",
|
||||||
"links": [
|
"links": [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -14,99 +14,99 @@
|
||||||
},
|
},
|
||||||
"colors": {
|
"colors": {
|
||||||
"bg": {
|
"bg": {
|
||||||
"r": 23,
|
"r": 252,
|
||||||
"g": 19,
|
"g": 250,
|
||||||
"b": 15,
|
"b": 246,
|
||||||
"a": 1
|
"a": 1
|
||||||
},
|
},
|
||||||
"bgAlt": {
|
"bgAlt": {
|
||||||
"r": 28,
|
"r": 244,
|
||||||
"g": 23,
|
"g": 239,
|
||||||
"b": 18,
|
"b": 228,
|
||||||
"a": 1
|
"a": 1
|
||||||
},
|
},
|
||||||
"surface": {
|
"surface": {
|
||||||
"r": 33,
|
"r": 255,
|
||||||
"g": 27,
|
"g": 253,
|
||||||
"b": 21,
|
"b": 248,
|
||||||
"a": 1
|
"a": 1
|
||||||
},
|
},
|
||||||
"text": {
|
"text": {
|
||||||
"r": 242,
|
"r": 28,
|
||||||
"g": 234,
|
"g": 24,
|
||||||
"b": 217,
|
"b": 19,
|
||||||
"a": 1
|
"a": 1
|
||||||
},
|
},
|
||||||
"textMuted": {
|
"textMuted": {
|
||||||
"r": 168,
|
"r": 107,
|
||||||
"g": 154,
|
"g": 97,
|
||||||
"b": 133,
|
"b": 84,
|
||||||
"a": 1
|
"a": 1
|
||||||
},
|
},
|
||||||
"border": {
|
"border": {
|
||||||
"r": 201,
|
"r": 220,
|
||||||
"g": 168,
|
"g": 207,
|
||||||
"b": 118,
|
"b": 182,
|
||||||
"a": 0.2
|
"a": 1
|
||||||
},
|
},
|
||||||
"primary": {
|
"primary": {
|
||||||
"r": 201,
|
"r": 122,
|
||||||
"g": 168,
|
"g": 93,
|
||||||
"b": 118,
|
"b": 31,
|
||||||
"a": 1
|
"a": 1
|
||||||
},
|
},
|
||||||
"primaryDark": {
|
"primaryDark": {
|
||||||
"r": 176,
|
"r": 94,
|
||||||
"g": 143,
|
"g": 71,
|
||||||
"b": 92,
|
"b": 22,
|
||||||
"a": 1
|
"a": 1
|
||||||
},
|
},
|
||||||
"primaryContrast": {
|
"primaryContrast": {
|
||||||
"r": 26,
|
"r": 255,
|
||||||
"g": 21,
|
"g": 253,
|
||||||
"b": 17,
|
"b": 248,
|
||||||
"a": 1
|
"a": 1
|
||||||
},
|
},
|
||||||
"accent": {
|
"accent": {
|
||||||
"r": 201,
|
"r": 122,
|
||||||
"g": 168,
|
"g": 93,
|
||||||
"b": 118,
|
"b": 31,
|
||||||
"a": 1
|
"a": 1
|
||||||
},
|
},
|
||||||
"accentDark": {
|
"accentDark": {
|
||||||
"r": 176,
|
"r": 94,
|
||||||
"g": 143,
|
"g": 71,
|
||||||
"b": 92,
|
"b": 22,
|
||||||
"a": 1
|
"a": 1
|
||||||
},
|
},
|
||||||
"success": {
|
"success": {
|
||||||
"r": 122,
|
"r": 79,
|
||||||
"g": 154,
|
"g": 107,
|
||||||
"b": 107,
|
"b": 66,
|
||||||
"a": 1
|
"a": 1
|
||||||
},
|
},
|
||||||
"danger": {
|
"danger": {
|
||||||
"r": 201,
|
"r": 138,
|
||||||
"g": 123,
|
"g": 59,
|
||||||
"b": 100,
|
"b": 34,
|
||||||
"a": 1
|
"a": 1
|
||||||
},
|
},
|
||||||
"flag": {
|
"flag": {
|
||||||
"r": 201,
|
"r": 138,
|
||||||
"g": 123,
|
"g": 59,
|
||||||
"b": 100,
|
"b": 34,
|
||||||
"a": 1
|
"a": 1
|
||||||
},
|
},
|
||||||
"flagBg": {
|
"flagBg": {
|
||||||
"r": 201,
|
"r": 138,
|
||||||
"g": 123,
|
"g": 59,
|
||||||
"b": 100,
|
"b": 34,
|
||||||
"a": 0.1
|
"a": 0.1
|
||||||
},
|
},
|
||||||
"googleBlue": {
|
"googleBlue": {
|
||||||
"r": 143,
|
"r": 26,
|
||||||
"g": 178,
|
"g": 13,
|
||||||
"b": 232,
|
"b": 171,
|
||||||
"a": 1
|
"a": 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
|
|
@ -77,7 +77,7 @@ const nav = site.nav;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links a {
|
.nav-links ul a {
|
||||||
color: var(--color-text-muted);
|
color: var(--color-text-muted);
|
||||||
font-weight: var(--font-weight-medium);
|
font-weight: var(--font-weight-medium);
|
||||||
font-size: var(--font-size-sm);
|
font-size: var(--font-size-sm);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue