updated styles and added image centering

.env

@@ -0,0 +1 @@
+CONTENTFUL_TOKEN=60cbad148b9e4801a76825865de8ec2a7f7f33582aff8c1033814675300e2f25

gatsby-config.js

@@ -1,3 +1,7 @@
+require('dotenv').config({
+  path: '.env',
+});
+
 module.exports = {
   siteMetadata: {
     title: 'Matt Wood | Developer',
@@ -7,12 +11,12 @@ module.exports = {
       resolve: 'gatsby-source-contentful',
       options: {
         spaceId: 'wetfygr1eqh0',
-        accessToken:
-          process.env.CONTENTFUL_TOKEN,
+        accessToken: process.env.CONTENTFUL_TOKEN,
       },
     },
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-sass',
+    'gatsby-plugin-sharp',
     {
       resolve: 'gatsby-transformer-remark',
       options: {
@@ -42,6 +46,16 @@ module.exports = {
               aliases: {},
             },
           },
+          {
+            resolve: 'gatsby-remark-images',
+            options: {
+              // 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,
+              backgroundColor: '#000',
+            },
+          },
         ],
       },
     },

package.json

@@ -8,10 +8,13 @@
     "babel-eslint": "^8.2.3",
     "bluebird": "^3.5.1",
     "contentful": "^5.1.3",
+    "dotenv": "^5.0.1",
     "gatsby": "^1.9.223",
     "gatsby-link": "^1.6.38",
     "gatsby-plugin-react-helmet": "^2.0.6",
     "gatsby-plugin-sass": "^1.0.20",
+    "gatsby-plugin-sharp": "^1.6.44",
+    "gatsby-remark-images": "^1.5.63",
     "gatsby-remark-prismjs": "^2.0.2",
     "gatsby-source-contentful": "^1.3.46",
     "gatsby-transformer-remark": "^1.7.40",

src/layouts/stylesheets/blog.scss

@@ -121,6 +121,10 @@
 .blog-post-body {
   font-size: 18px;
   letter-spacing: 0.225px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 
   p {
     margin-bottom: 35px;

src/layouts/stylesheets/contact.scss

@@ -51,6 +51,7 @@
     border-radius: 5px;
     transition: all 300ms ease;
     border: 0;
+    margin-top: 5px;
 
     &:hover {
       cursor: pointer;

src/layouts/stylesheets/projects.scss

@@ -72,6 +72,11 @@
   justify-content: center;
   align-items: center;
 
+  a:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+
   h3 {
     margin: 0;
   }