Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions src/pages/home/crt.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
9 changes: 9 additions & 0 deletions src/pages/home/home-page.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 })
Expand Down
2 changes: 1 addition & 1 deletion src/pages/home/home-page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export function HomePage() {
>
<li>
<a
className="crt-menu-row crt-menu-row--active crt-menu-row--featured"
className="crt-menu-row crt-menu-row--active crt-menu-row--stacked"
href="https://aoe2.criticalbit.gg/kings-gauntlet"
>
<span className="crt-menu-row__line">
Expand Down
Loading