removed legacy themes + added goth

fixed main page admin button styling
2026-05-14 11:14:37 +02:00 · 2026-05-14 11:11:39 +02:00
5 changed files with 68 additions and 36 deletions
@@ -4,11 +4,13 @@ import AssetManager from './admin/AssetManager';
 interface Props {
  className?: string;
  label?: string;
+  iconSize?: number;
 }

 export default function AssetsButton({
  className = 'inline-flex items-center gap-2 bg-surface0 hover:bg-surface1 text-subtext1 hover:text-text px-3 py-2 rounded-lg border border-surface1 transition-colors text-sm',
  label = 'Assets',
+  iconSize = 14,
 }: Props) {
  const [open, setOpen] = useState(false);

@@ -31,8 +33,8 @@ export default function AssetsButton({
      <button type="button" onClick={() => setOpen(true)} className={className}>
        <svg
          xmlns="http://www.w3.org/2000/svg"
-          width="14"
-          height="14"
+          width={iconSize}
+          height={iconSize}
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
@@ -3,15 +3,14 @@ import { useState, useEffect, useRef } from 'react';
 const THEMES = [
  { value: 'salon', label: 'Salon' },
  { value: 'salon-noir', label: 'Salon Noir' },
-  { value: 'latte', label: 'Latte' },
-  { value: 'mocha', label: 'Mocha' },
+  { value: 'gothic', label: 'Gothic' },
 ];

 interface Props {
  defaultTheme?: string;
 }

-export default function ThemeSwitcher({ defaultTheme = 'mocha' }: Props) {
+export default function ThemeSwitcher({ defaultTheme = 'salon' }: Props) {
  const [theme, setTheme] = useState(() => {
    if (typeof window !== 'undefined') {
      return localStorage.getItem('user-theme') || defaultTheme;
@@ -68,10 +68,9 @@ export default function Settings() {
          >
            <option value="salon">Salon (parchment, default)</option>
            <option value="salon-noir">Salon Noir (black gallery wall)</option>
-            <option value="latte">Latte (light)</option>
-            <option value="mocha">Mocha (dark)</option>
+            <option value="gothic">Gothic (cathedral nightfall)</option>
          </select>
-          <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">Salon and Salon Noir are tuned for the gallery aesthetic.</p>
+          <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">All three are tuned for the gallery aesthetic. Gothic leans into deep violet-black with cathedral indigo and blood-crimson accents.</p>
        </div>
        <div>
          <label className="field-label">Custom CSS</label>
@@ -90,9 +90,9 @@ const total = posts.length;
 					<div class="mt-8 flex flex-wrap items-center gap-3">
 						<a href="/admin/editor" class="btn-stamp">
 							<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
-							Hang new work
+							New work
 						</a>
-						<AssetsButton client:load />
+						<AssetsButton client:load className="btn-ghost" iconSize={12} />
 						<a href="/admin/settings" class="btn-ghost">
 							<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/></svg>
 							Settings
@@ -101,29 +101,36 @@
  --rosewater: #F4E5C9;
 }

-/* Legacy Catppuccin themes — kept for users that already opted in. */
-.mocha {
-  --crust: #11111b; --mantle: #181825; --base: #1e1e2e;
-  --surface0: #313244; --surface1: #45475a; --surface2: #585b70;
-  --overlay0: #6c7086; --overlay1: #7f849c; --overlay2: #9399b2;
-  --text: #cdd6f4; --subtext0: #a6adc8; --subtext1: #bac2de;
-  --blue: #89b4fa; --lavender: #b4befe; --sapphire: #74c7ec;
-  --sky: #89dceb; --teal: #94e2d5; --green: #a6e3a1;
-  --yellow: #f9e2af; --peach: #fab387; --maroon: #eba0ac;
-  --red: #f38ba8; --mauve: #cba6f7; --pink: #f5c2e7;
-  --flamingo: #f2cdcd; --rosewater: #f5e0dc;
-}
-
-.latte {
-  --crust: #dce0e8; --mantle: #e6e9ef; --base: #eff1f5;
-  --surface0: #ccd0da; --surface1: #bcc0cc; --surface2: #acb0be;
-  --overlay0: #7c7f93; --overlay1: #6c6f85; --overlay2: #5c5f77;
-  --text: #1e1e2e; --subtext0: #3c3f59; --subtext1: #4c4f69;
-  --blue: #1e66f5; --lavender: #7287fd; --sapphire: #209fb5;
-  --sky: #04a5e5; --teal: #179299; --green: #40a02b;
-  --yellow: #df8e1d; --peach: #fe640b; --maroon: #e64553;
-  --red: #d20f39; --mauve: #8839ef; --pink: #ea76cb;
-  --flamingo: #dd7878; --rosewater: #dc8a78;
+/* GOTHIC — cathedral nightfall. Midnight violet ground, blood crimson,
+ * tarnished candle gold, stained-glass indigo. Catholic-gothic + Sisters of
+ * Mercy + Bauhaus stark. Primary accent: cathedral velvet mauve. */
+.gothic {
+  --crust: #030104;
+  --mantle: #0A0710;
+  --base: #110B18;
+  --surface0: #1A1224;
+  --surface1: #261A36;
+  --surface2: #382550;
+  --overlay0: #4F3970;
+  --overlay1: #6E5293;
+  --overlay2: #8D72B1;
+  --text: #EDE3F2;        /* bone, violet wash */
+  --subtext0: #9B8AB0;
+  --subtext1: #C0AED2;
+  --blue: #4239A4;        /* stained-glass deep */
+  --lavender: #9B7BD4;    /* candlelight through purple glass */
+  --sapphire: #5947B2;
+  --sky: #7C68C9;
+  --teal: #487B8A;        /* verdigris on bronze */
+  --green: #5E7842;       /* cemetery moss */
+  --yellow: #D4A82B;      /* taper / tarnished brass */
+  --peach: #B45A38;       /* rust */
+  --maroon: #5B1A24;
+  --red: #A41827;         /* arterial */
+  --mauve: #8B2C9E;       /* cathedral velvet — primary accent */
+  --pink: #B25288;        /* dried rose */
+  --flamingo: #C57B96;
+  --rosewater: #F0DDE8;
 }

 html {
@@ -168,6 +175,13 @@ body::after {
 html.salon-noir body::after {
  opacity: 0.5;
 }
+.gothic body::after,
+html.gothic body::after {
+  opacity: 0.55;
+  background-image:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0 0.10 0 0 0 0.28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
+  mix-blend-mode: screen;
+}

 /* Floating motes of pigment — far background, very subtle. */
 .salon-atmosphere {
@@ -437,7 +451,9 @@ code, pre, kbd, samp {
  border-radius: 2px;
 }
 .salon-noir .prose figure img,
-.salon-noir .prose img {
+.salon-noir .prose img,
+.gothic .prose figure img,
+.gothic .prose img {
  background:
    linear-gradient(var(--surface0), var(--surface0)) padding-box,
    linear-gradient(135deg, var(--surface2), var(--surface1)) border-box;
@@ -445,6 +461,13 @@ code, pre, kbd, samp {
    0 18px 38px -22px rgba(0, 0, 0, 0.7),
    0 2px 6px -2px rgba(0, 0, 0, 0.5);
 }
+.gothic .prose figure img,
+.gothic .prose img {
+  box-shadow:
+    0 18px 38px -22px rgba(0, 0, 0, 0.85),
+    0 2px 6px -2px rgba(0, 0, 0, 0.6),
+    0 0 0 1px color-mix(in srgb, var(--mauve) 22%, transparent);
+}
 .prose figure figcaption {
  font-family: var(--font-display);
  font-style: italic;
@@ -500,7 +523,8 @@ code, pre, kbd, samp {
  transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
 }
-.salon-noir .plate {
+.salon-noir .plate,
+.gothic .plate {
  background: var(--surface0);
 }
 .plate:hover {
@@ -690,9 +714,16 @@ code, pre, kbd, samp {
    0 10px 30px -20px rgba(20, 16, 12, 0.45);
  border-radius: 2px;
 }
-.salon-noir .glass {
+.salon-noir .glass,
+.gothic .glass {
  background-color: color-mix(in srgb, var(--surface0) 70%, transparent);
 }
+.gothic .glass {
+  border-color: color-mix(in srgb, var(--mauve) 35%, var(--surface2));
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--mauve) 18%, transparent),
+    0 14px 40px -24px rgba(0, 0, 0, 0.85);
+}

 /* ───── Buttons ───── */
 .btn-stamp {
@@ -848,6 +879,7 @@ code, pre, kbd, samp {
 input[type="checkbox"] { accent-color: var(--mauve); }
 input[type="date"] { color-scheme: light; }
 .salon-noir input[type="date"] { color-scheme: dark; }
+.gothic input[type="date"] { color-scheme: dark; }

 /* Reading progress bar - thin terracotta line */
 .reading-progress {
Author	SHA1	Message	Date
nvrl	af70f743be	removed legacy themes + added goth	2026-05-14 11:14:37 +02:00
nvrl	04b0326778	fixed main page admin button styling	2026-05-14 11:11:39 +02:00