From 03214885bceddf2b80110c43ff4024eea1e61562 Mon Sep 17 00:00:00 2001
From: Shawn Allen <shawn.allen@github.com>
Date: Wed, 9 Jan 2019 09:59:13 -0800
Subject: [PATCH] fix header link font sizes

/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?
---
 docs/src/Header.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/src/Header.js b/docs/src/Header.js
index c6db08c6..d75719d5 100644
--- a/docs/src/Header.js
+++ b/docs/src/Header.js
@@ -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">