fix(landing): keep hero shots in flow on narrow screens - #14
Merged
Merged
Conversation
On the reader hero the floating iPhone shot is ~1.6x taller than the landscape Mac main shot. Below 1024px the absolute bottom:-9% anchor pushes its top edge above the heroShots container, covering the App Store button and version chips, and its bottom edge overlaps the gallery tabs below. Stack both shots in flow (iPhone left, Mac right, bottom-aligned with a slight overlap) from the 1024px breakpoint down, and sync the sizes attributes with the rendered widths. Fixes kmworks/kmworks.github.io#2
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.
Problem
On the reader landing page (
/reader/), the hero screenshot composition breaks on screens ≤1024px (kmworks/kmworks.github.io#2):.shotMain, landscape, short). The iPhone shot (.shotFloat) is absolutely anchored atbottom: -9%and is ~1.6x taller than the container, so its top edge extends above the container and covers the App Store button and the iOS/macOS/tvOS version chips.Fix
From the 1024px breakpoint down, stack both shots in flow instead of absolute positioning: iPhone on the left, Mac on the right, bottom-aligned, with a slight overlap (
margin-right: -8%+z-index) to keep the layered look. The container now sizes to both shots, so nothing can cover the text or the sections below.Also synced the
sizesattributes on both landing pages with the rendered widths (74vw / 32vw), and dropped the now-dead ≤640px.shotFloatoverride.Desktop (>1024px) is unchanged.
Verification
pnpm typecheck && pnpm build && pnpm exec nimbus-docs check && pnpm lint:docs— all green/reader/and/at iPhone 14 Pro (393px) and iPad mini (768px) in device emulation: buttons, chips, and gallery tabs no longer covered; composition intactFixes kmworks/kmworks.github.io#2