Fix promo bar gap, article title spacing, and flat header icons#12
Merged
Conversation
…r icons Collapsed promo bar: the panel could not crush to zero, so the bar showed a tall orange band. The grid item carried the 32px padding, and a grid item's padding box is not collapsible by a 0fr track. Move the padding to an inner wrapper. The collapsed panel is now 0px and the bar is 39px. Article title spacing: titles sat flush against the nav. Add top padding to the title section. It now has breathing room below the header, like the live article. Header utility items: Chat now, help, and search rendered as a white pill and bordered circles. The live header draws these flat. Remove the pill and circle backgrounds so they are flat dark icons.
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
Commits
|
|
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.
Fix #11
Three visual fixes toward the live continentaltire.com, measured at 1440px.
Collapsed promo bar. The rebate panel could not crush to zero, so the collapsed bar showed a 103px orange band. The grid item carried the 32px padding. A grid item's padding box is not collapsible by a 0fr track. The padding moves to an inner wrapper. The collapsed bar is now 39px, and expand and collapse still work.
Article title spacing. The title sat flush against the nav. The title section gets top padding, so the headline has room below the header. The header to headline gap is now 40px, close to the live article.
Header utility icons. Chat now, help, and search rendered as a white pill and bordered circles. The live header draws these flat. The pill and circle backgrounds are removed, so the icons are flat and dark like live.
Testing: live-tested at 1440px on a local aem up server. Promo collapse height (39px), expand and re-collapse, article gap (40px), and flat header icons all verified. eslint and stylelint pass.
Test URLs:
Article before/after: