From 505efa09eec32a262f9940b7cb378a5301828291 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Fri, 13 Oct 2017 02:54:34 +0800
Subject: [PATCH] Fix styling

---
 src/pages/index.js | 46 ++++++++++++++++++++++++----------------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 5d4d673e..d2d91883 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -144,19 +144,21 @@ class Home extends Component {
         <Container>
           <div css={[sharedStyles.markdown, markdownStyles]}>
             <section
-              className="home-section"
-              css={{
-                [media.lessThan('medium')]: {
-                  marginTop: 0,
-                  marginBottom: 0,
-                  overflowX: 'auto',
-                  paddingTop: 30,
-                  WebkitOverflowScrolling: 'touch',
-                  position: 'relative',
-                  maskImage:
-                    'linear-gradient(to right, transparent, white 10px, white 90%, transparent)',
+              css={[
+                sectionStyles,
+                {
+                  [media.lessThan('medium')]: {
+                    marginTop: 0,
+                    marginBottom: 0,
+                    overflowX: 'auto',
+                    paddingTop: 30,
+                    WebkitOverflowScrolling: 'touch',
+                    position: 'relative',
+                    maskImage:
+                      'linear-gradient(to right, transparent, white 10px, white 90%, transparent)',
+                  },
                 },
-              }}>
+              ]}>
               <div
                 css={{
                   display: 'flex',
@@ -233,7 +235,7 @@ class Home extends Component {
                 borderBottom: `1 solid ${colors.divider}`,
               }}
             />
-            <section className="home-section">
+            <section css={sectionStyles}>
               <div id="examples">
                 <div className="example">
                   <h3>A Simple Component</h3>
@@ -385,18 +387,18 @@ export const pageQuery = graphql`
 
 export default Home;
 
-// TODO This nasty CSS is required because 'docs/index.md' defines hard-coded class names.
-const markdownStyles = {
-  '& .home-section': {
-    marginTop: 20,
-    marginBottom: 15,
+const sectionStyles = {
+  marginTop: 20,
+  marginBottom: 15,
 
-    [media.greaterThan('medium')]: {
-      marginTop: 60,
-      marginBottom: 65,
-    },
+  [media.greaterThan('medium')]: {
+    marginTop: 60,
+    marginBottom: 65,
   },
+};
 
+// TODO This nasty CSS is required because 'docs/index.md' defines hard-coded class names.
+const markdownStyles = {
   '& .example': {
     marginTop: 40,