Give the page background a casino felt texture
CI / Build and push docker image (push) Successful in 59s

Replace the flat radial green with a layered body background: a soft
overhead light and an edge vignette over a fine grain tiled across the
green gradient.

The grain is a tiny seamless SVG tile (feTurbulence fractal noise mapped
to semi-transparent black speckles, stitchTiles so it repeats without
seams) committed under web/assets, so it rides the existing asset
pipeline and works offline; the palette and panel/card colors are
unchanged.
This commit is contained in:
2026-10-09 09:27:05 +08:00
parent 4ba5ae1434
commit 9eea293471
2 changed files with 32 additions and 5 deletions
+21 -5
View File
@@ -40,11 +40,27 @@
body {
min-height: 100vh;
background-color: var(--felt-dark);
background-image: radial-gradient(
ellipse at 50% -10%,
var(--felt) 0%,
var(--felt-dark) 65%
);
/* Casino-table felt: a fine grain texture tiled over the green
* gradient, lit from above and darkened towards the edges. The first
* layer is the topmost one. */
background-image:
radial-gradient(
ellipse at 50% 45%,
transparent 55%,
rgba(0, 0, 0, 0.38) 100%
),
radial-gradient(
ellipse at 50% -10%,
rgba(255, 255, 255, 0.07),
transparent 60%
),
url("/assets/felt.svg"),
radial-gradient(
ellipse at 50% -10%,
var(--felt) 0%,
var(--felt-dark) 65%
);
background-repeat: no-repeat, no-repeat, repeat, no-repeat;
background-attachment: fixed;
color: var(--text);
}