feat: Fix margins on guide listing

newrelic · Jun 23, 2020 · e0eb521 · e0eb521
1 parent d2091e4
commit e0eb521
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 12 deletions.
diff --git a/src/components/GuideListing/GuideListing.module.scss b/src/components/GuideListing/GuideListing.module.scss
@@ -1,6 +1,5 @@
 .guideListing {
   position: relative;
-  margin-top: 2rem;
 }
 
 .container {

diff --git a/src/components/Section.module.scss b/src/components/Section.module.scss
@@ -1,11 +1,9 @@
 .section {
-  --surface-background-color: var(--secondary-surface-background-color);
-
-  position: relative;
-  background-color: var(--secondary-background-color);
-
   &.backgroundBanner {
-    margin: -2rem;
+    --surface-background-color: var(--secondary-surface-background-color);
+
+    background-color: var(--secondary-background-color);
+    margin: 0 -2rem;
     padding: 2rem;
   }
 }
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -86,7 +86,7 @@ const IndexPage = ({ pageContext }) => (
       <SEO />
       <PageTitle>Observability for every developer</PageTitle>
 
-      <section className={styles.intro}>
+      <section className={cx(styles.section, styles.intro)}>
         <div className={cx(styles.introText, 'intro-text')}>
           <p>
             Welcome to the New Relic developer site! Here, you’ll find the tools
@@ -112,8 +112,8 @@ const IndexPage = ({ pageContext }) => (
         />
       </section>
 
-      <Section backgroundBanner>
-        <GuideListing className={styles.guideListing}>
+      <Section className={styles.section} backgroundBanner>
+        <GuideListing>
           <header className={styles.guideListingHeader}>
             <GuideListing.Heading className={cx(styles.guideListingHeading)}>
               Get started

diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
@@ -19,8 +19,10 @@
   margin-bottom: 1rem;
 }
 
-.guideListing {
-  margin-top: 6rem;
+.section {
+  &:not(:last-child) {
+    margin-bottom: 4rem;
+  }
 }
 
 .guideListingHeader {