diff --git a/README.md b/README.md index acd2f91..3040f1a 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ All project images make use of the excellent [gatsby-image](https://github.com/g All together, Gatsby automatically generates all required image sizes for delivering responsible, responsive images to visitors, including lazy loading of all images. Also includes the [intersection-observer polyfill](https://github.com/w3c/IntersectionObserver) to make lazy loading work properly in Safari. -All project images use one single component defined in [`src/components/molecules/ProjectImage.jsx`](src/components/atoms/ProjectImage.jsx). In there, one main GraphQL query fragment is defined, which then gets used throughout other GraphQL queries. +All project images use one single component defined in [`src/components/molecules/ProjectImage.jsx`](src/components/molecules/ProjectImage.jsx). In there, one main GraphQL query fragment is defined, which then gets used throughout other GraphQL queries. ### 💎 Importing SVG assets @@ -88,7 +88,7 @@ All SVG assets under `src/images/` will be converted to React components before import Logo from './components/svg/Logo' ``` -That's done with a simple bash script under [`scripts/svg.sh`](src/scripts/svg.sh) +That's done with a simple bash script under [`scripts/svg.sh`](scripts/svg.sh) ### 🍬 Typekit component diff --git a/src/components/atoms/Typekit.js b/src/components/atoms/Typekit.jsx similarity index 100% rename from src/components/atoms/Typekit.js rename to src/components/atoms/Typekit.jsx diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index 127032c..543e228 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -14,9 +14,13 @@ .project { flex: 0 0 calc(50% - #{$spacer}); text-align: center; - margin-bottom: $spacer * 2; + margin-bottom: $spacer * 6; position: relative; + @media (min-width: 55rem) { + margin-bottom: $spacer * 2; + } + &:last-child { margin-bottom: 0; }