From 0bd63433c2751334b143e0ac4845c1d5951e107e Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Fri, 15 May 2026 19:38:13 +0200
Subject: [PATCH] stylized breakcore/

---
 frontend/src/pages/posts/[slug].astro |   6 +-
 frontend/src/styles/global.css        | 113 ++++++++++++++++++++++++++
 2 files changed, 116 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/posts/[slug].astro b/frontend/src/pages/posts/[slug].astro
index 0a45a3d..cd94738 100644
--- a/frontend/src/pages/posts/[slug].astro
+++ b/frontend/src/pages/posts/[slug].astro
@@ -151,10 +151,10 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
       <div id="post-content" class="prose" set:html={html} />
 
       {(neighbors.prev || neighbors.next) && (
-        <nav class="max-w-3xl mx-auto mt-20 md:mt-28 grid grid-cols-1 md:grid-cols-2 gap-6" aria-label="Post navigation">
+        <nav class="post-nav max-w-3xl mx-auto mt-20 md:mt-28 grid grid-cols-1 md:grid-cols-2 gap-6" aria-label="Post navigation">
           {neighbors.prev && (
             <a href={`/posts/${encodeURIComponent(neighbors.prev.slug)}`} class="group glass p-6 hover:border-[var(--mauve)] transition-colors text-left">
-              <div class="font-sans text-xs tracking-[0.22em] uppercase text-[var(--subtext0)] mb-2">← Previous</div>
+              <div class="pn-eyebrow font-sans text-xs tracking-[0.22em] uppercase text-[var(--subtext0)] mb-2">← Previous</div>
               <div class="font-display italic text-xl text-[var(--text)] group-hover:text-[var(--mauve)] transition-colors leading-snug">
                 {neighbors.prev.title || formatSlug(neighbors.prev.slug)}
               </div>
@@ -162,7 +162,7 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
           )}
           {neighbors.next && (
             <a href={`/posts/${encodeURIComponent(neighbors.next.slug)}`} class="group glass p-6 hover:border-[var(--mauve)] transition-colors text-right md:col-start-2">
-              <div class="font-sans text-xs tracking-[0.22em] uppercase text-[var(--subtext0)] mb-2">Next →</div>
+              <div class="pn-eyebrow font-sans text-xs tracking-[0.22em] uppercase text-[var(--subtext0)] mb-2">Next →</div>
               <div class="font-display italic text-xl text-[var(--text)] group-hover:text-[var(--mauve)] transition-colors leading-snug">
                 {neighbors.next.title || formatSlug(neighbors.next.slug)}
               </div>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 10ce138..5c6cbbf 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1634,6 +1634,119 @@ input[type="date"] { color-scheme: light; }
   box-shadow: 0 0 0 0 var(--mauve);
 }
 
+/* Top-bar chrome — neon UI, not drab subtext. Mono caps + hard offset. */
+.breakcore .topbar-control {
+  font-family: var(--font-mono);
+  font-style: normal;
+  font-size: 0.72rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--teal);
+  background: color-mix(in srgb, var(--crust) 55%, transparent);
+  border-color: color-mix(in srgb, var(--teal) 50%, transparent);
+}
+.breakcore .topbar-control:hover {
+  color: var(--crust);
+  background: var(--mauve);
+  border-color: var(--mauve);
+  box-shadow: 2px 2px 0 0 var(--green);
+}
+.breakcore .topbar-control:focus-visible {
+  border-color: var(--green);
+  box-shadow: 0 0 0 2px var(--green);
+}
+.breakcore .topbar-control--danger:hover {
+  background: var(--red);
+  border-color: var(--red);
+  color: var(--rosewater);
+  box-shadow: 2px 2px 0 0 var(--mauve);
+}
+.breakcore .topbar-divider {
+  width: 2px;
+  background: repeating-linear-gradient(
+    180deg,
+    var(--mauve) 0 4px,
+    transparent 4px 7px
+  );
+}
+
+/* Post prev/next nav — neon offset panels + acid eyebrow (was dim text). */
+.breakcore .post-nav a { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
+.breakcore .post-nav a:hover {
+  border-color: var(--mauve);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--mauve) 40%, transparent),
+    4px 4px 0 0 var(--mauve);
+}
+.breakcore .post-nav .pn-eyebrow {
+  color: var(--green);
+  font-family: var(--font-mono);
+  letter-spacing: 0.18em;
+  text-shadow: 0 0 6px color-mix(in srgb, var(--green) 45%, transparent);
+}
+
+/* Prose / code — CRT pass: terminal block, hazard inline code, neon
+ * blockquote, hazard-tape rule. */
+.breakcore .prose pre {
+  color: var(--teal);
+  background-color: color-mix(in srgb, var(--crust) 92%, transparent);
+  background-image: repeating-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0) 0 2px,
+    color-mix(in srgb, var(--mauve) 9%, transparent) 2px 3px,
+    rgba(0, 0, 0, 0) 3px 4px
+  );
+  border-color: var(--mauve);
+  border-left-color: var(--green);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--mauve) 28%, transparent),
+    4px 4px 0 0 color-mix(in srgb, var(--mauve) 35%, var(--crust));
+}
+.breakcore .prose pre code { color: inherit; }
+.breakcore .prose :not(pre) code {
+  color: var(--yellow);
+  background: color-mix(in srgb, var(--yellow) 12%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--yellow) 55%, transparent);
+}
+.breakcore .prose blockquote {
+  border-left-color: var(--mauve);
+  background: color-mix(in srgb, var(--mauve) 7%, transparent);
+  box-shadow: -3px 0 14px -5px color-mix(in srgb, var(--mauve) 55%, transparent);
+  padding: 0.5rem 0 0.5rem 1.4rem;
+}
+.breakcore .prose hr {
+  height: 3px;
+  opacity: 0.85;
+  background: repeating-linear-gradient(
+    90deg,
+    var(--mauve) 0 14px,
+    var(--green) 14px 28px
+  );
+  box-shadow: 0 0 10px color-mix(in srgb, var(--mauve) 40%, transparent);
+}
+.breakcore .prose hr::before {
+  background: var(--green);
+  box-shadow: 0 0 8px var(--green);
+}
+.breakcore .prose h3 { color: var(--pink); }
+.breakcore .prose h4 { color: var(--teal); }
+.breakcore .prose h5 { color: var(--green); font-family: var(--font-mono); }
+
+/* Scrollbar + caret — full-immersion chrome (no default OS bar). */
+.breakcore {
+  scrollbar-color: var(--mauve) var(--crust);
+  caret-color: var(--mauve);
+}
+.breakcore ::-webkit-scrollbar { width: 11px; height: 11px; }
+.breakcore ::-webkit-scrollbar-track { background: var(--crust); }
+.breakcore ::-webkit-scrollbar-thumb {
+  background: var(--mauve);
+  border: 2px solid var(--crust);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 50%, transparent);
+}
+.breakcore ::-webkit-scrollbar-thumb:hover { background: var(--green); }
+.breakcore ::-webkit-scrollbar-corner { background: var(--crust); }
+
 /* Prose links — magenta resting, acid-green on hover. */
 .breakcore .prose a {
   text-decoration-color: color-mix(in srgb, var(--mauve) 55%, transparent);