Merge pull request #162 from newrelic/liz/guide-template-styling

Guide template styling

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;
-  }
-}

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 = {

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%;

src/templates/GuideTemplate.js

@@ -5,17 +5,17 @@ import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { MDXProvider } from '@mdx-js/react';
 
 import Layout from '../components/Layout';
-import BreadcrumbBar from '../components/BreadcrumbBar';
+import FeatherIcon from '../components/FeatherIcon';
+import PageTitle from '../components/PageTitle';
 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 { BreadcrumbContext } from '../components/BreadcrumbContext';
-import styles from './GuideTemplate.module.scss';
-
 import createBreadcrumbs from '../utils/create-breadcrumbs';
 import pages from '../data/sidenav.json';
+import styles from './GuideTemplate.module.scss';
 import CodeSnippet from '../components/CodeSnippet';
 
 const components = {
@@ -29,16 +29,20 @@ const components = {
 const GuideTemplate = ({ data }) => {
   const { mdx } = data;
   const { frontmatter, body } = mdx;
-  const { title, description } = frontmatter;
-
+  const { title, description, duration } = frontmatter;
   const crumbs = createBreadcrumbs(frontmatter.path, pages);
 
   return (
     <BreadcrumbContext.Provider value={crumbs}>
       <Layout>
         <SEO title={title} description={description} />
-        <BreadcrumbBar crumbs={crumbs} duration={frontmatter.duration} />
-        <h1>{title}</h1>
+        <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>

src/templates/GuideTemplate.module.scss

@@ -1,6 +1,52 @@
 .mdxContainer {
+  > *: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 {
+    margin-bottom: 1rem;
+  }
+
   ul li ul {
     margin-top: 1rem;
     line-height: 1;
   }
 }
+
+.header {
+  display: flex;
+  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;
+}