diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 533e5e5..937f994 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -243,7 +243,7 @@ export default function Header() { }; return ( - <> +
{/* TOP BAR */}
@@ -643,6 +643,6 @@ export default function Header() {
- + ); } \ No newline at end of file diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index eac88d3..82654fa 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -1545,6 +1545,30 @@ h1, h2, h3 { border-color: #00d4ff !important; } +/* ─── Header neon rails ────────────────────────────────────────────────── + Two vertical neon-green lines pinned to the left + right edges of the + centered max-w-container (1200px), running from the very top of the + site down to the bottom of the browse bar. They line up exactly with + the horizontal neon-green border under the "search all content + sitewide" row, framing the whole header as a single bracket. */ +.bb-header-rails::before, +.bb-header-rails::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + width: 1px; + background: #00ff9f; + box-shadow: 0 0 6px rgba(0, 255, 159, 0.55); + pointer-events: none; + z-index: 5; +} +.bb-header-rails::before { left: max(16px, calc((100% - 1200px) / 2 + 16px)); } +.bb-header-rails::after { right: max(16px, calc((100% - 1200px) / 2 + 16px)); } +@media (max-width: 768px) { + .bb-header-rails::before, .bb-header-rails::after { display: none; } +} + /* ─── Article body — NYT/WaPo-classy typography ────────────────────────── Apply this class alongside the existing `prose prose-invert` on the article body render in /news/[slug] and /articles/[slug]. */