header+ticker: new menu (HOME/FEATURED/THE LATEST/SHOW COVERAGE/FORUM/ABOUT) + drop reduced-motion rule that was freezing ticker animation

This commit is contained in:
Ryan Salazar
2026-05-22 01:22:12 +00:00
parent 00a79f12b7
commit e6eb3cc99c
4 changed files with 10 additions and 9 deletions

View File

@@ -140,7 +140,7 @@ export default function HomePage() {
</div>
{/* Featured: cinematic hero + 4-up rail below (FeaturedBentoFromDb) */}
<ScrollRevealSection className="section-enter section-enter-3">
<ScrollRevealSection id="featured" className="section-enter section-enter-3 scroll-mt-32">
<Suspense fallback={<BentoSkeleton />}>
<FeaturedBentoFromDb />
</Suspense>
@@ -155,7 +155,7 @@ export default function HomePage() {
*/}
{/* Article feed + sidebar */}
<ScrollRevealSection className="section-enter section-enter-5" delay={2}>
<ScrollRevealSection id="the-latest" className="section-enter section-enter-5 scroll-mt-32" delay={2}>
<Suspense fallback={<FeedSkeleton />}>
<ArticleFeed />
</Suspense>

View File

@@ -215,9 +215,6 @@ export default function DualSpeedTicker() {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.bbt-track { animation-duration: 0s; }
}
@media (max-width: 640px) {
.bbt-label { font-size: 9px; padding: 0 8px; }
.bbt-item { font-size: 11px; padding: 0 10px; }

View File

@@ -28,8 +28,11 @@ interface NavItem {
}
const navLinks: NavItem[] = [
{ label: "Newsletter", href: "/newsletter" },
{ label: "Forum", href: "/forum" },
{ label: "HOME", href: "/" },
{ label: "FEATURED", href: "/#featured" },
{ label: "THE LATEST", href: "/news" },
{ label: "SHOW COVERAGE", href: "/show-coverage" },
{ label: "FORUM", href: "/forum" },
];
export default function Header() {
@@ -627,7 +630,6 @@ export default function Header() {
{/* Menu (right) */}
<nav className="bb-browse-menu" aria-label="Main sections">
<EventsDropdown />
{navLinks.map((link) => (
<Link
key={link.label}

View File

@@ -6,6 +6,7 @@ interface ScrollRevealSectionProps {
className?: string;
delay?: number;
variant?: 'default' | 'left' | 'scale';
id?: string;
}
export default function ScrollRevealSection({
@@ -13,6 +14,7 @@ export default function ScrollRevealSection({
className = '',
delay = 0,
variant = 'default',
id,
}: ScrollRevealSectionProps) {
const ref = useRef<HTMLDivElement>(null);
@@ -41,7 +43,7 @@ export default function ScrollRevealSection({
}, []);
return (
<div ref={ref} className={`${variantClass} ${delayClass} ${className}`}>
<div ref={ref} id={id} className={`${variantClass} ${delayClass} ${className}`}>
{children}
</div>
);