Changeset 19fbe03 in Klonkt

Timestamp:

06/24/2026 04:58:14 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

c9c70cc

Parents:

9cc0f9f

Message:

Palettes: drop Stone+Terracotta, add Ocean+Candy, rework warm to 'Sand'

• 8 palettes: klonkt, paper, forest, sunset, Sand (warm paper, clay accent, not yellow; key 'cream'), lilac, Ocean (klonkt navy + blue), Candy (klonkt navy + red).
• Ocean/Candy reuse the klonkt structure with their own accent (Robin: klonkt-based looks best). CSS blocks added; cream block reworked to Sand.
• Accents: drop Oranje + Bruin; Rood -> Candy-rood (#e11d48). style.css?v=45.

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

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• middleware/site.js (modified) (1 diff)
• services/ThemeService.js (modified) (5 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -224 +224 @@
 }
 
-/* ── CREAM ── warm papier → caramel-donker ── */
+/* ── SAND ── warm papier (subtiel, niet fel geel) → warm donker ── (key blijft 'cream') */
 [data-palette="cream"] {
-    --paper: #fefaf0; --paper-2: #f5ebd5;
-    --ink: #2a1f0f; --ink-soft: #4a3820; --ink-muted: #786140; --ink-faint: #ad9068;
-    --rule: #e8d9b0; --rule-2: #d1bc8a;
+    --paper: #f7f3ec; --paper-2: #ece5d8;
+    --ink: #232019; --ink-soft: #43392c; --ink-muted: #6f6149; --ink-faint: #a3957c;
+    --rule: #ddd3c0; --rule-2: #c9bca3;
 }
 @media (prefers-color-scheme: dark) {
     [data-palette="cream"]:not([data-theme="light"]) {
-        --paper: #1a1208; --paper-2: #2e2012;
-        --ink: #fef3d6; --ink-soft: #e0cfa0; --ink-muted: #b0996b; --ink-faint: #7a6848;
-        --rule: #3d2c16; --rule-2: #523d1f;
+        --paper: #14120d; --paper-2: #221e15;
+        --ink: #efe9dd; --ink-soft: #d0c6b2; --ink-muted: #a3957c; --ink-faint: #6f6149;
+        --rule: #322c20; --rule-2: #463d2c;
     }
 }
 [data-theme="dark"][data-palette="cream"] {
-    --paper: #1a1208; --paper-2: #2e2012;
-    --ink: #fef3d6; --ink-soft: #e0cfa0; --ink-muted: #b0996b; --ink-faint: #7a6848;
-    --rule: #3d2c16; --rule-2: #523d1f;
+    --paper: #14120d; --paper-2: #221e15;
+    --ink: #efe9dd; --ink-soft: #d0c6b2; --ink-muted: #a3957c; --ink-faint: #6f6149;
+    --rule: #322c20; --rule-2: #463d2c;
+}
+
+/* ── OCEAN ── klonkt-structuur (navy → off-white), blauw accent ── */
+[data-palette="ocean"] {
+    --paper: #f3f1ea; --paper-2: #e7e4d9;
+    --ink: #11141c; --ink-soft: #2b3040; --ink-muted: #5b6473; --ink-faint: #9aa3b2;
+    --rule: #d8d4c6; --rule-2: #c5c0af;
+}
+@media (prefers-color-scheme: dark) {
+    [data-palette="ocean"]:not([data-theme="light"]) {
+        --paper: #0b0d12; --paper-2: #11141c;
+        --ink: #f3f1ea; --ink-soft: #c8cdd6; --ink-muted: #9aa3b2; --ink-faint: #6b7280;
+        --rule: #232a38; --rule-2: #2b3040;
+    }
+}
+[data-theme="dark"][data-palette="ocean"] {
+    --paper: #0b0d12; --paper-2: #11141c;
+    --ink: #f3f1ea; --ink-soft: #c8cdd6; --ink-muted: #9aa3b2; --ink-faint: #6b7280;
+    --rule: #232a38; --rule-2: #2b3040;
+}
+
+/* ── CANDY ── klonkt-structuur (navy → off-white), candy-rood accent ── */
+[data-palette="candy"] {
+    --paper: #f3f1ea; --paper-2: #e7e4d9;
+    --ink: #11141c; --ink-soft: #2b3040; --ink-muted: #5b6473; --ink-faint: #9aa3b2;
+    --rule: #d8d4c6; --rule-2: #c5c0af;
+}
+@media (prefers-color-scheme: dark) {
+    [data-palette="candy"]:not([data-theme="light"]) {
+        --paper: #0b0d12; --paper-2: #11141c;
+        --ink: #f3f1ea; --ink-soft: #c8cdd6; --ink-muted: #9aa3b2; --ink-faint: #6b7280;
+        --rule: #232a38; --rule-2: #2b3040;
+    }
+}
+[data-theme="dark"][data-palette="candy"] {
+    --paper: #0b0d12; --paper-2: #11141c;
+    --ink: #f3f1ea; --ink-soft: #c8cdd6; --ink-muted: #9aa3b2; --ink-faint: #6b7280;
+    --rule: #232a38; --rule-2: #2b3040;
 }
 

src/middleware/site.js

@@ -105 +105 @@
  */
 export function loadTheme(req, res, next) {
-  const PALETTES = ['klonkt','paper','forest','stone','sunset','cream','mint','lilac'];
+  const PALETTES = ['klonkt','paper','forest','sunset','cream','lilac','ocean','candy'];
   
   const user = req.session?.user;

src/services/ThemeService.js

@@ -6 +6 @@
  * - Paper (minimalist white)
  * - Forest (greens)
- * - Stone (warm grays)
  * - Sunset (pink)
- * - Cream (amber beige)
- * - Terracotta (burnt orange, key 'mint')
+ * - Sand (warm paper, clay accent — key 'cream')
  * - Lilac (purple)
+ * - Ocean (klonkt navy + blue accent)
+ * - Candy (klonkt navy + candy-red accent)
  *
  * Dark/Light mode toggle stored per user
@@ -35 +35 @@
       dark: { paper: '#0d1f12', ink: '#dcf2d0', accent: '#6fae3f' }
     },
-    stone: {
-      name: 'Stone',
-      light: { paper: '#f5f0e8', ink: '#2b2218', accent: '#8a6a45' },
-      dark: { paper: '#1a130b', ink: '#f5e9d5', accent: '#b89366' }
-    },
     sunset: {
       name: 'Sunset',
@@ -45 +40 @@
       dark: { paper: '#1f0a14', ink: '#fce7f3', accent: '#f06fa3' }
     },
+    // Warm paper — soft off-white + clay accent (deliberately NOT bright yellow).
+    // key stays 'cream' (DB-safe).
     cream: {
-      name: 'Cream',
-      light: { paper: '#fefaf0', ink: '#2a1f0f', accent: '#d97706' },
-      dark: { paper: '#1a1208', ink: '#fef3d6', accent: '#f0a93a' }
-    },
-    // key stays 'mint' (DB-safe), but recolored to warm Terracotta — less green.
-    mint: {
-      name: 'Terracotta',
-      light: { paper: '#faf2ee', ink: '#2e1a12', accent: '#c2410c' },
-      dark: { paper: '#1f120c', ink: '#f7e6da', accent: '#e8783f' }
+      name: 'Sand',
+      light: { paper: '#f7f3ec', ink: '#232019', accent: '#bf6a45' },
+      dark: { paper: '#14120d', ink: '#efe9dd', accent: '#d6845f' }
+    },
+    // Ocean & Candy = the klonkt palette (navy + off-white) with a different accent.
+    ocean: {
+      name: 'Ocean',
+      light: { paper: '#f3f1ea', ink: '#11141c', accent: '#1d6fe0' },
+      dark: { paper: '#0b0d12', ink: '#f3f1ea', accent: '#4f9bff' }
+    },
+    candy: {
+      name: 'Candy',
+      light: { paper: '#f3f1ea', ink: '#11141c', accent: '#e11d48' },
+      dark: { paper: '#0b0d12', ink: '#f3f1ea', accent: '#fb5c7d' }
     },
     lilac: {
@@ -72 +74 @@
   static ACCENTS = [
     { key: 'klonkt',  name: 'Klonkt-geel', color: '#e8b04b' },
-    { key: 'red',     name: 'Rood',      color: '#dc2626' },
-    { key: 'orange',  name: 'Oranje',    color: '#ea580c' },
+    { key: 'red',     name: 'Candy-rood', color: '#e11d48' },
     { key: 'amber',   name: 'Amber',     color: '#d97706' },
     { key: 'forest',  name: 'Groen',     color: '#16a34a' },
@@ -82 +83 @@
     { key: 'plum',    name: 'Magenta',   color: '#c026d3' },
     { key: 'pink',    name: 'Roze',      color: '#db2777' },
-    { key: 'brown',   name: 'Bruin',     color: '#9a3412' },
   ];
 

src/views/shell.ejs

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