padreug/chateaudufaune.ariege.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(layout): mute tiled page background with a dark wash

Browse source 
The celtic-knot gutters read too loud at full strength. Layer a flat
dark-green wash (--bg-overlay token) over the tile in the body
background so the knotwork recedes to a quiet texture behind the panel.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-06-14 16:47:07 +02:00
commit fa1ba0f299
1 changed files with 14 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/style.css
View file

@ -27,6 +27,10 @@
--ring: hsl(43 64% 50%);
/* Near-black green of the content panel that floats on the tiled bg. */
--panel: hsl(151 55% 4%);
/* Flat wash layered over the tiled page background to mute it. Dark green
rather than pure black so the gutters keep the site's tone. Raise the
alpha toward 1 for a quieter background, lower it to let the knot show. */
--bg-overlay: hsl(151 60% 3% / 0.62);
--radius: 0.5rem;
}
@ -51,6 +55,7 @@
--input: hsl(151 50% 15%);
--ring: hsl(43 64% 52%);
--panel: hsl(151 55% 3%);
--bg-overlay: hsl(151 60% 2% / 0.66);
}
@theme inline {
@ -90,11 +95,15 @@
body {
@apply bg-background text-foreground;
/* Celtic-knot tile is the page background; it shows in the gutters
around the floating content panel (see PageShell). The home page's
fixed landscape image sits above this layer, so home is unaffected. */
background-image: url('./assets/section-tile.webp');
background-repeat: repeat;
background-position: center top;
around the floating content panel (see PageShell). A flat dark wash
(--bg-overlay) is layered on top to mute it. The home page's fixed
landscape image sits above this layer, so home is unaffected. */
background-image:
linear-gradient(var(--bg-overlay), var(--bg-overlay)),
url('./assets/section-tile.webp');
background-repeat: no-repeat, repeat;
background-position: center top, center top;
background-size: cover, auto;
font-family: var(--font-sans);
font-weight: 300;
}