fix: fix spacing on splash page (#1576)

Move `homepage.scss` styles to `splash.scss` and update class
names for consistency. Add the small `margin-bottom` hack to fix
the spacing issue in production.

Resolves #1559

Author: rouzbeh84

src/components/Splash/Splash.scss

@@ -32,4 +32,38 @@
       display:none;
     }
   }
+
+  &__wrap {
+    display: block;
+
+    @include break {
+      margin: 0 -30px;
+    }
+
+    &:before,
+    &:after {
+      content: " ";
+      display: table;
+    }
+
+    &:after {
+      clear: both;
+    }
+  }
+
+  &__left,
+  &__right {
+    width: 100%;
+    float: left;
+
+    @include break {
+      width: 50%;
+      padding: 0 15px;
+    }
+  }
+
+  /* XXX: Hack to fix markown parsing issues */
+  &__right {
+    margin-bottom: 1em;
+  }
 }

src/content/index.md

@@ -4,8 +4,8 @@ title: webpack
 
 ## Write your code
 
-<div class="homepage__wrap">
-<div class="homepage__left">
+<div class="splash__wrap">
+<div class="splash__left">
 __app.js__
 
 ```js
@@ -14,7 +14,7 @@ import bar from './bar';
 bar();
 ```
 </div>
-<div class="homepage__right">
+<div class="splash__right">
 __bar.js__
 
 ```js
@@ -28,8 +28,8 @@ export default function bar() {
 
 ## Bundle with webpack
 
-<div class="homepage__wrap">
-<div class="homepage__left">
+<div class="splash__wrap">
+<div class="splash__left">
 __webpack.config.js__
 
 ```js
@@ -41,7 +41,7 @@ module.exports = {
 }
 ```
 </div>
-<div class="homepage__right">
+<div class="splash__right">
 __page.html__
 
 ```html
@@ -55,7 +55,6 @@ __page.html__
   </body>
 </html>
 ```
-
 </div>
 
 Then run `webpack` on the command-line to create `bundle.js`.

src/styles/homepage.scss

@@ -87,4 +87,3 @@ details:focus, summary:focus{
 }
 
 @import './markdown';
-@import './homepage';