feat(hero): topic rotor + programme/SEO unification, pill-less wordmark - #331
Merged
Conversation
ryzizub
added a commit
that referenced
this pull request
Sep 4, 2026
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.
ryzizub
changed the title
ryzizub
force-pushed
the
agent/astro-engineer/devf-40
branch
from
September 8, 2026 21:44
2173708 to
5eb1b52
Compare
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>
logo-tight.png has zero horizontal inner margin (old asset had 83px/3.3% left bias, misaligning the wordmark ~15px off the DATE column edge). Width/sizes/clamp caps scaled down by 0.9345 across hero, Menu, Footer and LandingNotice so rendered logo size is unchanged.
ryzizub
force-pushed
the
agent/astro-engineer/devf-40
branch
from
September 8, 2026 22:04
5eb1b52 to
98c5285
Compare
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
aria-label) for SEO/screen readers, the rotor itself isaria-hidden; hover/focus holds the subject (SC 2.2.2),prefers-reduced-motionfalls back to a static two-column set.src/lib/topics.tsis now the single source for the topic set;ticker.ts'sEVENT_TOPICSderives from it, dropping the leftover product names (Android & Kotlin,Flutter & Dart). Homepage meta description names accessibility and the topic set, since the redesigned hero no longer spells them out visually.logo-tight.png, zero horizontal margin, no2026pill baked in) — width caps recalculated (0.9345x) across hero, Menu, Footer so rendered size is unchanged.Why
Design exploration for DEVF-40 landed on the topic set reading as the headline continuing, not a caption below the fold; the rotor keeps that read while returning the ~450px the static block cost. Wordmark change is a separate brand-asset swap bundled onto the same branch.
Follow-up
None outstanding — pill removal from the previous asset is resolved by the new wordmark.