From adb56df67f3cf675d9b892beea6371f152eb5466 Mon Sep 17 00:00:00 2001
From: LordMathis <matus@namesny.com>
Date: Sat, 9 Nov 2019 23:24:51 +0100
Subject: [PATCH] Fix uncentered content on posts

---
 src/components/Post.js          |  9 +++++----
 src/components/Post.scss        |  5 +++++
 src/components/Wrapper.js       |  2 +-
 src/components/Wrapper.scss     | 12 +++++++++---
 src/containers/PostContainer.js | 10 +++++-----
 src/stylesheets/content.scss    |  4 ----
 6 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/Post.js b/src/components/Post.js
index 4e83f60..c571628 100644
--- a/src/components/Post.js
+++ b/src/components/Post.js
@@ -7,6 +7,7 @@ import styles from './Post.scss'
 import MarkdownIt from 'markdown-it'
 import fm from 'front-matter'
 import moment from 'moment'
+import Wrapper from './Wrapper'
 
 export default class Post extends Component {
   static propTypes = {
@@ -33,16 +34,16 @@ export default class Post extends Component {
     return (
       <div>
         <Navbar config={this.props.config} />
-        <div className={contentStyle.contentWrapper}>
-          <Header header={title} role="heading" aria-level="2" />
-          <div className={contentStyle.content}>
+        <Wrapper>
+          <div className={`${contentStyle.content} ${styles.column}`}>
+            <Header header={title} role="heading" aria-level="2" />
             <div className={styles.postDate}>
               <h3>{date.format('MMMM D, YYYY')}</h3>
             </div>
             <div className={styles.postContent} dangerouslySetInnerHTML={{ __html: body }} role="article">
             </div>
           </div>
-        </div>
+        </Wrapper>
       </div>
     )
   }
diff --git a/src/components/Post.scss b/src/components/Post.scss
index bb9bb8e..d79d24f 100644
--- a/src/components/Post.scss
+++ b/src/components/Post.scss
@@ -13,3 +13,8 @@
     font-weight: normal
   }
 }
+
+.column {
+  box-sizing: border-box;
+  margin: 20px;
+}
diff --git a/src/components/Wrapper.js b/src/components/Wrapper.js
index 8565c74..f2a8519 100644
--- a/src/components/Wrapper.js
+++ b/src/components/Wrapper.js
@@ -19,7 +19,7 @@ export default class Wrapper extends Component {
 
   render () {
     return (
-      <div className={` ${contentStyle.contentWrapper} ${styles.centerContent} ${this.props.flex ? styles.flexWrap : ''}` } role='main'>
+      <div className={` ${contentStyle.contentWrapper} ${styles.centerContent} ${this.props.flex ? styles.flex : styles.noFlex}` } role='main'>
         {this.props.children}
       </div>
     )
diff --git a/src/components/Wrapper.scss b/src/components/Wrapper.scss
index 1dc67b1..da55a0f 100644
--- a/src/components/Wrapper.scss
+++ b/src/components/Wrapper.scss
@@ -2,12 +2,18 @@
 
 .centerContent {
   text-align: center;
+  margin: 0 auto;
 }
 
-.flexWrap {
+.flex {
   @media only screen and (min-width: $break-large) {
-    display: flex;
     width: 80%;
-    margin: 0 auto;
+    display: flex;
+  }
+}
+
+.noFlex {
+  @media (min-width: $break-large) {
+    width: 960px;
   }
 }
diff --git a/src/containers/PostContainer.js b/src/containers/PostContainer.js
index 77992cf..6b505b4 100644
--- a/src/containers/PostContainer.js
+++ b/src/containers/PostContainer.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Post, Wrapper, NotFoundPage } from '../components'
+import { Post, NotFoundPage } from '../components'
 
 export default class PostContainer extends Component {
   static propTypes = {
@@ -35,10 +35,10 @@ export default class PostContainer extends Component {
     }
 
     return (
-      <Wrapper>
-        <Post isLoading={this.state.isLoading}
-          post={this.state.post} config={this.state.config} />
-      </Wrapper>
+      <Post
+        isLoading={this.state.isLoading}
+        post={this.state.post}
+        config={this.state.config} />
     )
   }
 }
diff --git a/src/stylesheets/content.scss b/src/stylesheets/content.scss
index b3bf74c..b859cdd 100644
--- a/src/stylesheets/content.scss
+++ b/src/stylesheets/content.scss
@@ -1,14 +1,10 @@
 @import "./variables.scss";
 
 .contentWrapper {
-  display: inline-block;
   overflow: auto;
   a {
     color: $blue;
   }
-  @media (min-width: $break-large) {
-    width: 960px;
-  }
 }
 
 .content {