homepage: shrink Staff Editorial header to match The Latest
Earlier this evening I bumped the Staff Editorial header to a font-serif 2xl/3xl bold — too loud, fought with The Latest section header below it on the same page. Reverted to the same shape The Latest uses: <span class="section-label">Staff Editorial</span> <div class="flex-1 h-px bg-[#2a2a2a]" /> <Link>All featured →</Link> That's the global .section-label utility (font-body 13px, font-weight:700, letter-spacing:0.08em, uppercase, color accent-blue, with a 3px accent border on the left). Now the two section headers on the homepage are visually consistent.
This commit is contained in:
@@ -60,16 +60,13 @@ export default async function FeaturedBento() {
|
||||
|
||||
return (
|
||||
<section className="max-w-container mx-auto px-4 my-8" aria-label="Featured stories">
|
||||
<div className="flex items-end gap-4 mb-4 flex-wrap pb-2 border-b-2 border-[#2a2a2a]">
|
||||
<h2 className="font-serif text-2xl md:text-3xl font-bold tracking-tight text-white whitespace-nowrap leading-none">
|
||||
Staff Editorial
|
||||
</h2>
|
||||
<span className="font-mono text-[10px] uppercase tracking-[0.2em] text-[#6b7280] pb-1">
|
||||
Selected by our newsroom
|
||||
</span>
|
||||
<div className="flex-1" />
|
||||
<Link href="/news?category=Featured" className="text-[11px] font-mono text-[var(--color-text-info,#60a5fa)] hover:underline whitespace-nowrap pb-1">
|
||||
See all →
|
||||
{/* Section header — same shape as "The Latest" on ArticleFeed:
|
||||
section-label utility + flex-1 hr + accent-blue "all →" link. */}
|
||||
<div className="flex items-center gap-3 mb-4 md:mb-5 flex-wrap">
|
||||
<span className="section-label">Staff Editorial</span>
|
||||
<div className="flex-1 h-px bg-[#2a2a2a]" />
|
||||
<Link href="/news?category=Featured" className="text-[11px] font-mono text-[var(--color-text-info,#60a5fa)] hover:underline whitespace-nowrap">
|
||||
All featured →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user