feat(hero): no-scroll layout — swap CLI card and downloads#25
Merged
Conversation
…trip below Reworks the hero so it fits within a single viewport (no scroll) on standard laptop heights, and swaps the two requested elements: - Copy + the platform-aware DownloadCTA now sit together on the LEFT. - The interactive 'coven cli' runtime card moves to the RIGHT. - The 4 core-capability cells are pulled OUT of the copy column into a slim full-width strip beneath the two-column main row (.hero-main), so neither column grows tall enough to force scrolling. Height work: - .hero is a centered flex column capped at calc(100vh - 72px) with tightened vertical rhythm (smaller headline clamp, trimmed margins/padding). - Hero collapses from ~1240px to ~640px: fits at 1440x900, 1366x768, and 1280x720 (verified, ~30px breathing room below the strip at the tight case). DownloadCTA tidy: - Button labels shortened (macOS / Windows / Linux / iOS Beta) to keep the row a stable single line; kept the 'All releases & checksums' utility link. - Dropped the redundant 'install the CLI' affordance — the coven cli card in the hero already demos the CLI — and removed the now-dead CSS/const/icon. - Detected platform is emphasized in place (violet) instead of being moved and spanned full-width, so the download row's height is deterministic. Mobile preserved: copy leads, CLI card below, feature grid stacks (2-col at <=900px, single column at <=520px per #24). No horizontal overflow (body keeps overflow-x:hidden; flex children min-width:0). Verified content fits with no right-edge clipping. Retitles/replaces the earlier column-mirror attempt (#23) with the intended element swap.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the landing-page hero to “Layout C” so the hero fits within a single viewport (no scroll) while swapping the CLI runtime card and the platform-aware download CTA into the intended left/right positions, and moving the 4 capability cells into a full-width strip beneath the main row.
Changes:
- Refactors hero layout into a flex-column section with a 2-column
.hero-mainrow plus a slim full-width.feature-gridstrip below. - Tightens hero typography/spacing and makes the DownloadCTA buttons a compact 4-across row to keep hero height predictable.
- Adjusts platform-detection behavior for the DownloadCTA primary styling (in-place emphasis rather than DOM reordering).
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/styles/global.css | Implements Layout C hero structure + compact DownloadCTA/feature strip styling for no-scroll behavior. |
| src/scripts/main.js | Updates download CTA “primary” behavior to stop reordering the detected button in the grid. |
| src/components/Hero.astro | Restructures hero markup into .hero-main (copy+CTA + CLI card) and moves feature grid below as a strip. |
| src/components/DownloadCTA.astro | Removes the CLI install secondary affordance and shortens per-platform button labels for a 4-across row. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+308
to
312
| if (primary && detected !== 'ios') { | ||
| // Emphasize the detected platform in place (violet fill). We no longer | ||
| // move it or span it full-width — the download row stays a stable | ||
| // single line of four so the hero height is predictable (no-scroll). | ||
| primary.classList.add('is-primary'); |
Comment on lines
+1089
to
+1092
| /* Compact hero: the per-platform sub-line ('.dmg · signed', etc.) is hidden | ||
| on the standard buttons to keep the download grid to two slim rows and | ||
| the whole hero within one viewport. It stays visible on the detected | ||
| (is-primary) button, which gets the full rich treatment below. */ |
| .download-btn.is-primary .download-btn-label { font-size: 15px; } | ||
| .download-btn.is-primary .download-btn-sub { color: rgba(255,255,255,0.78); } | ||
| .download-btn.is-primary .download-btn-label { color: #fff; } | ||
| .download-btn.is-primary .download-btn-sub { color: rgba(255,255,255,0.78); display: none; } |
Comment on lines
68
to
70
| <p class="download-sub" data-download-sub> | ||
| Native apps and the CLI. We detected your platform — your one-click | ||
| download is highlighted below. | ||
| Native apps and the CLI — your platform's build is highlighted. | ||
| </p> |
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
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.
The intended version of the hero change (supersedes the column-mirror in #23).
What you asked for
Result — Layout C
No-scroll (verified)
Hero collapses from ~1240px → ~640px. Measured + screenshotted:
.herois a centered flex column capped atcalc(100vh - 72px)with tightened vertical rhythm (smaller headline clamp, trimmed margins/padding).DownloadCTA tidy
Mobile preserved
Copy leads → CLI card below → feature grid stacks (2-col ≤900px, single column ≤520px per #24). No horizontal overflow (
overflow-x:hiddenon body; flex childrenmin-width:0). Verified content fits with no right-edge clipping.Verification note
Chrome headless pins its viewport to a ~485px minimum width, which made earlier mobile screenshots look clipped when they weren't. Confirmed via DOM measurement (
document overflow=0, no content element exceeds the viewport) + a true-width render that the card/lede/features all fit. Trusted the measurement + clean render over the misleading canvas-crop.