localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add top horizontal rail connecting header verticals

Browse Source 
Adds a neon-green horizontal line across the very top of the site,
spanning from the left vertical rail to the right vertical rail, so
the header reads as a closed bracket instead of two floating lines.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar
2026-05-22 19:35:22 +00:00
parent 4528257842
commit 2b45112c21
2 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Header.tsx
View File

@@ -244,6 +244,7 @@ export default function Header() {
return ( return (
<div className="bb-header-rails relative"> <div className="bb-header-rails relative">
<div className="bb-header-top-rail" aria-hidden />
{/* TOP BAR */} {/* TOP BAR */}
<div className="max-w-container mx-auto px-4"> <div className="max-w-container mx-auto px-4">
<div className="bg-[#1a2535] border-b border-[#2a3a50] h-8 flex items-center justify-between"> <div className="bg-[#1a2535] border-b border-[#2a3a50] h-8 flex items-center justify-between">

16
src/styles/tailwind.css
View File

@@ -1567,8 +1567,22 @@ h1, h2, h3 {
} }
.bb-header-rails::before { left: max(12px, calc((100% - 1200px) / 2 + 12px)); } .bb-header-rails::before { left: max(12px, calc((100% - 1200px) / 2 + 12px)); }
.bb-header-rails::after { right: max(12px, calc((100% - 1200px) / 2 + 12px)); } .bb-header-rails::after { right: max(12px, calc((100% - 1200px) / 2 + 12px)); }
/* Top horizontal connector — closes the bracket along the very top of
the site between the two vertical rails. */
.bb-header-top-rail {
position: absolute;
top: 0;
left: max(12px, calc((100% - 1200px) / 2 + 12px));
right: max(12px, calc((100% - 1200px) / 2 + 12px));
height: 2px;
background: #00ff9f;
box-shadow: 0 0 8px rgba(0, 255, 159, 0.7);
pointer-events: none;
z-index: 61;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.bb-header-rails::before, .bb-header-rails::after { display: none; } .bb-header-rails::before, .bb-header-rails::after,
.bb-header-top-rail { display: none; }
} }
/* ─── Article body — NYT/WaPo-classy typography ────────────────────────── /* ─── Article body — NYT/WaPo-classy typography ──────────────────────────