More styling (#8)

gatsby-config.js

@@ -32,7 +32,7 @@ module.exports = {
         },
       },
     },
-    'gatsby-plugin-offline',
+    'gatsby-plugin-robots-txt',
     'gatsby-plugin-sitemap',
     {
       resolve: 'gatsby-plugin-sass',

package.json

@@ -8,13 +8,14 @@
     "gatsby": "^2.1.23",
     "gatsby-plugin-fathom": "^1.0.4",
     "gatsby-plugin-feed": "^2.0.14",
-    "gatsby-plugin-offline": "^2.0.24",
     "gatsby-plugin-react-helmet": "^3.0.8",
     "gatsby-plugin-react-svg": "^2.1.0",
+    "gatsby-plugin-robots-txt": "^1.4.0",
     "gatsby-plugin-sass": "^2.0.10",
     "gatsby-plugin-sitemap": "^2.0.6",
     "gatsby-source-filesystem": "^2.0.23",
     "gatsby-source-graphql": "^2.0.11",
+    "html-react-parser": "^0.6.3",
     "node-html-parser": "^1.1.12",
     "node-sass": "^4.11.0",
     "normalize.css": "^8.0.1",

src/components/Footer/Footer.jsx

@@ -17,7 +17,7 @@ const Footer = ({ readNext }) => (
         </span>
       </li>
       <li><a href="https://twitter.com/hal_lee">Twitter</a></li>
-      <li><a href="https://github.com/hallee">Github</a></li>
+      <li><a href="https://github.com/hallee">GitHub</a></li>
       <li><a href="https://github.com/hallee/blog.hal.codes">Source code</a></li>
     </ul>
     <ul>

src/components/Header/Header.jsx

@@ -2,6 +2,7 @@ import { Link } from 'gatsby';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Logo from '../../assets/logo.svg';
+import './Header.scss';
 
 const Header = ({ siteTitle }) => (
   <header>

src/components/Header/Header.scss

@@ -0,0 +1,4 @@
+h1 svg {
+  @include link-transition;
+  @include pop-animation;
+}

src/components/Layout/Layout.scss

@@ -34,3 +34,7 @@ header {
   }
   overflow-x: hidden;
 }
+
+article h1 {
+  font-size: 10rem;
+}

src/components/Post/PostBody.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import Fragment from 'react-dom-fragment';
+import parse from 'html-react-parser';
 import './PostBody.scss';
 import './code.css';
 
@@ -12,8 +13,6 @@ const PostBody = ({ node, titleLink, preview }) => {
   const published = new Date(node.meta.published);
   const dateString = published.toLocaleString('en-us', { month: 'long', day: 'numeric', year: 'numeric' });
 
-  const html = { __html: node.body.html };
-  const previewHTML = { __html: node.preview.html };
   return (
     <article>
       <span className="kicker">{ node.kicker }</span>
@@ -22,9 +21,9 @@ const PostBody = ({ node, titleLink, preview }) => {
       </h2>
       <span className="post-date">{ dateString }</span>
       { !preview ? (
-        <Fragment dangerouslySetInnerHTML={ html } />
+        <Fragment>{ parse(node.body.html) }</Fragment>
       ) : (
-        <Fragment dangerouslySetInnerHTML={ previewHTML } />
+        <Fragment>{ parse(node.preview.html) }</Fragment>
       )}
       { continueReading }
     </article>

src/components/Post/PostBody.scss

@@ -13,6 +13,13 @@ h1, h2, h3, h4, h5, h6 {
   margin: 1em 0 0;
 }
 
+h1 { font-size: 6rem; }
+h2 { font-size: 3.8rem; }
+h3 { font-size: 3.2rem; }
+h4 { font-size: 2.6rem; }
+h5 { font-size: 2.2rem; }
+h6 { font-size: 2rem; }
+
 h2.title {
   font-size: 4.4rem;
   line-height: 1.1;
@@ -22,20 +29,29 @@ h2.title {
 a {
   color: $foreground-color;
   text-decoration: none;
+  @include link-transition;
+
 
   &:hover {
     text-decoration: underline;
   }
+
 }
 
 a.continue {
   text-decoration: none;
+  margin: 1.65rem 0;
+  color: $accent-color;
+  font-size: 0.8em;
 
   span {
+    display: inline-block;
     background: #baacfd20;
     color: $accent-color;
     border-radius: $border-radius;
     padding: 1rem 2rem;
+    @include link-transition;
+    @include pop-animation;
   }
 
   &:hover {
@@ -48,18 +64,15 @@ a.continue {
 p a {
   color: $accent-color;
   border-radius: $border-radius;
+  padding: 0 0.4rem;
+  margin: 0 -0.4rem;
+
   &:hover {
-    background: #baacfd20;
+    background: #baacfd30;
     text-decoration: none;
   }
 }
 
-a.continue {
-  margin: 1.65rem 0;
-  color: $accent-color;
-  font-size: 0.8em;
-}
-
 p {
   margin: 1.65rem 0;
 }
@@ -102,7 +115,16 @@ div, article {
     font-family: $mono-font-stack;
     background: #ddd;
     border-radius: $border-radius;
-    padding: 0 0.2em;
+    padding: 0 0.4rem;
+    margin: 0 -0.2rem;
+  }
+
+  a code {
+    line-height: 3.3rem;
+    @include link-transition;
+    &:hover {
+      background: none;
+    }
   }
 
   pre {

src/components/ReadNext/ReadNext.jsx

@@ -8,7 +8,7 @@ const ReadNext = ({ nodes }) => (
   <>
     { nodes && (
       <section className="read-next">
-        <h3>~</h3>
+        <h3>→</h3>
         { nodes.map(node => (
           <PostBody
             node={ node }

src/components/SEO/SEO.jsx

@@ -87,6 +87,8 @@ function SEO({
               .concat(dateMeta) }
           >
             <link rel="icon" sizes="152x152" href="/favicon.png" />
+            <link rel="apple-touch-icon-precomposed" href="/favicon.png" />
+            <link rel="mask-icon" href="/favicon.svg" color="#5664EC" />
             <link rel="canonical" href={ canonical } />
           </Helmet>
         );

src/pages/404.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import Layout from '../components/Layout/Layout';
+
+const NotFound = () => (
+  <Layout>
+    <section>
+      <article>
+        <h1 style={ { margin: 0, 'text-align': 'center' } }>404</h1>
+        <p>
+          Whatever you’re looking for doesn’t exist. Keep sniffing around! Or&nbsp;
+          <Link to="/">
+            go home →
+          </Link>
+        </p>
+        <p><img src="https://s3.amazonaws.com/f.hal.codes/DSC04791-2.jpg" alt="" /></p>
+      </article>
+    </section>
+  </Layout>
+);
+
+export default NotFound;

src/resources.scss

@@ -55,6 +55,22 @@ $break-mobile-small: 320px;
   }
 }
 
+@mixin link-transition {
+  transition: color 0.2s cubic-bezier(0.1, 0.5, 0.8, 1.1),
+              background-color 0.2s cubic-bezier(0.1, 0.5, 0.8, 1.1),
+              transform 0.3s cubic-bezier(0.175, 0.9, 0.32, 1.6);
+}
+
+@mixin pop-animation {
+  &:hover {
+    transform: scale(1.04);
+  }
+
+  &:active {
+    transform: scale(1);
+  }
+}
+
 @mixin shadow {
   // box-shadow: 0 1rem 3rem -1rem #2a273466,
   //             0 1.2rem 2rem -0.6rem #2a273444;