Story 2432: Hero Section Refactor#2476
Open
julioest wants to merge 14 commits into
Open
Conversation
The absolute-positioned header that overlays the hero was copy-pasted into four different page stylesheets. This pulls it up into one body.v3 rule in header.css, and adds a matching padding reservation so pages without a hero don't shift when the header leaves the flow. Heads up: this relies on the body carrying the v3 class, which it does when the v3 flag is active.
Hero backgrounds now cover the container with a left-to-right dark gradient so the headline stays legible over the artwork. The block is a fixed-height flex row with the foreground image anchored to the left, the community page centers its mascot instead, and the old full-bleed homepage override is gone. The redundant per-page header rules that these two pages still carried are dropped here too.
The views now own the hero foreground and background URLs instead of the templates hardcoding them, with hero_background_image_url added to the shared mock data. Heads up: the homepage and community heroes intentionally use each other's named assets (homepage pulls community-foreground, etc.), so the file names won't match the page they render on.
Drive hero fg/bg size and placement with --hero-fg-* / --hero-bg-* tokens redefined per breakpoint, replacing the hardcoded sizes and background-position values in the media queries. Homepage mascot centers on desktop and tablet, pins bottom-right on mobile.
Move community and release hero styling out of community.css and release-detail.css into heros.css as .hero-library--mascot and .hero-library--release, applied via a new extra_classes param on the library hero include. The hero no longer keys off page wrappers like .community-v3, and page CSS no longer reaches into it.
The homepage hero headline now wraps onto a deliberate three lines instead of flowing freely. Desktop and tablet break after "the" and "community."; mobile breaks differently, after "C++" and "by", via a second set of line breaks that swap in below 768px. I also dropped the tablet headline from 64px to 40px, since the full desktop size overflows once the install card is hidden on tablet. Worth knowing: the forced breaks apply to the default headline text only, so any page passing its own headline to the include still wraps naturally.
Home and community were sharing the foreground size and background-position tokens, so tuning one silently resized or repositioned the other. This splits them: each hero gets its own --hero-fg-{home,community} size, its own x-anchor, and its own --hero-bg-{home,community}-position. The community variant is renamed from --mascot to --community so the class reads by page instead of by visual gimmick. Home also gets a tunable horizontal nudge plus a max-width guard so the mascot stops running off-screen on tablet once it grows past the viewport. Community is restored to its original 488x416 / 350x300 sizing, which the shared tokens had been blowing up.
📝 WalkthroughWalkthroughThis PR refactors hero image asset handling and layout across the Boost website v3. It introduces a shared background image resource, consolidates header positioning into centralized v3 rules, builds a responsive CSS token system for hero layout, and updates templates to support mobile-specific images via picture elements and CSS class modifiers. ChangesHero assets and responsive layout refactor
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Serve a tightly-trimmed foreground on mobile via a <picture> source so it stops letterboxing on narrow screens, and pin it in normal flow to the bottom of the 600px hero with aspect-ratio sizing. Desktop and tablet are untouched (same image, same layout).
The home cow and community moose were stored under each other's filenames, so each view pointed at a wrong-named file to render the right art. I swapped the two foreground PNGs so the names match the contents, and repointed HomepageView and CommunityView accordingly.
Anchor the background low for the new taller room image, scale and reposition the cow on desktop, make the tablet foreground fluid so it scales with the viewport, pin it to the bottom on narrow mobile, and switch the mobile overlay to a top-darkening gradient.
Nudge the cow 10% to the right and move the mobile background focal point to 80% so the scene frames the way we want at phone widths.
Group the stylesheet into tokens, shared, home, library, and variants, with base rules before media queries in each hero, and consistent indentation. Drop a dead tablet rule that never applied. No visual change.
Reworks the community hero to the home-style treatment. The foreground mascots now use a wide contain box anchored bottom-right (driven by the --hero-fg-community-* tokens) instead of the old small fixed box, with per-tier sizing and position for desktop, tablet, and mobile, and the background is anchored low so the racks and floor sit behind them. Adds <picture> mobile-source support to the shared library hero template and wires a tightly-cropped mascot image for mobile via CommunityView, so the pair reads large on phones instead of tiny in the wide canvas. The community wrapper clips horizontal overflow so the oversized mobile mascot box never produces a scrollbar. Heads up: the swapped community art (foreground, taller background, mobile crop) lives in S3 and is gitignored, so this commit carries only the code. Those assets need uploading to all buckets before this merges, alongside the home assets already pending.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@static/css/v3/heros.css`:
- Around line 150-153: The CSS rule for .hero-home--no-image contains redundant
background declarations causing stylelint's
declaration-block-no-shorthand-property-overrides: remove the explicit
background-image: none declaration and keep the shorthand background: none (or
vice versa if you prefer the longhand), and apply the same change to the other
occurrence (the similar block at lines around 499-502) so no shorthand
immediately overrides a longhand.
In `@templates/v3/includes/_hero_home.html`:
- Line 16: The inline comment text for hero_image_url_mobile contains an
unescaped '<' in the string "<=767px" which triggers the HTMLHint
spec-char-escape rule; update the comment in
templates/v3/includes/_hero_home.html (the hero_image_url_mobile description) to
escape the character (e.g. replace "<" with "<") so the comment reads
"<=767px" and clears the linter.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 68055739-52df-48cc-a26b-05817f340585
📒 Files selected for processing (16)
ak/views.pycore/mock_data.pycore/views.pystatic/css/v3/auth-page.cssstatic/css/v3/community.cssstatic/css/v3/header.cssstatic/css/v3/heros.cssstatic/css/v3/library-subpage.cssstatic/css/v3/release-detail.cssstatic/css/v3/v3-homepage.csstemplates/v3/community.htmltemplates/v3/examples/_v3_example_section.htmltemplates/v3/homepage.htmltemplates/v3/includes/_hero_home.htmltemplates/v3/includes/_hero_library.htmltemplates/v3/release_detail.html
💤 Files with no reviewable changes (3)
- static/css/v3/auth-page.css
- static/css/v3/library-subpage.css
- static/css/v3/v3-homepage.css
Collaborator
Author
|
@rbbeeston here's the preview url https://hero-refactor-2432.ngrok.app/ |
CodeRabbit flagged two lint nits on the hero work. The no-image hero rules set background-image: none right before background: none, which trips stylelint's shorthand-override rule, so I dropped the redundant longhand. The mobile-image doc comments had a literal <=767px that HTMLHint rejects for the unescaped <, so I escaped it to <=767px in both hero includes.
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
templates/v3/includes/_hero_home.html (1)
43-43:⚠️ Potential issue | 🟠 Major | ⚡ Quick winRemove
loading="lazy"from both hero images (light and dark). Hero images are LCP elements and appear above the fold. Lazy loading defers their load and degrades Web Vitals. Useloading="eager"or omit the attribute on both the light (line 43) and dark (line 48)<img>tags.⚡ Proposed fix
- <img alt="" class="hero-home__img hero-home__img--light" src="{{ hero_light }}" loading="lazy" decoding="async"> + <img alt="" class="hero-home__img hero-home__img--light" src="{{ hero_light }}" decoding="async">- <img alt="" class="hero-home__img hero-home__img--dark" src="{{ hero_dark }}" loading="lazy" decoding="async"> + <img alt="" class="hero-home__img hero-home__img--dark" src="{{ hero_dark }}" decoding="async">🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@templates/v3/includes/_hero_home.html` at line 43, Remove lazy loading from the hero images: locate the two <img> tags with classes hero-home__img hero-home__img--light and hero-home__img hero-home__img--dark and either delete the loading="lazy" attribute or change it to loading="eager" so the LCP hero images load immediately (apply the same change to both light and dark hero <img> tags).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@templates/v3/includes/_hero_home.html`:
- Line 43: Remove lazy loading from the hero images: locate the two <img> tags
with classes hero-home__img hero-home__img--light and hero-home__img
hero-home__img--dark and either delete the loading="lazy" attribute or change it
to loading="eager" so the LCP hero images load immediately (apply the same
change to both light and dark hero <img> tags).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: bbbc25be-c786-4d8f-9d6d-8fdf27c479ca
📒 Files selected for processing (3)
static/css/v3/heros.csstemplates/v3/includes/_hero_home.htmltemplates/v3/includes/_hero_library.html
💤 Files with no reviewable changes (1)
- static/css/v3/heros.css
🚧 Files skipped from review as they are similar to previous changes (1)
- templates/v3/includes/_hero_library.html
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.
Issue: #2432
Refactors the v3 hero section on the homepage and community pages: centralizes the header overlay, rebuilds the hero as a tokenized, modifier-driven layout over a background image with a gradient, and moves the hero image URLs into the views.
Changes
body.v3 .headerrule with a padding reservation, removing the duplicated copies from the auth, library subpage, and release detail stylesheets.--community,--release, etc.) so page stylesheets no longer reach into hero internals.--hero-fg-*), background scale and focal point (--hero-bg-*), and the hero block height (--hero-library-block-height), each set once per breakpoint.<picture>.<picture>mobile-source support to the shared library hero template.heros.cssinto labeled sections (tokens, shared, home, library, variants), base rules before media queries, behavior-preserving.Risks
v3class.Screenshots
Homepage
Community
Self-review Checklist
Frontend
Summary by CodeRabbit
New Features
Improvements