diff --git a/src/pages/home/crt.css b/src/pages/home/crt.css index a2b7183..dd7295a 100644 --- a/src/pages/home/crt.css +++ b/src/pages/home/crt.css @@ -409,13 +409,21 @@ } } -/* Featured event — a phosphor frame plus a slower, brighter pulse lifts - the marquee event above the peer rows. Switching to a column stacks the - "hosted by" credit beneath the label line. */ -.crt-menu-row--featured { +/* Stacked row — switches to a column so .crt-menu-row__line can carry the + horizontal label while a .crt-menu-subtitle (e.g. a host credit) sits + beneath it. Layout only, no frame or pulse, so a credited row still reads + as a peer of the plain rows. */ +.crt-menu-row--stacked { flex-direction: column; align-items: stretch; gap: 0.4rem; +} + +/* Featured event — a phosphor frame plus a slower, brighter pulse to lift a + marquee event above its peers; pair with --stacked when it also needs a + subtitle. Currently unused (nothing is featured) — kept for reuse when the + next event lands. */ +.crt-menu-row--featured { padding: 0.7rem 0.85rem; font-size: 1.1rem; border: 1px solid color-mix(in oklch, var(--crt-primary) 50%, transparent); diff --git a/src/pages/home/home-page.test.tsx b/src/pages/home/home-page.test.tsx index f34364e..cc12b2a 100644 --- a/src/pages/home/home-page.test.tsx +++ b/src/pages/home/home-page.test.tsx @@ -24,6 +24,15 @@ describe("HomePage", () => { ).toHaveTextContent(/hosted by hera/i) }) + it("renders The King's Gauntlet as a regular, non-featured row", async () => { + // The tournament has ended, so the marquee frame + pulse is dropped while + // the host credit (a stacked subtitle) stays. + await renderWithFileRoutes(<>) + const gauntlet = screen.getByRole("link", { name: /king's gauntlet/i }) + expect(gauntlet).not.toHaveClass("crt-menu-row--featured") + expect(gauntlet).toHaveClass("crt-menu-row--stacked") + }) + it("orders The King's Gauntlet above Vagrant Story in the menu", async () => { await renderWithFileRoutes(<>) const gauntlet = screen.getByRole("link", { name: /king's gauntlet/i }) diff --git a/src/pages/home/home-page.tsx b/src/pages/home/home-page.tsx index 2170bec..1571af9 100644 --- a/src/pages/home/home-page.tsx +++ b/src/pages/home/home-page.tsx @@ -47,7 +47,7 @@ export function HomePage() { >