Base layout design updates (#605)

* updates base page layout to match updated designs * adds changeset
primer · Jul 19, 2023 · 169049b · 169049b
1 parent c4eea64
commit 169049b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/.changeset/slow-cycles-search.md b/.changeset/slow-cycles-search.md
@@ -0,0 +1,5 @@
+---
+'@primer/gatsby-theme-doctocat': patch
+---
+
+Updates the base layout with latest designs.
diff --git a/theme/src/components/heading.js b/theme/src/components/heading.js
@@ -59,22 +59,25 @@ function MarkdownHeading({children, ...props}) {
 
 const StyledH1 = styled(StyledHeading).attrs({as: 'h1'})`
   padding-bottom: ${themeGet('space.2')};
-  font-size: ${themeGet('fontSizes.5')};
+  font-size: ${themeGet('fontSizes.7')};
   border-bottom: 1px solid ${themeGet('colors.border.default')};
 `
 
 const StyledH2 = styled(StyledHeading).attrs({as: 'h2'})`
   padding-bottom: ${themeGet('space.2')};
   font-size: ${themeGet('fontSizes.4')};
   border-bottom: 1px solid ${themeGet('colors.border.default')};
+  font-weight: ${themeGet('fontWeights.semibold')};
 `
 
 const StyledH3 = styled(StyledHeading).attrs({as: 'h3'})`
   font-size: ${themeGet('fontSizes.3')};
+  font-weight: ${themeGet('fontWeights.semibold')};
 `
 
 const StyledH4 = styled(StyledHeading).attrs({as: 'h4'})`
   font-size: ${themeGet('fontSizes.2')};
+  font-weight: ${themeGet('fontWeights.semibold')};
 `
 
 const StyledH5 = styled(StyledHeading).attrs({as: 'h5'})`

diff --git a/theme/src/components/layout.js b/theme/src/components/layout.js
@@ -91,15 +91,15 @@ function Layout({children, pageContext, path}) {
               sx={{
                 width: 220,
                 flex: '0 0 auto',
-                marginLeft: 6,
+                marginLeft: [null, 7, 8, 9],
                 display: ['none', null, 'block'],
                 position: 'sticky',
                 top: HEADER_HEIGHT + 48,
                 maxHeight: `calc(100vh - ${HEADER_HEIGHT}px - 48px)`
               }}
               css={{gridArea: 'table-of-contents', overflow: 'auto'}}
             >
-              <Heading as="h3" sx={{fontSize: 2, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
+              <Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold', pl: 3}} id="toc-heading">
                 On this page
               </Heading>
               <TableOfContents aria-labelledby="toc-heading" items={pageContext.tableOfContents.items} />
@@ -117,7 +117,9 @@ function Layout({children, pageContext, path}) {
                   : null}
               </Breadcrumbs>
               <Box sx={{alignItems: 'center', display: 'flex'}}>
-                <Heading as="h1">{title}</Heading>{' '}
+                <Heading as="h1" sx={{fontSize: 7}}>
+                  {title}
+                </Heading>
               </Box>
               {description ? <Box sx={{fontSize: 3, mb: 3}}>{description}</Box> : null}
               <Box