Skip to content
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

Merged
merged 11 commits into from
Jan 9, 2019
Merged

Conversation

shawnbot
Copy link
Contributor

@shawnbot shawnbot commented Jan 9, 2019

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

image

After

image

Primer Components (for reference)

image

/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?
@shawnbot shawnbot changed the title [WIP] docs: add Ash's new header illustration docs: add Ash's new header illustration Jan 9, 2019
@@ -91,7 +90,7 @@ const SectionLink = withRouter(({href, router, ...rest}) => (
*/
const NavLink = withRouter(({href, router, ...rest}) => {
return (
<Box mb={2}>
<Box mt={2}>
Copy link
Contributor Author

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
Copy link
Contributor Author

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.

Copy link
Member

@jonrohan jonrohan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool cool cool

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants