feat(hero): topic set under the statement, compact countdown - #331
Open
ryzizub wants to merge 5 commits into
Open
feat(hero): topic set under the statement, compact countdown#331ryzizub wants to merge 5 commits into
ryzizub wants to merge 5 commits into
Conversation
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.
QA on #331 found six mock deviations: mobile hero overflowed the fold (the running ticker peeked under it), the topic set sat on the detective's hat/shoulder on phone, "near Prague" survived into the poster crop, the countdown printed a leading zero (055d), the nav-toggle kept its box on the first screen, and the desktop block sat ~100px low with air split evenly instead of pooled above the mark. - Mobile hero back to 100svh; "Stay in the loop" hidden on phone frees the height that previously forced auto-height (and the ticker peek). - HeroBackground gets an opt-in `mobileZoom` prop (background-size); homepage sets `auto 130%` + repositioned focus to clear the figure. - Drop the "near Prague" sub-label (dead in the poster layout). - Countdown days no longer zero-pads; width is reserved via `min-width: 3ch` so the 100→99 rollover doesn't shift the suffix. - Home hero's nav-toggle loses its border in the transparent bar state. - hero-inner bottom-sets on desktop so leftover height pools above the mark instead of splitting evenly top/bottom.
…ountdown - Replace the below-statement topic set with a single rotating subject in a fixed-width mono slot (2.6s cycle, sequential out-then-in). All five topics stay in the DOM at all times (aria-label on the group) for SEO and screen readers; the rotating slot itself is aria-hidden. Hover or keyboard focus on the group holds the current subject (SC 2.2.2), and `prefers-reduced-motion` unstacks the slot into a static two-column set instead of starting the rotation. - Re-hang the plate: HeroBackground gets opt-in `width`/`size`/`tightMask` props; the homepage widens the photo to 74%, scales it up, and shortens the left-to-right dissolve so the bridge and castle read instead of flat black. The statement's "back." nudges onto the figure's shoulder instead of stopping beside him. - Hero column hangs from the top edge on desktop (wordmark under the nav) instead of centering in the leftover height — the rotor freed ~450px that used to sit as dead air above the wordmark. Phone keeps the bottom-set rule the mobile-fold fix depends on. - Footing strip: date/place cluster from the left edge of the measure, the countdown closes the right edge (flex `space-between` instead of a 3-column grid); date renders as `30 OCT 2026`. - Countdown gets a `showSeconds` prop; the hero drops seconds entirely (`54D 10H 05M`) and slows its own tick to 15s once it no longer needs to redraw every second. - "Stay in the loop"'s hit area stretches to match the primary button's block on desktop; its underline is carried by the label itself so it stops at the last glyph instead of trailing past the tracked-out mono. Follow-up: the `2026` pill next to the wordmark is baked into `logo.png` (brand asset) — cutting it needs a new asset from design, not a CSS change.
New logo.png drops the 2026 pill (5:1 -> 4.2:1 intrinsic ratio). Width caps scaled by 0.84 across hero, Menu, Footer and LandingNotice so the wordmark renders at the same height instead of growing 19%. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
src/lib/topics.tsis the single source for the set;src/lib/ticker.ts'sEVENT_TOPICSnow derives from it, dropping the leftover product names (Android & Kotlin,Flutter & Dart).Countdowngets acompactprop: real suffix text per unit (069d 22h 43m 21s), not a CSS::aftertrick, and needs no:global()reach-in — it's the component's own module scope.HeroBackground's unmotivated lower-left red bloom is gone; the plate's only light source (the lamp, upper-right) is the only wash left. This affects every page's hero, not just the home page.42% 88%(was38% center) to clear the figure under the new topic block.Why
Design exploration for DEVF-40 (25 variants,
/vx/v4–/vx/v16) landed on v16: the topic set as the statement's own lines reads as the headline continuing, not a caption bolted on below the fold.Follow-up
2026pill is baked intologo.png— out of scope here (brand asset).