/* Project-wide style overrides on top of BeerCSS (Material 3). */ :root { --primary: #1a73e8; /* Link accent used for in-content links (see "Content links" below). */ --link: #1558b0; } body.dark { /* Brighter blue so links stay legible on the dark background. */ --link: #8ab4f8; } main.responsive { min-height: 70vh; /* is a CSS grid and this is a grid item. Without min-width:0 the item's default min-width:auto lets a wide child (e.g. a stats table with a min-width) blow the whole page out horizontally instead of scrolling inside its own wrapper — unreadable on mobile. This lets the item shrink to its column so the .table-scroll wrappers below become the scroller. */ min-width: 0; } /* Wide data tables scroll horizontally on narrow screens instead of cramming their columns. Wrap a table in
to make the wrapper (not the page) the horizontal scroller, with momentum on iOS. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Default readable floor; an inline min-width on the table (e.g. the aggregated table's 52rem) overrides this. Below the floor it scrolls. */ .table-scroll > table { min-width: 40rem; } /* Content links — make links obvious everywhere EXCEPT the menu bar. The nav, banner and footer live outside
, so scoping to `main` leaves them untouched. Buttons/chips rendered as are excluded so they keep their BeerCSS look. */ main.responsive a:not(.button):not(.chip):not(.nav-link):not([role="button"]) { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } main.responsive a:not(.button):not(.chip):not(.nav-link):not([role="button"]):hover { text-decoration-thickness: 2px; } /* External links get a small outward arrow so they're distinguishable. */ main.responsive a[href^="http"]:not(.button):not(.chip):not([role="button"])::after { content: " \2197"; /* ↗ */ font-size: 0.85em; line-height: 0; vertical-align: baseline; } /* Site banner — full-width strip ABOVE the menu. BeerCSS makes a grid and pins nav.top to row 1, so we place the banner in row 1 (spanning all columns) and push the sticky nav to row 2. Scoped with :has() so pages without a banner keep the nav in its default row. */ .site-banner { grid-column: 1 / -1; grid-row: 1; width: 100%; line-height: 0; } body:has(.site-banner) nav.top { grid-row: 2; } .site-banner-img { /* Show the full image (no cropping). Natural aspect ratio; cap height on very tall images with contain-fit letterboxing. */ display: block; width: 100%; height: auto; max-height: 380px; object-fit: contain; object-position: center; } /* Top nav */ nav.top { border-bottom: 3px solid var(--primary); gap: 0.35rem; align-items: center; /* Span the full body-grid width like the banner does — BeerCSS otherwise drops the bar into the main column, leaving a ~230px gap on the left (a reserved drawer column) that pushes the menu off-centre. */ grid-column: 1 / -1; /* Centre the menu in the bar (aligns with the centred banner on wide screens). !important beats BeerCSS's justify-content:space-around; the mobile block overrides this back to flex-start. */ justify-content: center !important; } /* Per-item menu styling chosen in the admin (colour + bold). Targets the element AND its inner span/icon with !important so it reliably beats BeerCSS's