#34 Adjust WorkSingle layout

src/templates/WorkSingle.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import Img from 'gatsby-image';
 
 import Navbar from '../components/Navbar';
+import Footer from '../components/Footer';
 
 import styles from './WorkSingle.module.css';
 
@@ -40,6 +41,7 @@ export default class WorkSingle extends Component {
             __html: data.markdownRemark.html,
           }}
         />
+        <Footer />
       </div>
     );
   }

src/templates/WorkSingle.module.css

@@ -48,6 +48,10 @@
       font-weight: 700;
     }
 
+    & p {
+      line-height: 1.7;
+    }
+
     & a {
       color: var(--blue);
       text-decoration: none;
@@ -56,6 +60,24 @@
         color: color(var(--blue) shade(20%));
       }
     }
+
+    & img {
+      max-width: 700px;
+      margin: 6rem auto;
+      display: block;
+      width: 100%;
+    }
+
+    & blockquote {
+      line-height: 1.7;
+      border-left: 5px solid color(var(--text) tint(80%));
+      margin: 2rem 4rem;
+      padding: 1rem 1rem 1rem 2rem;
+
+      & p {
+        margin: 0;
+      }
+    }
   }
 
   & .tags {
@@ -92,4 +114,4 @@
       }
     }
   }
-}
+}

src/works/2018-08-01-this-new-work-will-test-the-worksingle-layout.md

@@ -0,0 +1,40 @@
+---
+title: This new work will test the WorkSingle layout
+date: '2018-08-01T19:15:18+01:00'
+thumbnail: /assets/img2.jpg
+heroImage: /assets/img1-thumb.jpg
+relpath: ../../static
+tags:
+  - tag: particles
+  - tag: nanotechnology
+  - tag: microbiology
+images:
+  - image: /assets/img1.jpg
+  - image: /assets/img2-thumb.jpg
+---
+# This is the heading 1
+
+Donec id elit non mi _porta gravida_ at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, **tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem** malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, `egestas eget quam. Maecenas` faucibus mollis interdum.
+
+[www.google.com](www.google.com)
+
+## This is a heading 2
+
+Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+> Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis.
+
+```
+const fn = () => console.log('log');class Coise extends React.Component {}
+```
+
+* Thisi
+* sdjnsk
+* sdjnksdjnv
+* sakdnclskdnv
+
+1. adncaljsdvnjadvsn
+2. alsdjknvlkjsdbva
+3. askdjvnkasjdbval
+
+![Alt text](/assets/adidasshoes.jpg)