Changeset 5eef817 in Klonkt

Timestamp:

06/24/2026 04:54:25 AM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

69815b2

Parents:

f99bbe8

Message:

style: per-palette background gradient for every theme

The fixed body::before layer now paints a diagonal --paper -> --paper-2
gradient plus a soft accent glow, derived from each palette's own tokens —
so all palettes (light + dark) get a gradient automatically. style.css?v=34.

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -357 +357 @@
 body:not(.admin)::before {
     content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
-    background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 3%, transparent), transparent 60%),
-                radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--accent) 4%, transparent), transparent 55%);
+    /* Per-palette achtergrond-gradient: opgebouwd uit de palette's EIGEN --paper/--paper-2
+       (diagonale verloop) + een zachte accent-glow erbovenop. Werkt automatisch voor elk
+       palet, light én dark — geen per-palette regels nodig. */
+    background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
+                radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
+                linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
 }
 /* Klonkt-palet (donker): zuivere navy-diepte i.p.v. de accent(goud)-wash — anders
    kleurt het gouden accent de navy warm/bruinig. Matcht de klonkt.com-look. */
 [data-theme="dark"][data-palette="klonkt"] body:not(.admin)::before {
-    background: radial-gradient(ellipse at top, #1a1f2b 0%, transparent 62%);
+    background: radial-gradient(ellipse at top, #1a1f2b 0%, transparent 62%),
+                linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
 }
 @media (prefers-color-scheme: dark) {
     [data-palette="klonkt"]:not([data-theme="light"]) body:not(.admin)::before {
-        background: radial-gradient(ellipse at top, #1a1f2b 0%, transparent 62%);
+        background: radial-gradient(ellipse at top, #1a1f2b 0%, transparent 62%),
+                    linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
     }
 }

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=33">
+<link rel="stylesheet" href="/assets/css/style.css?v=34">
 
 <!-- Audio player styles: loaded on every page so the mini-player works