From d25aaeab13e4f8003537e562fb4eceef80831b5a Mon Sep 17 00:00:00 2001
From: lbaker <lizbaker.pdx@gmail.com>
Date: Tue, 16 Jun 2020 13:23:09 -0700
Subject: [PATCH 1/6] chore: Remove breadcrumb bar and style duration

---
 src/components/BreadcrumbBar.module.scss | 17 -----------------
 src/templates/GuideTemplate.js           | 10 ++--------
 src/templates/GuideTemplate.module.scss  | 18 ++++++++++++++++++
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/components/BreadcrumbBar.module.scss b/src/components/BreadcrumbBar.module.scss
index 7cad80a73..04a696b72 100644
--- a/src/components/BreadcrumbBar.module.scss
+++ b/src/components/BreadcrumbBar.module.scss
@@ -38,20 +38,3 @@
     background-position: center center;
   }
 }
-
-.duration {
-  color: var(--color-neutrals-600);
-
-  &:before {
-    content: '';
-    display: inline-block;
-    width: 1.1rem;
-    height: 1.1rem;
-    margin-right: 0.5rem;
-    vertical-align: bottom;
-    background-image: url('../images/clock.svg');
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center center;
-  }
-}
diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js
index 921bdef0e..fcfb42255 100644
--- a/src/templates/GuideTemplate.js
+++ b/src/templates/GuideTemplate.js
@@ -5,16 +5,12 @@ import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { MDXProvider } from '@mdx-js/react';
 
 import Layout from '../components/Layout';
-import BreadcrumbBar from '../components/BreadcrumbBar';
 import Video from '../components/Video';
 import Step from '../components/Step';
 import Steps from '../components/Steps';
 import Intro from '../components/Intro';
 import SEO from '../components/Seo';
 import styles from './GuideTemplate.module.scss';
-
-import createBreadcrumbs from '../utils/create-breadcrumbs';
-import pages from '../data/sidenav.json';
 import CodeSnippet from '../components/CodeSnippet';
 
 const components = {
@@ -28,14 +24,12 @@ const components = {
 const GuideTemplate = ({ data }) => {
   const { mdx } = data;
   const { frontmatter, body } = mdx;
-  const { title, description } = frontmatter;
-
-  const crumbs = createBreadcrumbs(frontmatter.path, pages);
+  const { title, description, duration } = frontmatter;
 
   return (
     <Layout>
       <SEO title={title} description={description} />
-      <BreadcrumbBar crumbs={crumbs} duration={frontmatter.duration} />
+      <div className={styles.duration}>{duration}</div>
       <h1>{title}</h1>
       <div className={styles.mdxContainer}>
         <MDXProvider components={components}>
diff --git a/src/templates/GuideTemplate.module.scss b/src/templates/GuideTemplate.module.scss
index 4c11e3781..7abe56667 100644
--- a/src/templates/GuideTemplate.module.scss
+++ b/src/templates/GuideTemplate.module.scss
@@ -4,3 +4,21 @@
     line-height: 1;
   }
 }
+
+.duration {
+  color: var(--color-neutrals-600);
+  text-align: right;
+
+  &:before {
+    content: '';
+    display: inline-block;
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-right: 0.5rem;
+    vertical-align: bottom;
+    background-image: url('../images/clock.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+}

From bf0181abb0def7b898277d89bf7a6e1b355199d1 Mon Sep 17 00:00:00 2001
From: lbaker <lizbaker.pdx@gmail.com>
Date: Tue, 16 Jun 2020 14:28:36 -0700
Subject: [PATCH 2/6] chore: Add pagetitle component and mdx container styles

---
 src/templates/GuideTemplate.js          |  3 ++-
 src/templates/GuideTemplate.module.scss | 10 ++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js
index fcfb42255..77458b794 100644
--- a/src/templates/GuideTemplate.js
+++ b/src/templates/GuideTemplate.js
@@ -5,6 +5,7 @@ import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { MDXProvider } from '@mdx-js/react';
 
 import Layout from '../components/Layout';
+import PageTitle from '../components/PageTitle';
 import Video from '../components/Video';
 import Step from '../components/Step';
 import Steps from '../components/Steps';
@@ -30,7 +31,7 @@ const GuideTemplate = ({ data }) => {
     <Layout>
       <SEO title={title} description={description} />
       <div className={styles.duration}>{duration}</div>
-      <h1>{title}</h1>
+      <PageTitle>{title}</PageTitle>
       <div className={styles.mdxContainer}>
         <MDXProvider components={components}>
           <MDXRenderer>{body}</MDXRenderer>
diff --git a/src/templates/GuideTemplate.module.scss b/src/templates/GuideTemplate.module.scss
index 7abe56667..a778b6723 100644
--- a/src/templates/GuideTemplate.module.scss
+++ b/src/templates/GuideTemplate.module.scss
@@ -1,4 +1,14 @@
 .mdxContainer {
+  margin-top: 2rem;
+  ul {
+    padding-left: 30px;
+    line-height: 1.6;
+  }
+
+  li {
+    margin-bottom: 1rem;
+  }
+
   ul li ul {
     margin-top: 1rem;
     line-height: 1;

From 33c8287daf4b087e05c32f7a1bfbf58164b4cab5 Mon Sep 17 00:00:00 2001
From: lbaker <lizbaker.pdx@gmail.com>
Date: Tue, 16 Jun 2020 16:22:36 -0700
Subject: [PATCH 3/6] chore: Add clock icon to feather component

---
 src/components/FeatherIcon.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
index 5143b4793..06a209f51 100644
--- a/src/components/FeatherIcon.js
+++ b/src/components/FeatherIcon.js
@@ -25,6 +25,12 @@ const ICONS = {
       <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
     </>
   ),
+  clock: (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
+    </>
+  ),
 };
 
 FeatherIcon.propTypes = {

From fd35e02befe1d452af2d1b4b3d2a48700921b403 Mon Sep 17 00:00:00 2001
From: lbaker <lizbaker.pdx@gmail.com>
Date: Tue, 16 Jun 2020 16:23:40 -0700
Subject: [PATCH 4/6] chore: CSS and markup refactor

---
 src/components/SideBySide.module.scss   |  3 ++
 src/templates/GuideTemplate.js          | 10 ++++-
 src/templates/GuideTemplate.module.scss | 53 ++++++++++++++++---------
 3 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/components/SideBySide.module.scss b/src/components/SideBySide.module.scss
index 84ce66400..6b73e7724 100644
--- a/src/components/SideBySide.module.scss
+++ b/src/components/SideBySide.module.scss
@@ -2,6 +2,9 @@
   display: grid;
   grid-template-columns: 50% 50%;
   grid-gap: 1rem;
+  p:last-child {
+    margin-bottom: 0;
+  }
 
   @media (max-width: 760px) {
     grid-template-columns: 100%;
diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js
index 77458b794..a3ad81420 100644
--- a/src/templates/GuideTemplate.js
+++ b/src/templates/GuideTemplate.js
@@ -5,6 +5,7 @@ import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { MDXProvider } from '@mdx-js/react';
 
 import Layout from '../components/Layout';
+import FeatherIcon from '../components/FeatherIcon';
 import PageTitle from '../components/PageTitle';
 import Video from '../components/Video';
 import Step from '../components/Step';
@@ -30,8 +31,13 @@ const GuideTemplate = ({ data }) => {
   return (
     <Layout>
       <SEO title={title} description={description} />
-      <div className={styles.duration}>{duration}</div>
-      <PageTitle>{title}</PageTitle>
+      <div className={styles.header}>
+        <PageTitle>{title}</PageTitle>
+        <div className={styles.duration}>
+          <FeatherIcon name="clock" className={styles.clock} />
+          {duration}
+        </div>
+      </div>
       <div className={styles.mdxContainer}>
         <MDXProvider components={components}>
           <MDXRenderer>{body}</MDXRenderer>
diff --git a/src/templates/GuideTemplate.module.scss b/src/templates/GuideTemplate.module.scss
index a778b6723..201f3c70d 100644
--- a/src/templates/GuideTemplate.module.scss
+++ b/src/templates/GuideTemplate.module.scss
@@ -1,8 +1,27 @@
 .mdxContainer {
-  margin-top: 2rem;
-  ul {
-    padding-left: 30px;
-    line-height: 1.6;
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  code {
+    padding: 0.125rem;
+    background: var(--color-neutrals-200);
+    border-radius: 2px;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+  h1,
+  h2 {
+    &:not(:first-child) {
+      margin-top: 2rem;
+    }
+  }
+
+  h3,
+  h4 {
+    margin-top: 1rem;
   }
 
   li {
@@ -15,20 +34,18 @@
   }
 }
 
-.duration {
-  color: var(--color-neutrals-600);
-  text-align: right;
+.header {
+  display: flex;
+  margin-bottom: 2rem;
+  align-items: center;
+  justify-content: space-between;
 
-  &:before {
-    content: '';
-    display: inline-block;
-    width: 1.1rem;
-    height: 1.1rem;
-    margin-right: 0.5rem;
-    vertical-align: bottom;
-    background-image: url('../images/clock.svg');
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center center;
+  .duration {
+    display: flex;
+    align-items: center;
+    color: var(--color-neutrals-600);
+    .clock {
+      margin-right: 0.25rem;
+    }
   }
 }

From 6ed83c58fdd3fdff443770db0c25fbac7241ffb9 Mon Sep 17 00:00:00 2001
From: lbaker <lizbaker.pdx@gmail.com>
Date: Tue, 16 Jun 2020 16:58:34 -0700
Subject: [PATCH 5/6] chore: Add in breadcrumb provider

---
 src/templates/GuideTemplate.js | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js
index 05416e963..970de2c32 100644
--- a/src/templates/GuideTemplate.js
+++ b/src/templates/GuideTemplate.js
@@ -13,6 +13,8 @@ import Steps from '../components/Steps';
 import Intro from '../components/Intro';
 import SEO from '../components/Seo';
 import { BreadcrumbContext } from '../components/BreadcrumbContext';
+import createBreadcrumbs from '../utils/create-breadcrumbs';
+import pages from '../data/sidenav.json';
 import styles from './GuideTemplate.module.scss';
 import CodeSnippet from '../components/CodeSnippet';
 
@@ -28,23 +30,26 @@ const GuideTemplate = ({ data }) => {
   const { mdx } = data;
   const { frontmatter, body } = mdx;
   const { title, description, duration } = frontmatter;
+  const crumbs = createBreadcrumbs(frontmatter.path, pages);
 
   return (
-    <Layout>
-      <SEO title={title} description={description} />
-      <div className={styles.header}>
-        <PageTitle>{title}</PageTitle>
-        <div className={styles.duration}>
-          <FeatherIcon name="clock" className={styles.clock} />
-          {duration}
+    <BreadcrumbContext.Provider value={crumbs}>
+      <Layout>
+        <SEO title={title} description={description} />
+        <div className={styles.header}>
+          <PageTitle>{title}</PageTitle>
+          <div className={styles.duration}>
+            <FeatherIcon name="clock" className={styles.clock} />
+            {duration}
+          </div>
         </div>
-      </div>
-      <div className={styles.mdxContainer}>
-        <MDXProvider components={components}>
-          <MDXRenderer>{body}</MDXRenderer>
-        </MDXProvider>
-      </div>
-    </Layout>
+        <div className={styles.mdxContainer}>
+          <MDXProvider components={components}>
+            <MDXRenderer>{body}</MDXRenderer>
+          </MDXProvider>
+        </div>
+      </Layout>
+    </BreadcrumbContext.Provider>
   );
 };
 

From 8d7087b4dd156878c99f80dafb0e2599714b7336 Mon Sep 17 00:00:00 2001
From: lbaker <lizbaker.pdx@gmail.com>
Date: Tue, 16 Jun 2020 16:59:12 -0700
Subject: [PATCH 6/6] chore: De-nest CSS

---
 src/templates/GuideTemplate.module.scss | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/templates/GuideTemplate.module.scss b/src/templates/GuideTemplate.module.scss
index 201f3c70d..7c8d923e6 100644
--- a/src/templates/GuideTemplate.module.scss
+++ b/src/templates/GuideTemplate.module.scss
@@ -39,13 +39,14 @@
   margin-bottom: 2rem;
   align-items: center;
   justify-content: space-between;
+}
 
-  .duration {
-    display: flex;
-    align-items: center;
-    color: var(--color-neutrals-600);
-    .clock {
-      margin-right: 0.25rem;
-    }
-  }
+.duration {
+  display: flex;
+  align-items: center;
+  color: var(--color-neutrals-600);
+}
+
+.clock {
+  margin-right: 0.25rem;
 }