#34 Fix styles for WorkSingle

jcmnunes · Aug 25, 2018 · 58cdb43 · 58cdb43
1 parent aec6fb8
commit 58cdb43
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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,
           }}