Improve layout/behavior and accessibility

2026-03-07 10:46:25 +00:00
parent a72ebc014c
commit 6e712e535d
8 changed files with 457 additions and 105 deletions
--- a/hdyc-svelte/src/app.css
+++ b/hdyc-svelte/src/app.css
@@ -18,6 +18,7 @@
  --accent-glow:  rgba(16, 185, 129, 0.15);
  --accent-gradient: linear-gradient(135deg, #10b981, #06b6d4);
  --header-bg: rgba(12, 15, 20, 0.85);
+  --section-bg: rgba(255, 255, 255, 0.04);

  /* ─── Typography ──────────────────────────────────────── */
  --font-body:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -42,6 +43,179 @@
  --accent-glow: rgba(16, 185, 129, 0.15);
  --accent-gradient: linear-gradient(135deg, #10b981, #06b6d4);
  --header-bg: rgba(255, 255, 255, 0.95);
+  --section-bg: rgba(15, 23, 42, 0.04);
+}
+
+/* ─── Palette overrides ─────────────────────────────────── */
+
+:root[data-palette='emerald'][data-theme='dark'] {
+  --bg: #0b1313;
+  --bg-elevated: rgba(4, 20, 15, 0.85);
+  --sidebar-bg: #08110f;
+  --card-bg: rgba(6, 19, 13, 0.75);
+  --input-bg: rgba(16, 185, 129, 0.08);
+  --hover-bg: rgba(16, 185, 129, 0.12);
+  --border: rgba(16, 185, 129, 0.35);
+  --text: #e9fcea;
+  --text-muted: #9fdac4;
+  --accent: #10b981;
+  --accent-dark: #059669;
+  --accent-glow: rgba(16, 185, 129, 0.25);
+  --accent-gradient: linear-gradient(135deg, #10b981, #0ea5e9);
+  --header-bg: rgba(12, 15, 20, 0.85);
+}
+
+:root[data-palette='emerald'][data-theme='light'] {
+  --bg: #f6fbf9;
+  --bg-elevated: #ffffff;
+  --sidebar-bg: #ffffff;
+  --card-bg: #ffffff;
+  --input-bg: #ecf7f1;
+  --hover-bg: #d5f0df;
+  --border: rgba(4, 120, 87, 0.25);
+  --text: #0b2c1f;
+  --text-muted: #4a6b5c;
+  --accent: #047857;
+  --accent-dark: #065f46;
+  --accent-glow: rgba(4, 120, 87, 0.2);
+  --accent-gradient: linear-gradient(135deg, #047857, #0ea5e9);
+  --header-bg: rgba(255, 255, 255, 0.95);
+}
+
+:root[data-palette='sunset'][data-theme='dark'] {
+  --bg: #0f0505;
+  --bg-elevated: rgba(15, 5, 5, 0.85);
+  --sidebar-bg: #0c0404;
+  --card-bg: rgba(19, 6, 6, 0.7);
+  --input-bg: rgba(251, 113, 133, 0.08);
+  --hover-bg: rgba(251, 113, 133, 0.14);
+  --border: rgba(251, 113, 133, 0.35);
+  --text: #ffe7e0;
+  --text-muted: #f9a6aa;
+  --accent: #fb7185;
+  --accent-dark: #be123c;
+  --accent-glow: rgba(251, 113, 133, 0.25);
+  --accent-gradient: linear-gradient(135deg, #fb7185, #f97316);
+  --header-bg: rgba(12, 8, 6, 0.85);
+}
+
+:root[data-palette='sunset'][data-theme='light'] {
+  --bg: #fff8f2;
+  --bg-elevated: #ffffff;
+  --sidebar-bg: #ffffff;
+  --card-bg: #fff4ef;
+  --input-bg: #ffe3d8;
+  --hover-bg: #ffd3bf;
+  --border: rgba(249, 115, 22, 0.25);
+  --text: #3d1b0b;
+  --text-muted: #7a4a37;
+  --accent: #f97316;
+  --accent-dark: #c2410c;
+  --accent-glow: rgba(249, 115, 22, 0.25);
+  --accent-gradient: linear-gradient(135deg, #f97316, #ec4899);
+  --header-bg: rgba(255, 255, 255, 0.96);
+}
+
+:root[data-palette='ocean'][data-theme='dark'] {
+  --bg: #030b12;
+  --bg-elevated: rgba(2, 9, 20, 0.85);
+  --sidebar-bg: #050c16;
+  --card-bg: rgba(3, 13, 26, 0.75);
+  --input-bg: rgba(14, 165, 233, 0.08);
+  --hover-bg: rgba(14, 165, 233, 0.15);
+  --border: rgba(14, 165, 233, 0.4);
+  --text: #e6f6ff;
+  --text-muted: #a1c4e8;
+  --accent: #38bdf8;
+  --accent-dark: #0369a1;
+  --accent-glow: rgba(14, 165, 233, 0.35);
+  --accent-gradient: linear-gradient(135deg, #38bdf8, #0f172a);
+  --header-bg: rgba(6, 15, 30, 0.85);
+}
+
+:root[data-palette='ocean'][data-theme='light'] {
+  --bg: #f4fbff;
+  --bg-elevated: #ffffff;
+  --sidebar-bg: #ffffff;
+  --card-bg: #f0f7ff;
+  --input-bg: #dcefff;
+  --hover-bg: #cae8ff;
+  --border: rgba(14, 165, 233, 0.25);
+  --text: #06274e;
+  --text-muted: #4d6993;
+  --accent: #0ea5e9;
+  --accent-dark: #0369a1;
+  --accent-glow: rgba(14, 165, 233, 0.25);
+  --accent-gradient: linear-gradient(135deg, #0ea5e9, #4753ff);
+  --header-bg: rgba(255, 255, 255, 0.95);
+}
+
+:root[data-palette='orchid'][data-theme='dark'] {
+  --bg: #0c0215;
+  --bg-elevated: rgba(10, 3, 30, 0.85);
+  --sidebar-bg: #090118;
+  --card-bg: rgba(12, 2, 25, 0.75);
+  --input-bg: rgba(168, 85, 247, 0.08);
+  --hover-bg: rgba(168, 85, 247, 0.16);
+  --border: rgba(168, 85, 247, 0.35);
+  --text: #f5e6ff;
+  --text-muted: #c5a3e8;
+  --accent: #d946ef;
+  --accent-dark: #831843;
+  --accent-glow: rgba(217, 70, 239, 0.25);
+  --accent-gradient: linear-gradient(135deg, #d946ef, #fb7185);
+  --header-bg: rgba(13, 6, 23, 0.95);
+}
+
+:root[data-palette='orchid'][data-theme='light'] {
+  --bg: #fdf6ff;
+  --bg-elevated: #ffffff;
+  --sidebar-bg: #ffffff;
+  --card-bg: #fdf2ff;
+  --input-bg: #f5e4ff;
+  --hover-bg: #e9d4ff;
+  --border: rgba(168, 85, 247, 0.25);
+  --text: #2c0a3a;
+  --text-muted: #6a5277;
+  --accent: #a855f7;
+  --accent-dark: #6d28d9;
+  --accent-glow: rgba(168, 85, 247, 0.25);
+  --accent-gradient: linear-gradient(135deg, #c084fc, #a855f7);
+  --header-bg: rgba(255, 255, 255, 0.97);
+}
+
+:root[data-palette='citrus'][data-theme='dark'] {
+  --bg: #1a1203;
+  --bg-elevated: rgba(26, 18, 3, 0.9);
+  --sidebar-bg: #130e02;
+  --card-bg: rgba(26, 18, 3, 0.75);
+  --input-bg: rgba(250, 204, 21, 0.08);
+  --hover-bg: rgba(250, 204, 21, 0.14);
+  --border: rgba(250, 204, 21, 0.35);
+  --text: #fff8e7;
+  --text-muted: #f6dea1;
+  --accent: #fbbf24;
+  --accent-dark: #b45309;
+  --accent-glow: rgba(250, 204, 21, 0.25);
+  --accent-gradient: linear-gradient(135deg, #fbbf24, #f97316);
+  --header-bg: rgba(15, 9, 2, 0.9);
+}
+
+:root[data-palette='citrus'][data-theme='light'] {
+  --bg: #fffdf5;
+  --bg-elevated: #ffffff;
+  --sidebar-bg: #ffffff;
+  --card-bg: #fffaf0;
+  --input-bg: #fff4d8;
+  --hover-bg: #ffeec1;
+  --border: rgba(250, 204, 21, 0.25);
+  --text: #2b2509;
+  --text-muted: #6d5f2a;
+  --accent: #facc15;
+  --accent-dark: #b45309;
+  --accent-glow: rgba(250, 204, 21, 0.2);
+  --accent-gradient: linear-gradient(135deg, #facc15, #f97316);
+  --header-bg: rgba(255, 255, 255, 0.98);
 }

 *, *::before, *::after {