From 58cdb43da63bd1cfeda248216e4f4c0e95395aa5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=CC=81=20Nunes?= <josenunes34@gmail.com>
Date: Sat, 25 Aug 2018 10:01:28 +0100
Subject: [PATCH] #34 Fix styles for WorkSingle

---
 gatsby-config.js             | 4 ++--
 src/assets/styles/global.css | 9 +++++++++
 src/templates/WorkSingle.js  | 4 ++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 0c039c8..579a3e4 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -21,8 +21,8 @@ module.exports = {
               // It's important to specify the maxWidth (in pixels) of
               // the content container as this plugin uses this as the
               // base for generating different widths of each image.
-              maxWidth: 590,
-              wrapperStyle: 'margin: 15px -30px !important',
+              maxWidth: 700,
+              // wrapperStyle: 'margin: 15px -30px !important',
             },
           },
         ],
diff --git a/src/assets/styles/global.css b/src/assets/styles/global.css
index c2e2c15..1b9b224 100644
--- a/src/assets/styles/global.css
+++ b/src/assets/styles/global.css
@@ -206,6 +206,11 @@ input:required {
   margin: 0 auto;
 }
 
+:global(.workSingle-wrapper) {
+  max-width: 700px;
+  margin: 0 30px;
+}
+
 :global(.flex-grid) {
   display: block;
 }
@@ -241,6 +246,10 @@ input:required {
 }
 
 @media (--smaller-viewport) {
+  :global(.workSingle-wrapper) {
+    margin: 0 auto;
+  }
+
   :global(.flex-grid) {
     display: flex;
   }
diff --git a/src/templates/WorkSingle.js b/src/templates/WorkSingle.js
index 10ca7ea..cd23174 100644
--- a/src/templates/WorkSingle.js
+++ b/src/templates/WorkSingle.js
@@ -31,7 +31,7 @@ export default class WorkSingle extends Component {
           />
           <div className={styles.backdrop} />
         </div>
-        <div className="section-wrapper">
+        <div className="workSingle-wrapper">
           <div className={styles.tags}>
             {data.markdownRemark.frontmatter.tags.map(({ tag }) => (
               <span className={styles.tag} key={tag}>{tag}</span>
@@ -51,7 +51,7 @@ export default class WorkSingle extends Component {
           </div>
         </div>
         <div 
-          className={`section-wrapper ${styles.postBody}`}
+          className={`workSingle-wrapper ${styles.postBody}`}
           dangerouslySetInnerHTML={{
             __html: data.markdownRemark.html,
           }}