Restructure home page into column components

src/components/About.js

@@ -24,12 +24,10 @@ export default class About extends Component {
       )
     }
 
-    const classes = `${contentStyle.contentWrapper} ${style.about}`
-
     return (
-      <div className={`${contentStyle.contentWrapper} ${style.about}`} role="region" aria-label="About me">
+      <div className={contentStyle.content} role="region" aria-label="About me">
         <Header header={'About Me'} role="heading" aria-level="2"/>
-        <div className={contentStyle.content} dangerouslySetInnerHTML={{ __html: result }} role="article">
+        <div dangerouslySetInnerHTML={{ __html: result }} role="article">
         </div>
       </div>
     )

src/components/About.scss

@@ -1,5 +1 @@
 @import "../stylesheets/variables.scss";
-
-.about {
-    flex: 30%;
-}

src/components/Blog.js

@@ -37,13 +37,11 @@ export default class Blog extends Component {
       </div>
     )
 
-    const classes = `${contentStyle.contentWrapper} ${styles.blog}`
-
     return (
-      <div className={classes} id="blog" role="region" aria-label="Blog posts">
+      <div className={`${contentStyle.content}`} id="blog" role="region" aria-label="Blog posts">
         <Header header={'Blog'} role="heading" aria-level="2"/>
 
-        <div className={`${contentStyle.content} ${styles.postsList}`} role="list">
+        <div className={`${styles.postsList}`} role="list">
           {postsHTML}
         </div>
 

src/components/Blog.scss

@@ -24,7 +24,3 @@
 .postListItem {
   border-bottom: 5px solid $body;
 }
-
-.blog {
-  flex: 70%;
-}

src/components/Column.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import '../stylesheets/globals.scss'
+import styles from './Column.scss'
+
+export default class Column extends Component {
+  static propTypes = {
+      children: PropTypes.oneOfType([
+          PropTypes.arrayOf(PropTypes.node),
+          PropTypes.node
+      ]).isRequired,
+      left: PropTypes.bool
+  }
+
+  static defaultProps = {
+    left: true
+  }
+
+  render () {
+    return (
+      <div className={`${styles.column} ${this.props.left ? styles.left : styles.right}`}>
+        {this.props.children}
+      </div>
+    )
+  }
+}

src/components/Column.scss

@@ -0,0 +1,14 @@
+@import "../stylesheets/variables.scss";
+
+.left {
+  flex: 30%;
+}
+
+.right {
+  flex: 70%;
+}
+
+.column {
+  box-sizing: border-box;
+  margin: 20px;
+}

src/components/Wrapper.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import '../stylesheets/globals.scss'
+import contentStyle from '../stylesheets/content.scss'
 import styles from './Wrapper.scss'
 
 export default class Wrapper extends Component {
@@ -18,7 +19,7 @@ export default class Wrapper extends Component {
 
   render () {
     return (
-      <div className={` ${styles.centerContent} ${this.props.flex ? styles.flexWrap : ''}` } role='main'>
+      <div className={` ${contentStyle.contentWrapper} ${styles.centerContent} ${this.props.flex ? styles.flexWrap : ''}` } role='main'>
         {this.props.children}
       </div>
     )

src/components/index.js

@@ -10,3 +10,4 @@ export { default as Wrapper } from './Wrapper'
 export { default as Navbar } from './Navbar'
 export { default as App } from './App'
 export { default as SocialLinks } from './SocialLinks'
+export { default as Column } from './Column'

src/containers/MainContainer.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { About, Blog, Home, Wrapper } from '../components'
+import { About, Blog, Home, Wrapper, Column } from '../components'
 
 export default class MainContainer extends Component {
   static propTypes = {
@@ -33,10 +33,14 @@ export default class MainContainer extends Component {
       <div>
         <Home config={this.state.config} />
         <Wrapper flex={true}>
-          <About isLoading={this.state.isLoadingAbout}
+          <Column>
-            about={this.state.about}/>
+            <About isLoading={this.state.isLoadingAbout}
-          <Blog isLoading={this.state.isLoadingBlog}
+              about={this.state.about}/>
-            posts={this.state.posts}/>
+          </Column>
+          <Column left={false}>
+            <Blog isLoading={this.state.isLoadingBlog}
+              posts={this.state.posts}/>
+          </Column>
         </Wrapper>
       </div>
     )

src/stylesheets/content.scss

@@ -3,19 +3,17 @@
 .contentWrapper {
   display: inline-block;
   overflow: auto;
-  box-sizing: border-box;
-  padding: 20px;
-  margin: 20px;
   a {
     color: $blue;
   }
   @media (min-width: $break-large) {
     width: 960px;
   }
-  background-color: $white;
 }
 
 .content {
   box-sizing: border-box;
+  background-color: $white;
+  padding: 20px;
   text-align: left;
 }