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%); --ring: hsl(43 64% 50%);
/* Near-black green of the content panel that floats on the tiled bg. */ /* Near-black green of the content panel that floats on the tiled bg. */
--panel: hsl(151 55% 4%); --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; --radius: 0.5rem;
} }
@ -51,6 +55,7 @@
--input: hsl(151 50% 15%); --input: hsl(151 50% 15%);
--ring: hsl(43 64% 52%); --ring: hsl(43 64% 52%);
--panel: hsl(151 55% 3%); --panel: hsl(151 55% 3%);
--bg-overlay: hsl(151 60% 2% / 0.66);
} }
@theme inline { @theme inline {
@ -90,11 +95,15 @@
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
/* Celtic-knot tile is the page background; it shows in the gutters /* Celtic-knot tile is the page background; it shows in the gutters
around the floating content panel (see PageShell). The home page's around the floating content panel (see PageShell). A flat dark wash
fixed landscape image sits above this layer, so home is unaffected. */ (--bg-overlay) is layered on top to mute it. The home page's fixed
background-image: url('./assets/section-tile.webp'); landscape image sits above this layer, so home is unaffected. */
background-repeat: repeat; background-image:
background-position: center top; 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-family: var(--font-sans);
font-weight: 300; font-weight: 300;
} }