refactor(home): place hero taglines above the title#526
Conversation
Move the positioning pills to the top of the hero block, immediately above the H1 so they read as an eyebrow line and align with the Kubernetes Certified logo on the right. Restore the Get started button to its original spot inside the description column. Signed-off-by: tym83 <6355522@gmail.com>
✅ Deploy Preview for cozystack ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 👉 Get your free trial and get 200 agent minutes per Slack user (a $50 value). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request reorders the hero section elements in the HTML template, placing taglines above the title and subtitle. Corresponding SCSS changes adjust the padding and margins to accommodate this new layout, specifically setting a 50px top padding for taglines and removing top padding from the title when it follows taglines. A review comment suggests using a SCSS variable for the 50px offset to improve maintainability, as this hardcoded value is now used in multiple locations.
| list-style: none; | ||
| padding: 0; | ||
| margin: 1rem 0 0; | ||
| padding: 50px 0 0; |
There was a problem hiding this comment.
The value 50px is now hardcoded in three separate locations in this file (lines 52, 66, and 95) to ensure the hero content (either the title or the taglines) aligns vertically with the Kubernetes logo on the right. To improve maintainability and prevent alignment issues if this spacing needs to change in the future, consider defining a single SCSS variable for this offset.
1 participant
Follow-up to #524.
What
Move the three positioning taglines from below the H1 to above it, so they read as an eyebrow line at the very top of the hero. Restore the
Get startedbutton to its original spot inside the description column (it had not actually moved onmain, but this PR keeps the layout explicit).Visual order on the homepage becomes:
Get startedCTAWhy
After #524 landed, the pills sat between the H1 and the description, which broke the natural reading rhythm — the headline was no longer the first thing the eye lands on. Moving the pills above the title:
Implementation
layouts/shortcodes/blocks/hero.html: rendertaglinesblock immediately before<h1>inside the title columnassets/scss/blocks/_hero.scss:.hero-taglinesget thepadding-top: 50pxthat previously lived on<h1>, so they align with the K8s Certified logo.hero-taglines + h1 { padding-top: 0 }keeps the H1 tight under the pills when the taglines are present, but leaves the original H1 spacing intact for any future hero usage without taglinesPreview
Verified with
hugo server— pills render aligned with the K8s logo on desktop, wrap to multiple lines on mobile; H1 sits tight beneath them; rest of the homepage (benefits, features, community) unchanged. A Netlify deploy preview will be available on this PR.