From 169049bd3d8d43ad412e20b842144a04a97ac365 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Wed, 19 Jul 2023 10:19:21 -0400
Subject: [PATCH] Base layout design updates (#605)

* updates base page layout to match updated designs

* adds changeset
---
 .changeset/slow-cycles-search.md | 5 +++++
 theme/src/components/heading.js  | 5 ++++-
 theme/src/components/layout.js   | 8 +++++---
 3 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/slow-cycles-search.md

diff --git a/.changeset/slow-cycles-search.md b/.changeset/slow-cycles-search.md
new file mode 100644
index 00000000..c9a4a806
--- /dev/null
+++ 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
index b026a90a..2a99b06e 100644
--- a/theme/src/components/heading.js
+++ b/theme/src/components/heading.js
@@ -59,7 +59,7 @@ 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')};
 `
 
@@ -67,14 +67,17 @@ 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
index 1b1d6cd8..9013d271 100644
--- a/theme/src/components/layout.js
+++ b/theme/src/components/layout.js
@@ -91,7 +91,7 @@ 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,
@@ -99,7 +99,7 @@ function Layout({children, pageContext, path}) {
               }}
               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