From a7679c62f2ef5a2438f7709f82b184359b3408a6 Mon Sep 17 00:00:00 2001 From: Dominik Simonik Date: Fri, 4 Sep 2026 23:20:22 +0200 Subject: [PATCH 1/5] feat(hero): topic set under the statement, compact countdown suffix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The homepage hero gets the topic set as the statement's own third/fourth lines (5 topics, no product names — AI Agents, Generative UI, Cloud & Backends, Mobile & Web, Humans in Tech), a footing strip on one 3-column grid (date / place / clock), and a compact countdown suffix (069d 22h 43m 21s) instead of captioned stubs. - New src/lib/topics.ts is the single source for the set; ticker.ts's EVENT_TOPICS now derives from it, dropping the leftover product names (Android & Kotlin, Flutter & Dart). - Countdown gets a `compact` prop that renders real suffix text on each unit, not a stylesheet ::after trick, so it isn't invisible to anything that inspects the DOM text. - Header's "Tickets" CTA hides while the home hero's own "Get tickets" button is in view (bar still transparent), to avoid two routes to the same place on one screen. - HeroBackground loses its unmotivated lower-left red bloom — the plate's only light source is the lamp upper-right, so that's the only wash left. - Homepage meta description now names accessibility and the topic set, which the redesigned hero no longer spells out visually. --- src/components/Countdown.module.scss | 34 +++++++++ src/components/Countdown.tsx | 32 +++++--- src/components/HeroBackground.scss | 6 +- src/components/Menu.scss | 7 ++ src/lib/ticker.ts | 15 ++-- src/lib/topics.ts | 21 ++++++ src/pages/index.astro | 22 ++++-- src/pages/index.scss | 107 ++++++++++++++++++++++++--- 8 files changed, 206 insertions(+), 38 deletions(-) create mode 100644 src/lib/topics.ts diff --git a/src/components/Countdown.module.scss b/src/components/Countdown.module.scss index b61baf5c..37e39865 100644 --- a/src/components/Countdown.module.scss +++ b/src/components/Countdown.module.scss @@ -56,6 +56,40 @@ line-height: 1; } +// Compact — one line, unit letters as a suffix on the digits instead of a +// caption underneath: `069d 22h 43m 21s`. Used where the clock sits under a +// poster-scale statement and four captioned stubs would out-weigh it. +.countdownCompact { + gap: 0.55rem; + + // Sized to sit beside the footing strip's DATE/PLACE values, not tower + // over them — the full four-stub clock is display-scale on its own line; + // this one shares a row with the rest of the meta. + .value { + font-size: clamp(1.3rem, 1.75vw, 1.7rem); + } +} + +.unitCompact { + flex-direction: row; + align-items: baseline; + gap: 0.06em; + + .label { + font-family: var(--font-bebas-neue), sans-serif; + font-size: clamp(1rem, 1.4vw, 1.3rem); + letter-spacing: 0.02em; + text-transform: lowercase; + color: rgba(240, 237, 230, 0.5); + } +} + +@media (max-width: 600px) { + .countdownCompact .value { + font-size: 1.3rem; + } +} + @media (max-width: 600px) { .countdown { gap: 0.35rem; diff --git a/src/components/Countdown.tsx b/src/components/Countdown.tsx index 13c72c03..e3ecda55 100644 --- a/src/components/Countdown.tsx +++ b/src/components/Countdown.tsx @@ -25,16 +25,26 @@ function calcTimeLeft(): TimeLeft { }; } -const UNITS: { key: keyof TimeLeft; label: string }[] = [ - { key: 'days', label: 'Days' }, - { key: 'hours', label: 'Hrs' }, - { key: 'minutes', label: 'Min' }, - { key: 'seconds', label: 'Sec' }, +const UNITS: { key: keyof TimeLeft; label: string; suffix: string }[] = [ + { key: 'days', label: 'Days', suffix: 'd' }, + { key: 'hours', label: 'Hrs', suffix: 'h' }, + { key: 'minutes', label: 'Min', suffix: 'm' }, + { key: 'seconds', label: 'Sec', suffix: 's' }, ]; const INITIAL_TIME: TimeLeft = { days: '000', hours: '00', minutes: '00', seconds: '00' }; -export default function Countdown() { +interface Props { + /** + * `069d 22h 43m 21s` on one line instead of four labelled stubs separated + * by colons. The suffix is real rendered text on the unit, not a stylesheet + * `::after` — a generated-content suffix reads fine visually but is + * invisible to anything that inspects the DOM text. + */ + compact?: boolean; +} + +export default function Countdown({ compact = false }: Props) { const [time, setTime] = useState(INITIAL_TIME); useEffect(() => { @@ -54,13 +64,13 @@ export default function Countdown() { return ( <> Doors open on 30 October 2026 at 9:00 AM Central European Time. -