-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: add Ash's new header illustration #642
Conversation
/cc @emplums: I started with a verbatim copy of the header from primer/components, but after introducing the global primer CSS it looks like I've had to set fontSize={2} explicitly on all of our links to bump it back up. The way I did this feels kinda yucky; would you have done it differently?
@@ -91,7 +90,7 @@ const SectionLink = withRouter(({href, router, ...rest}) => ( | |||
*/ | |||
const NavLink = withRouter(({href, router, ...rest}) => { | |||
return ( | |||
<Box mb={2}> | |||
<Box mt={2}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/cc @broccolini @emplums The spacing on primer/components is 3, but I bumped this back down to 2 because it seemed a bit too spacious. (Also, the top margin collapses with the <SectionLink mb={3}>
so that there isn't an extra 2x whitespace at the bottom of the lists to account for the section's padding. ✨ )
@@ -2,4 +2,4 @@ export const WCAG_AA = 4.5 | |||
export const WCAG_AAA = 7 | |||
export const MIN_CONTRAST_RATIO = WCAG_AAA | |||
|
|||
export const CONTENT_MAX_WIDTH = 932 | |||
export const CONTENT_MAX_WIDTH = 1012 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This matches the width={1012}
from primer/components' IndexHero
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cool cool cool
This replaces the intro text on the landing page with @ashygee's new image from #630 and starts to get the hero area and header looking more like Primer Components. I've also matched the side nav width and spacing so that it's easier to do apples-to-apples comparisons between the two. 🔍
Before
After
Primer Components (for reference)