From 7f8c7d52201ce3bd426e6e5dcfc4ec704d9d458a Mon Sep 17 00:00:00 2001
From: LordMathis <namesny.matus@gmail.com>
Date: Sat, 5 May 2018 19:36:47 +0200
Subject: [PATCH] Change layout

---
 src/components/App.js                         |  7 ++---
 src/components/Home.js                        |  2 +-
 src/components/Home.scss                      | 28 ++-----------------
 .../{BlogContainer.js => MainContainer.js}    |  3 +-
 src/containers/index.js                       |  4 +--
 src/static/stylesheets/content.scss           | 11 --------
 src/static/stylesheets/globals.scss           |  4 +++
 src/utils/serverRender.js                     |  1 +
 8 files changed, 16 insertions(+), 44 deletions(-)
 rename src/containers/{BlogContainer.js => MainContainer.js} (92%)

diff --git a/src/components/App.js b/src/components/App.js
index 94ab983..740230e 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,14 +1,13 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { Home, NotFoundPage } from '.';
-import { BlogContainer, PostContainer } from '../containers';
+import { MainContainer, PostContainer } from '../containers';
 
 export const App = () => (
   <div>
-    <Route component={Home} />
     <Switch>
-      <Route exact path="/blog" component={BlogContainer} />
-      <Route path="/blog/post/:postname" component={PostContainer} />
+      <Route exact path="/" component={MainContainer} />
+      <Route path="/post/:postname" component={PostContainer} />
       <Route component={NotFoundPage} />
     </Switch>
   </div>
diff --git a/src/components/Home.js b/src/components/Home.js
index ed3b28e..ea24f9b 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -29,7 +29,7 @@ export default class Home extends Component {
     );
 
     return (
-      <div id={styles.coverPage} className={this.props.location.pathname === '/' ? styles.coverPageFull : styles.coverPageCollapsed}>
+      <div id={styles.coverPage} className={styles.coverPageFull}>
         <div id={styles.coverPageContent}>
           <div>
             <h1 id={styles.coverPageName}><Link to="/">{ config.name }</Link></h1>
diff --git a/src/components/Home.scss b/src/components/Home.scss
index c39375e..83e99f3 100644
--- a/src/components/Home.scss
+++ b/src/components/Home.scss
@@ -9,38 +9,16 @@
   flex-direction: column;
   justify-content: center;
   text-align: center;
-  position: fixed;
-  top: 0;
-  left: 0;
   color: $white;
-  transition-property: width;
-  transition-duration: 0.75s;
-  -webkit-transition-property: width;
-  -webkit-transition-duration: 0.75s;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 #coverPage.coverPageFull{
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
+  height: 100vh;
   width: 100%;
 }
 
-#coverPage.coverPageCollapsed {
-  float: left;
-  width: 320px;
-  height: 100%;
-  @media screen and (max-width: $break-medium) {
-    width: 100%;
-    float: none;
-  }
-  @media screen and (min-width: $break-large) {
-    width: 500px;
-    float: none;
-  }
-}
-
 #coverPageName {
   font-size: 5em;
 }
diff --git a/src/containers/BlogContainer.js b/src/containers/MainContainer.js
similarity index 92%
rename from src/containers/BlogContainer.js
rename to src/containers/MainContainer.js
index 88275eb..42f1dc7 100644
--- a/src/containers/BlogContainer.js
+++ b/src/containers/MainContainer.js
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import axios from 'axios';
-import {About, Blog} from '../components';
+import {About, Blog, Home} from '../components';
 
 export default class BlogContainer extends Component {
 
@@ -32,6 +32,7 @@ export default class BlogContainer extends Component {
   render() {
     return (
       <div>
+        <Home/>
         <About isLoading={this.state.isLoadingAbout}
           about={this.state.about}/>
         <Blog isLoading={this.state.isLoadingBlog}
diff --git a/src/containers/index.js b/src/containers/index.js
index b323fb6..aeace32 100644
--- a/src/containers/index.js
+++ b/src/containers/index.js
@@ -1,2 +1,2 @@
-export { default as BlogContainer } from './BlogContainer';
-export { default as PostContainer } from './PostContainer'; 
+export { default as MainContainer } from './MainContainer';
+export { default as PostContainer } from './PostContainer';
diff --git a/src/static/stylesheets/content.scss b/src/static/stylesheets/content.scss
index 50c0977..5db7e35 100644
--- a/src/static/stylesheets/content.scss
+++ b/src/static/stylesheets/content.scss
@@ -1,7 +1,6 @@
 @import "./variables.scss";
 
 .contentWrapper {
-  margin-left: 320px;
   overflow: auto;
   padding: 20px;
   h1 {
@@ -10,19 +9,9 @@
   a {
     color: $blue;
   }
-  @media screen and (max-width: $break-medium) {
-    width: 100%;
-    float: none;
-  }
-  @media screen and (min-width: $break-large) {
-    margin-left: 500px;
-  }
 }
 
 .content {
   box-sizing: border-box;
   margin: 0 auto;
-  @media screen and (min-width: $break-large) {
-    width: 90%;
-  }
 }
diff --git a/src/static/stylesheets/globals.scss b/src/static/stylesheets/globals.scss
index 541fb21..8685502 100644
--- a/src/static/stylesheets/globals.scss
+++ b/src/static/stylesheets/globals.scss
@@ -1,5 +1,9 @@
 @import "./variables.scss";
 
+:global(body, html) {
+    height: 100%;
+}
+
 :global(body) {
   font-family: $font-paragraph;
   color: $black;
diff --git a/src/utils/serverRender.js b/src/utils/serverRender.js
index 07353b1..6280883 100644
--- a/src/utils/serverRender.js
+++ b/src/utils/serverRender.js
@@ -23,6 +23,7 @@ function renderFullPage(html) {
     <!DOCTYPE html>
     <html>
       <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Matúš Námešný</title>
           <!-- Google Fonts -->
           <link href="https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans|Roboto|Montserrat|Concert+One" rel="stylesheet">