From 2f23dd9a008d195a73681a81e00739acb4357fbb Mon Sep 17 00:00:00 2001
From: LordMathis <matus@namesny.com>
Date: Mon, 7 Oct 2019 22:33:54 +0200
Subject: [PATCH] Change home page layout

---
 src/components/About.scss           | 4 ++++
 src/components/Wrapper.js           | 9 +++++++--
 src/components/Wrapper.scss         | 4 ++++
 src/containers/MainContainer.js     | 2 +-
 src/static/stylesheets/content.scss | 2 ++
 5 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/About.scss b/src/components/About.scss
index 2ed6ea5..c9b81a3 100644
--- a/src/components/About.scss
+++ b/src/components/About.scss
@@ -1 +1,5 @@
 @import "../static/stylesheets/variables.scss";
+
+#about {
+    background-color: #324263;
+}
\ No newline at end of file
diff --git a/src/components/Wrapper.js b/src/components/Wrapper.js
index 330d91c..da7d37a 100644
--- a/src/components/Wrapper.js
+++ b/src/components/Wrapper.js
@@ -8,12 +8,17 @@ export default class Wrapper extends Component {
     children: PropTypes.oneOfType([
       PropTypes.arrayOf(PropTypes.node),
       PropTypes.node
-    ]).isRequired
+    ]).isRequired,
+    flex: PropTypes.bool
+  }
+
+  static defaultProps = {
+    flex: false
   }
 
   render () {
     return (
-      <div className={styles.centerContent}>
+      <div className={` ${styles.centerContent} ${this.props.flex ? styles.flexWrap : ''}` }>
         {this.props.children}
       </div>
     )
diff --git a/src/components/Wrapper.scss b/src/components/Wrapper.scss
index 64e7984..d3c0185 100644
--- a/src/components/Wrapper.scss
+++ b/src/components/Wrapper.scss
@@ -3,3 +3,7 @@
 .centerContent {
   text-align: center;
 }
+
+.flexWrap {
+  display: flex;
+}
diff --git a/src/containers/MainContainer.js b/src/containers/MainContainer.js
index 6ef63d8..d57721e 100644
--- a/src/containers/MainContainer.js
+++ b/src/containers/MainContainer.js
@@ -31,7 +31,7 @@ export default class MainContainer extends Component {
     return (
       <div>
         <Home/>
-        <Wrapper>
+        <Wrapper flex={true}>
           <About isLoading={this.state.isLoadingAbout}
             about={this.state.about}/>
           <Blog isLoading={this.state.isLoadingBlog}
diff --git a/src/static/stylesheets/content.scss b/src/static/stylesheets/content.scss
index c0235c7..1845588 100644
--- a/src/static/stylesheets/content.scss
+++ b/src/static/stylesheets/content.scss
@@ -12,6 +12,8 @@
   @media (min-width: $break-large) {
     width: 960px;
   }
+  min-height: 100vh;
+  height: 100vh;
 }
 
 .content {