fix: remove intro animation from masthead and nav#158
Merged
maxandersen merged 3 commits intoMay 14, 2026
Merged
Conversation
The opacity:0→1 intro animation with fill-mode:both causes content to be invisible until the animation fires. On Windows and with prefers-reduced-motion, this can leave the nav and title clipped or partially hidden — 'AppStore' renders as '.ppStore', hero title gets cut off on the left. Completes the animation removal started in the perf PR (which removed it from #main and .page__hero but missed masthead and nav).
|
🙈 The PR is closed and the preview is expired. |
The masthead HTML had greedy nav structure (.visible-links, .hidden-links, .greedy-nav__toggle) but no JavaScript to actually move overflowing items into the hamburger dropdown. On narrow screens/Windows, nav items were silently clipped by overflow:hidden. - Add public/assets/js/greedy-nav.js that measures item widths on load and moves overflow items to the dropdown - Constrain search input width (10em, min 6em) so nav links get more space - Toggle button appears/disappears based on available width - Dropdown opens on click, closes on outside click
Check total width against available space first. Only subtract toggle button reserve when items actually need to be hidden.
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.
The
opacity:0→1intro animation withfill-mode:bothcauses content to be invisible until the animation fires. On Windows and withprefers-reduced-motion, this can leave the nav and title clipped or partially hidden — 'AppStore' renders as '.ppStore', hero title gets cut off on the left.Completes the animation removal started in #157 (which removed it from
#mainand.page__herobut missed masthead and nav).