About us link and style fixes (#613)

Author: Josep Martins

.changeset/forty-paws-yawn.md

@@ -0,0 +1,6 @@
+---
+'@primer/gatsby-theme-doctocat': patch
+---
+
+- Fix the primer navigation about link
+- Removes mono space font in the nav drawer + fontweight bold to match top left navigation

theme/src/components/header.js

@@ -147,7 +147,12 @@ function PrimerNavItems({siteMetadata, items, path}) {
       <UnderlineNav aria-label="main navigation" sx={{border: 'none'}}>
         {items.map((item, index) => {
           return (
-            <UnderlineNav.Link key={index} href={item.url} selected={item.url === siteMetadata.header.url + path}>
+            <UnderlineNav.Link
+              key={index}
+              href={item.url}
+              selected={item.url === siteMetadata.header.url + path}
+              sx={{fontSize: 2, lineHeight: 'condensed'}}
+            >
               {item.title}
             </UnderlineNav.Link>
           )

theme/src/components/nav-drawer.js

@@ -60,7 +60,7 @@ function NavDrawer({isOpen, onDismiss}) {
             }}
           >
             <Box sx={{py: 3, pl: 4, pr: 3, alignItems: 'center', justifyContent: 'space-between', display: 'flex'}}>
-              <Link href="https://primer.style" sx={{fontFamily: 'mono', color: 'inherit'}}>
+              <Link href="https://primer.style" sx={{fontWeight: 'bold', color: 'inherit'}}>
                 Primer
               </Link>
               <Button aria-label="Close" onClick={onDismiss}>
@@ -86,7 +86,7 @@ function NavDrawer({isOpen, onDismiss}) {
               <Link
                 as={GatsbyLink}
                 to="/"
-                sx={{display: 'inline-block', color: 'inherit', fontFamily: 'mono', mx: 4, mt: 4}}
+                sx={{display: 'inline-block', color: 'inherit', fontWeight: 'bold', mx: 4, mt: 4}}
               >
                 {siteMetadata.title}
               </Link>
@@ -111,7 +111,8 @@ function PrimerNavItems({items}) {
           borderRadius: 0,
           borderTopWidth: index !== 0 ? 1 : 0,
           borderColor: 'border.muted',
-          p: 4,
+          px: 4,
+          py: 3,
           borderStyle: 'solid'
         }}
       >

theme/src/primer-nav.yml

@@ -1,4 +1,4 @@
 - title: Brand
   url: https://primer.style/brand
 - title: About
-  url: https://primer.style/design/guides/about
+  url: https://primer.style/design/about