diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index 07108ec..76aa6c0 100644 --- a/src/components/Layout.module.scss +++ b/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; + } + } } diff --git a/src/components/atoms/Content.jsx b/src/components/atoms/Content.jsx deleted file mode 100644 index a0282d8..0000000 --- a/src/components/atoms/Content.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import styles from './Content.module.scss' - -const Content = props => ( -
- {props.children} -
-) - -Content.propTypes = { - children: PropTypes.node -} - -export default Content diff --git a/src/components/atoms/Content.module.scss b/src/components/atoms/Content.module.scss deleted file mode 100644 index 5f00b6b..0000000 --- a/src/components/atoms/Content.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -.content { - max-width: 38rem; - margin: 0 auto; -} diff --git a/src/components/atoms/FullWidth.module.scss b/src/components/atoms/FullWidth.module.scss index c368b9f..5756399 100644 --- a/src/components/atoms/FullWidth.module.scss +++ b/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; } diff --git a/src/components/molecules/ProjectImage.module.scss b/src/components/molecules/ProjectImage.module.scss index 2492b00..1284614 100644 --- a/src/components/molecules/ProjectImage.module.scss +++ b/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; } } diff --git a/src/components/molecules/ProjectLinks.module.scss b/src/components/molecules/ProjectLinks.module.scss index 3a82bb4..5c5ee92 100644 --- a/src/components/molecules/ProjectLinks.module.scss +++ b/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 { diff --git a/src/components/molecules/ProjectNav.module.scss b/src/components/molecules/ProjectNav.module.scss index c73d7a5..2358fcc 100644 --- a/src/components/molecules/ProjectNav.module.scss +++ b/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; diff --git a/src/components/molecules/ProjectTechstack.module.scss b/src/components/molecules/ProjectTechstack.module.scss index add141f..268db11 100644 --- a/src/components/molecules/ProjectTechstack.module.scss +++ b/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) & { diff --git a/src/components/organisms/Header.module.scss b/src/components/organisms/Header.module.scss index 62bb371..506c7ad 100644 --- a/src/components/organisms/Header.module.scss +++ b/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; diff --git a/src/pages/404.jsx b/src/pages/404.jsx index 1409bea..28aa1f9 100644 --- a/src/pages/404.jsx +++ b/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 ( - +

Shenanigans, page not found.

You might want to check the url, or{' '} - go back to the homepage. Or just check out some - cat fail gifs, entirely your choice. + go back to the homepage. Or just check out some{' '} + {tag} gifs, entirely your choice.

) } } diff --git a/src/pages/404.scss b/src/pages/404.module.scss similarity index 69% rename from src/pages/404.scss rename to src/pages/404.module.scss index ae12a4a..2b86fbc 100644 --- a/src/pages/404.scss +++ b/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; } } diff --git a/src/pages/index.jsx b/src/pages/index.jsx index a986f1e..dd1b4ad 100644 --- a/src/pages/index.jsx +++ b/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 ( - -
- {projects.map(({ node }) => { - const { slug, title, img } = node +
+ {projects.map(({ node }) => { + const { slug, title, img } = node - return ( -
- -

{title}

- - -
- ) - })} -
- + return ( +
+ +

{title}

+ + +
+ ) + })} +
) } diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index 606344a..558b240 100644 --- a/src/pages/index.module.scss +++ b/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: ''; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 6c936b2..52a4acc 100644 --- a/src/styles/_variables.scss +++ b/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; diff --git a/src/templates/Project.jsx b/src/templates/Project.jsx index aa52bc8..749f354 100644 --- a/src/templates/Project.jsx +++ b/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 }) => { -
- +
+

{title}

- - - - +
+ + +
diff --git a/src/templates/Project.module.scss b/src/templates/Project.module.scss index 2278e81..fbc0505 100644 --- a/src/templates/Project.module.scss +++ b/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; } }