From 48da4d9c0d26f5968fcd46586cf4655c0b16d2ff Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Wed, 29 Jul 2020 17:32:26 -0700
Subject: [PATCH] feat: move the content area into a grid

---
 src/components/RelatedContent.js |  7 +--
 src/templates/GuideTemplate.js   | 83 ++++++++++++++++++--------------
 2 files changed, 52 insertions(+), 38 deletions(-)

diff --git a/src/components/RelatedContent.js b/src/components/RelatedContent.js
index 93c3c30f2..79b9c3798 100644
--- a/src/components/RelatedContent.js
+++ b/src/components/RelatedContent.js
@@ -6,9 +6,6 @@ import { Button, ExternalLink, Icon } from '@newrelic/gatsby-theme-newrelic';
 import { PageContext } from './PageContext';
 
 const RelatedContent = ({ className, page }) => {
-  const {
-    fields: { gitAuthorTime },
-  } = page;
   const { site } = useStaticQuery(graphql`
     query {
       site {
@@ -20,6 +17,10 @@ const RelatedContent = ({ className, page }) => {
   `);
   const { fileRelativePath } = useContext(PageContext);
 
+  const {
+    fields: { gitAuthorTime },
+  } = page;
+
   const {
     siteMetadata: { repository },
   } = site;
diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js
index 91523b101..0a2447c9b 100644
--- a/src/templates/GuideTemplate.js
+++ b/src/templates/GuideTemplate.js
@@ -17,56 +17,69 @@ const GuideTemplate = ({ data }) => {
   return (
     <>
       <SEO title={title} description={description} />
-      <div
-        css={css`
-          border-bottom: 1px solid var(--divider-color);
-          display: flex;
-          margin-bottom: 2rem;
-          align-items: center;
-          justify-content: space-between;
-
-          @media screen and (max-width: 1080px) {
-            flex-direction: column;
-            align-items: flex-start;
-          }
-        `}
-      >
-        <PageTitle>{title}</PageTitle>
-        {duration && (
-          <div
-            css={css`
-              display: flex;
-              align-items: center;
-              color: var(--secondary-text-color);
-              white-space: nowrap;
-            `}
-          >
-            <FeatherIcon
-              name="clock"
-              css={css`
-                margin-right: 0.25rem;
-              `}
-            />
-            {duration}
-          </div>
-        )}
-      </div>
       <div
         css={css`
           display: grid;
+          grid-template-areas:
+            'page-title page-title'
+            'content related-content';
           grid-template-columns: minmax(0, 1fr) auto;
           grid-gap: 2rem;
 
           @media (max-width: 1240px) {
+            grid-template-areas:
+              'page-title'
+              'content';
             grid-template-columns: minmax(0, 1fr);
             grid-gap: 0;
           }
         `}
       >
-        <MDXContainer>{body}</MDXContainer>
+        <div
+          css={css`
+            grid-area: page-title;
+            border-bottom: 1px solid var(--divider-color);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            @media screen and (max-width: 1080px) {
+              flex-direction: column;
+              align-items: flex-start;
+            }
+          `}
+        >
+          <PageTitle>{title}</PageTitle>
+          {duration && (
+            <div
+              css={css`
+                display: flex;
+                align-items: center;
+                color: var(--secondary-text-color);
+                white-space: nowrap;
+              `}
+            >
+              <FeatherIcon
+                name="clock"
+                css={css`
+                  margin-right: 0.25rem;
+                `}
+              />
+              {duration}
+            </div>
+          )}
+        </div>
+        <MDXContainer
+          css={css`
+            grid-area: content;
+          `}
+        >
+          {body}
+        </MDXContainer>
         <RelatedContent
           page={mdx}
           css={css`
+            grid-area: related-content;
             position: sticky;
             top: calc(var(--global-header-height) + 2rem);
             align-self: start;