- ← Previous
+ ← Previous
{neighbors.prev.title || formatSlug(neighbors.prev.slug)}
@@ -162,7 +162,7 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
)}
{neighbors.next && (
- Next →
+ Next →
{neighbors.next.title || formatSlug(neighbors.next.slug)}
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);