+
{postsHTML}
diff --git a/src/components/Blog.scss b/src/components/Blog.scss
index a31d366..63abd14 100644
--- a/src/components/Blog.scss
+++ b/src/components/Blog.scss
@@ -24,7 +24,3 @@
.postListItem {
border-bottom: 5px solid $body;
}
-
-.blog {
- flex: 70%;
-}
diff --git a/src/components/Column.js b/src/components/Column.js
new file mode 100644
index 0000000..3333afe
--- /dev/null
+++ b/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 (
+
+ {this.props.children}
+
+ )
+ }
+}
diff --git a/src/components/Column.scss b/src/components/Column.scss
new file mode 100644
index 0000000..af240bc
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Wrapper.js b/src/components/Wrapper.js
index 955b113..8565c74 100644
--- a/src/components/Wrapper.js
+++ b/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 (
-
+
{this.props.children}
)
diff --git a/src/components/index.js b/src/components/index.js
index 26a5a09..4543e68 100644
--- a/src/components/index.js
+++ b/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'
diff --git a/src/containers/MainContainer.js b/src/containers/MainContainer.js
index a531cb9..ea94554 100644
--- a/src/containers/MainContainer.js
+++ b/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 {
)
diff --git a/src/stylesheets/content.scss b/src/stylesheets/content.scss
index 7232da4..b3bf74c 100644
--- a/src/stylesheets/content.scss
+++ b/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;
}