primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-28 04:43:05 +03:00
Code Issues Projects Releases Wiki Activity

fix header link font sizes

Browse Source 
/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?
This commit is contained in:
Shawn Allen 2019-01-09 09:59:13 -08:00
parent fcc274b364
commit 03214885bc
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/src/Header.js
View File

@ -10,22 +10,26 @@ const NavLink = withRouter(({href, router, ...rest}) => (
<NodeLink href={href} color="white" px={4} fontWeight={router.pathname === href ? 'bold' : null} {...rest} />
))
const HeaderText = props => <Text fontSize={2} {...props} />
const Header = props => (
<Sticky zIndex={100}>
<BoxShadow py={3} bg="gray.9" color="white" {...props}>
<Flex className="p-responsive" alignItems="center" justifyContent="space-between">
<Link ml={3} color="white" href="/css">
<Link href="/css" color="white" ml={3}>
<Flex alignItems="center" justifyContent="center">
<Octicon icon={MarkGithub} size="medium" />
<Text ml={3}>Primer CSS</Text>
<HeaderText ml={3}>Primer CSS</HeaderText>
</Flex>
</Link>
<Box display={['none', 'none', 'block']}>
<NavLink href="/css">Docs</NavLink>
<NavLink href="/css/getting-started" />
<NavLink href="/css/principles" />
<NavLink href="/css/tools" />
<NavLink href="/css/whats-new" />
<HeaderText>
<NavLink href="/css">Docs</NavLink>
<NavLink href="/css/getting-started" />
<NavLink href="/css/principles" />
<NavLink href="/css/tools" />
<NavLink href="/css/whats-new" />
</HeaderText>
</Box>
<Box display={['block', 'block', 'none']}>
<Link href="#sidenav">