chore: use grid-column-gap instead of padding to add gap between layo…

…ut elements
newrelic · Jul 29, 2020 · 5ce869d · 5ce869d
1 parent 209cbee
commit 5ce869d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 12 deletions.
diff --git a/src/components/RelatedContent.js b/src/components/RelatedContent.js
@@ -12,26 +12,17 @@ const RelatedContent = ({ className }) => {
         siteMetadata {
           repository
         }
-        layout {
-          contentPadding
-        }
       }
     }
   `);
   const { fileRelativePath } = useContext(PageContext);
 
   const {
-    layout,
     siteMetadata: { repository },
   } = site;
 
   return (
-    <aside
-      className={className}
-      css={css`
-        padding: 0 ${layout.contentPadding};
-      `}
-    >
+    <aside className={className}>
       <h4>Contribute</h4>
       <Button
         as={ExternalLink}

diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js
@@ -90,6 +90,7 @@ const MainLayout = ({ children }) => {
             'sidebar content related-content'
             'sidebar footer footer';
           grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 340px;
+          grid-column-gap: ${layout.contentPadding};
           width: 100%;
           max-width: ${layout.maxWidth};
           margin: 0 auto;
@@ -122,7 +123,7 @@ const MainLayout = ({ children }) => {
         <article
           css={css`
             grid-area: content;
-            padding: ${layout.contentPadding};
+            padding: ${layout.contentPadding} 0;
           `}
         >
           {children}
@@ -140,7 +141,6 @@ const MainLayout = ({ children }) => {
             grid-area: footer;
             border-top: 1px solid var(--divider-color);
             padding: ${layout.contentPadding} 0;
-            margin-left: ${layout.contentPadding};
           `}
         />
       </div>