adding darker bg to intro, tweaking section spacing

Author: chrisdothtml

components/splash/splash-style.scss

@@ -4,19 +4,23 @@
 .splash {
   &__section {
     position:relative;
-    padding:5em 1em;
     text-align:center;
 
-    &:last-child {
-      padding-top: 0;
+    &__dark {
+      background-color:#f3f3f3;
     }
 
-    @include break {
-      padding:8em 1.5em;
+    .container {
+      padding:5em 1em;
+
+      @include break {
+        padding-left:1.5em;
+        padding-right:1.5em;
+      }
     }
 
-    pre { 
-      text-align:left; 
+    pre {
+      text-align:left;
     }
 
     .icon-link {

components/splash/splash.jsx

@@ -17,24 +17,28 @@ export default props => {
         id="components/splash-viz/splash-viz.jsx"
         component={ SplashViz } />
 
-      <Container className="splash__section">
-        <h1>{ page.title }</h1>
-        <div dangerouslySetInnerHTML={{
-          __html: page.content
-        }} />
-      </Container>
+      <div className="splash__section splash__section__dark">
+        <Container>
+          <h1>{ page.title }</h1>
+          <div dangerouslySetInnerHTML={{
+            __html: page.content
+          }} />
+        </Container>
+      </div>
 
-      <Container className="splash__section">
-        <h1>Support the Team</h1>
+      <div className="splash__section">
+        <Container>
+          <h1>Support the Team</h1>
 
-        <p>Through contributions, donations, and sponsorship, you allow webpack to thrive. Your donations directly support office hours, continued enhancements, and most importantly, great documentation and learning material!</p>
+          <p>Through contributions, donations, and sponsorship, you allow webpack to thrive. Your donations directly support office hours, continued enhancements, and most importantly, great documentation and learning material!</p>
 
-        <h2>Sponsors</h2>
-        <Support number={ 40 } type="sponsor" />
+          <h2>Sponsors</h2>
+          <Support number={ 40 } type="sponsor" />
 
-        <h2>Backers</h2>
-        <Support number={ 130 } type="backer" />
-      </Container>
+          <h2>Backers</h2>
+          <Support number={ 130 } type="backer" />
+        </Container>
+      </div>
     </div>
   );
 };