nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed legacy themes + added goth

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-14 11:14:37 +02:00
parent 04b0326778
commit af70f743be
3 changed files with 62 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/global.css
+58 -26
View File
@@ -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 {