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

homepage bento: hero shrinks into 1fr+300px grid w/ banner at top right

Browse Source 
The 21:9 hero used to span full width and the Blackmagic 300x600 sat
next to the 3-up rail beneath it. Layout request: shrink the hero
horizontally (keep aspect ratio — height shrinks proportionally) so the
300x600 lifts up alongside the hero itself, with the 3-up rail still
under the hero in the left column. Same outer grid, just hero+rail now
live together in the left column.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar
2026-05-29 13:21:04 +00:00
parent 6a2d3af336
commit cc76c21c24
1 changed files with 73 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/FeaturedBentoFromDb.tsx
View File

@@ -78,7 +78,15 @@ export default async function FeaturedBento() {
</Link>
</div>
{/* Cinematic 21:9 hero — full width, image fills, gradient + overlaid title */}
{/* Two-column outer grid: left column holds the 21:9 hero + 3-up rail;
right column is the Blackmagic 300x600. The hero now sits NARROWER
(constrained to the 1fr-300px column) but keeps its 21:9 / 21:8
aspect ratio — height shrinks proportionally. Banner moves UP to
start at the very top of the row, baseline-aligned with the hero.
Mobile collapses to single column (banner hidden via lg:block). */}
<div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_300px] gap-4 items-start">
<div className="flex flex-col gap-4 min-w-0">
{/* Cinematic 21:9 hero — fills left column, aspect ratio preserved */}
<Link
href={`/news/${hero.wp_slug}`}
className="group block relative overflow-hidden rounded border border-[#252525] bg-[#0b0f17] hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
@@ -121,11 +129,7 @@ export default async function FeaturedBento() {
</div>
</Link>
{/* Row below the hero — 3-up rail (left) + Blackmagic 300x600 (right).
Right column is locked to 300px so its edge aligns with the right
edge of the 21:9 hero above; SidebarAdStack downstream skips this
banner so it doesn't double-render. */}
<div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_300px] gap-4 mt-4 items-start">
{/* 3-up rail directly under the hero, still in the left column */}
<div className="grid grid-cols-3 gap-3">
{rail.map((r) => (
<Link
@@ -154,6 +158,7 @@ export default async function FeaturedBento() {
</Link>
))}
</div>
</div>
<aside className="hidden lg:block" aria-label="Premium sponsor">
{heroAd ? (
<AdImage ad={heroAd} priority />