Merge pull request #41 from kremalicious/feature/grid

move layout to CSS grid

src/components/Layout.module.scss

@@ -1,6 +1,17 @@
 @import 'variables';
 
 .screen {
-    flex: 1;
-    padding: $spacer;
+    margin-top: $spacer * $line-height;
+
+    > article {
+        display: grid;
+        grid-template-columns:
+            [full-start] minmax($spacer, 1fr)
+            [main-start] minmax(0, 38rem) [main-end]
+            minmax($spacer, 1fr) [full-end];
+
+        > * {
+            grid-column: main;
+        }
+    }
 }

src/components/atoms/Content.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styles from './Content.module.scss'
-
-const Content = props => (
-  <div className={styles.content} {...props}>
-    {props.children}
-  </div>
-)
-
-Content.propTypes = {
-  children: PropTypes.node
-}
-
-export default Content

src/components/atoms/Content.module.scss

@@ -1,4 +0,0 @@
-.content {
-    max-width: 38rem;
-    margin: 0 auto;
-}

src/components/atoms/FullWidth.module.scss

@@ -1,9 +1,5 @@
+@import 'variables';
+
 .fullWidth {
-    width: 100vw;
-    position: relative;
-    left: 50%;
-    right: 50%;
-    margin-left: -50vw;
-    margin-right: -50vw;
-    text-align: center;
+    grid-column: full !important;
 }

src/components/molecules/ProjectImage.module.scss

@@ -1,7 +1,6 @@
 @import 'variables';
 
 .projectImage {
-    max-height: 100vh;
     margin-left: auto;
     margin-right: auto;
     display: block;
@@ -20,7 +19,6 @@
     }
 
     img {
-        max-height: 100vh;
         display: block;
     }
 }

src/components/molecules/ProjectLinks.module.scss

@@ -3,18 +3,15 @@
 .projectLinks {
     ul {
         padding: 0;
-        display: flex;
-        flex-wrap: wrap;
-        margin-left: -($spacer / 2);
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: $spacer / 2;
     }
 
     li {
         display: flex;
         align-items: center;
         justify-content: center;
-        flex: 0 0 calc(50% - #{$spacer / 2});
-        margin-left: $spacer / 2;
-        margin-bottom: $spacer / 2;
     }
 
     a {

src/components/molecules/ProjectNav.module.scss

@@ -4,7 +4,7 @@
     // composes: fullWidth from '../atoms/FullWidth.module.scss';
     white-space: nowrap;
     overflow-y: hidden;
-    overflow-x: scroll;
+    overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 
     &::-webkit-scrollbar,
@@ -22,7 +22,7 @@
         margin-right: $spacer * 2;
     }
 
-    @media (min-width: 30rem) {
+    @media (min-width: $screen-xs) {
         width: 40vw;
         max-width: 500px;
         margin-left: $spacer * 2;

src/components/molecules/ProjectTechstack.module.scss

@@ -3,9 +3,9 @@
 .projectTechstack {
     ul {
         padding: 0;
-        display: flex;
-        flex-wrap: wrap;
-        margin-left: -($spacer / 2);
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: $spacer / 2;
     }
 
     li {
@@ -18,9 +18,6 @@
         border-radius: .25rem;
         border: .05rem solid transparent;
         color: $brand-grey-light;
-        margin-left: $spacer / 2;
-        margin-bottom: $spacer / 2;
-        flex: 0 0 calc(50% - #{$spacer / 2});
         font-size: $font-size-small;
 
         :global(.dark) & {

src/components/organisms/Header.module.scss

@@ -24,10 +24,6 @@
     padding-top: $spacer * 2;
     padding-bottom: 0;
 
-    @media (min-width: 30rem) {
-        padding-bottom: $spacer / 2;
-    }
-
     .header__link {
         pointer-events: all;
         width: auto;

src/pages/404.jsx

@@ -2,9 +2,8 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import giphyAPI from 'giphy-js-sdk-core'
-import Content from '../components/atoms/Content'
 import Button from '../components/atoms/Button'
-import './404.scss'
+import styles from './404.module.scss'
 
 // Famous last words:
 // "It's just the 404 page so why not expose the dev API key"
@@ -22,16 +21,14 @@ export default class NotFound extends Component {
     this.getRandomGif()
   }
 
-  getRandomGif() {
-    giphyClient
-      .random('gifs', { tag })
-      .then(response => {
-        const gif = response.data.images.original.mp4
-        this.setState({ gif })
-      })
-      .catch(err => {
-        return err
-      })
+  async getRandomGif() {
+    try {
+      let response = await giphyClient.random('gifs', { tag })
+      const gif = response.data.images.original.mp4
+      this.setState({ gif })
+    } catch (error) {
+      return error
+    }
   }
 
   handleClick = e => {
@@ -41,22 +38,22 @@ export default class NotFound extends Component {
 
   render() {
     return (
-      <Content className="content content--404">
+      <article className={styles.content}>
         <h1>Shenanigans, page not found.</h1>
         <p>
           You might want to check the url, or{' '}
-          <Link to={'/'}>go back to the homepage</Link>. Or just check out some
-          cat fail gifs, entirely your choice.
+          <Link to={'/'}>go back to the homepage</Link>. Or just check out some{' '}
+          {tag} gifs, entirely your choice.
         </p>
 
         <video className="gif" src={this.state.gif} autoPlay loop />
 
         <div>
-          <Button onClick={this.handleClick}>
-            Show me another cat fail gif
-          </Button>
+          <Button
+            onClick={this.handleClick}
+          >{`Get another '${tag}' gif`}</Button>
         </div>
-      </Content>
+      </article>
     )
   }
 }

src/pages/404.module.scss

@@ -1,19 +1,18 @@
 @import 'variables';
 
-.content--404 {
+.content {
     text-align: center;
     height: 100%;
     max-width: 35rem;
     margin-left: auto;
     margin-right: auto;
 
-    .gif {
-        display: inline-block;
+    video {
+        display: block;
         width: auto;
         height: 300px;
         box-shadow: 0 3px 5px rgba($brand-main, .15),
             0 5px 16px rgba($brand-main, .15);
-        margin-top: $spacer / 4;
-        margin-bottom: $spacer / 2;
+        margin: $spacer / 4 auto $spacer / 2 auto;
     }
 }

src/pages/index.jsx

@@ -2,29 +2,26 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
 import ProjectImage from '../components/molecules/ProjectImage'
-import FullWidth from '../components/atoms/FullWidth'
 import styles from './index.module.scss'
 
 const Home = ({ data }) => {
   const projects = data.allProjectsYaml.edges
 
   return (
-    <FullWidth>
-      <div className={styles.projects}>
-        {projects.map(({ node }) => {
-          const { slug, title, img } = node
+    <div className={styles.projects}>
+      {projects.map(({ node }) => {
+        const { slug, title, img } = node
 
-          return (
-            <article className={styles.project} key={slug}>
-              <Link to={slug}>
-                <h1 className={styles.title}>{title}</h1>
-                <ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
-              </Link>
-            </article>
-          )
-        })}
-      </div>
-    </FullWidth>
+        return (
+          <article className={styles.project} key={slug}>
+            <Link to={slug}>
+              <h1 className={styles.title}>{title}</h1>
+              <ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
+            </Link>
+          </article>
+        )
+      })}
+    </div>
   )
 }
 

src/pages/index.module.scss

@@ -1,13 +1,15 @@
 @import 'variables';
 
 .projects {
-    @media (min-width: 55rem) {
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: $spacer * 3;
+
+    @media (min-width: $screen-md) {
+        grid-template-columns: 1fr 1fr;
         max-width: calc(#{$projectImageMaxWidth} + #{$spacer * 2});
         margin: 0 auto;
-        padding: $spacer $spacer * 2;
+        padding: $spacer $spacer * 3;
     }
 }
 
@@ -26,23 +28,11 @@
 }
 
 .project {
-    flex: 0 0 calc(50% - #{$spacer});
-    text-align: center;
-    margin-bottom: $spacer * 6;
     position: relative;
 
-    @media (min-width: 55rem) {
-        margin-bottom: $spacer * 2;
-    }
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-
     a {
         display: block;
         position: relative;
-        margin: 0 auto;
 
         &::after {
             content: '';

src/styles/_variables.scss

@@ -67,3 +67,11 @@ $color-headings--dark: $brand-main-light;
 /////////////////////////////////////
 
 $spacer: ($font-size-base * $line-height);
+
+// Responsive breakpoints
+/////////////////////////////////////
+
+$screen-xs: 30em;
+$screen-sm: 40em;
+$screen-md: 60em;
+$screen-lg: 70em;

src/templates/Project.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import ReactMarkdown from 'react-markdown'
 import { graphql } from 'gatsby'
-import Content from '../components/atoms/Content'
 import FullWidth from '../components/atoms/FullWidth'
 import ProjectImage from '../components/molecules/ProjectImage'
 import ProjectTechstack from '../components/molecules/ProjectTechstack'
@@ -43,16 +42,16 @@ const Project = ({ data }) => {
 
       <SEO project={project} />
 
-      <article className={styles.project}>
-        <Content>
+      <article>
+        <header>
           <h1 className={styles.project__title}>{title}</h1>
-          <ReactMarkdown
-            source={descriptionWithLineBreaks}
-            className={styles.project__description}
-          />
-          <ProjectImages projectImages={projectImages} title={title} />
-          <ProjectMeta links={links} techstack={techstack} />
-        </Content>
+        </header>
+        <ReactMarkdown
+          source={descriptionWithLineBreaks}
+          className={styles.project__description}
+        />
+        <ProjectImages projectImages={projectImages} title={title} />
+        <ProjectMeta links={links} techstack={techstack} />
       </article>
 
       <ProjectNav slug={project.slug} />

src/templates/Project.module.scss

@@ -4,7 +4,7 @@
 .spacer {
     margin-bottom: $spacer * 3;
 
-    @media (min-width: 30rem) {
+    @media (min-width: $screen-xs) {
         margin-bottom: $spacer * 6;
     }
 }
@@ -12,27 +12,26 @@
 .project__title {
     font-size: $font-size-h2;
 
-    @media (min-width: 30rem) {
+    @media (min-width: $screen-xs) {
         font-size: $font-size-h1;
     }
 }
 
 .project__description {
     font-size: $font-size-base;
-    margin-bottom: $spacer * 3;
+    margin-bottom: $spacer * 2;
 }
 
 .project__meta {
-    margin-top: $spacer * 5;
+    margin-top: -($spacer);
     margin-bottom: $spacer * 5;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: $spacer * 2;
 
-    @media (min-width: 40rem) {
-        display: flex;
-        justify-content: space-between;
-
-        > div {
-            flex: 0 0 45%;
-        }
+    @media (min-width: $screen-sm) {
+        grid-template-columns: 1fr 1fr;
+        grid-gap: $spacer * 2;
     }
 }