move layout to CSS grid

src/components/Layout.module.scss

@@ -1,6 +1,17 @@
 @import 'variables';
 
 .screen {
-    flex: 1;
+    margin-top: $spacer * $line-height;
-    padding: $spacer;
+
+    > article {
+        display: grid;
+        grid-template-columns:
+            [full-start] minmax($spacer, 1fr)
+            [main-start] minmax(0, $screen-sm) [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;
+    grid-column: full !important;
-    position: relative;
-    left: 50%;
-    right: 50%;
-    margin-left: -50vw;
-    margin-right: -50vw;
-    text-align: center;
 }

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;
+        display: grid;
-        flex-wrap: wrap;
+        grid-template-columns: 1fr 1fr;
-        margin-left: -($spacer / 2);
+        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;
+        display: grid;
-        flex-wrap: wrap;
+        grid-template-columns: 1fr 1fr;
-        margin-left: -($spacer / 2);
+        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/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"
@@ -41,7 +40,7 @@ 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{' '}
@@ -56,7 +55,7 @@ export default class NotFound extends Component {
             Show me another cat fail gif
           </Button>
         </div>
-      </Content>
+      </article>
     )
   }
 }

src/pages/index.jsx

@@ -2,14 +2,12 @@ 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
@@ -24,7 +22,6 @@ const Home = ({ data }) => {
         )
       })}
     </div>
-    </FullWidth>
   )
 }
 

src/pages/index.module.scss

@@ -1,13 +1,16 @@
 @import 'variables';
 
 .projects {
-    @media (min-width: 55rem) {
+    display: grid;
-        display: flex;
+    grid-template-columns: 1fr;
-        justify-content: space-between;
+    grid-gap: $spacer * 6;
-        flex-wrap: wrap;
+
+    @media (min-width: $screen-md) {
+        grid-template-columns: 1fr 1fr;
+        grid-gap: $spacer * 3;
         max-width: calc(#{$projectImageMaxWidth} + #{$spacer * 2});
         margin: 0 auto;
-        padding: $spacer $spacer * 2;
+        padding: $spacer $spacer * 3;
     }
 }
 
@@ -26,23 +29,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}>
+      <article>
-        <Content>
+        <header>
           <h1 className={styles.project__title}>{title}</h1>
+        </header>
         <ReactMarkdown
           source={descriptionWithLineBreaks}
           className={styles.project__description}
         />
         <ProjectImages projectImages={projectImages} title={title} />
         <ProjectMeta links={links} techstack={techstack} />
-        </Content>
       </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,7 +12,7 @@
 .project__title {
     font-size: $font-size-h2;
 
-    @media (min-width: 30rem) {
+    @media (min-width: $screen-xs) {
         font-size: $font-size-h1;
     }
 }
@@ -23,16 +23,14 @@
 }
 
 .project__meta {
-    margin-top: $spacer * 5;
     margin-bottom: $spacer * 5;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: $spacer;
 
-    @media (min-width: 40rem) {
+    @media (min-width: $screen-sm) {
-        display: flex;
+        grid-template-columns: 1fr 1fr;
-        justify-content: space-between;
+        grid-gap: $spacer * 2;
-
-        > div {
-            flex: 0 0 45%;
-        }
     }
 }