more layout style consolidation

src/components/Layout.module.css

@@ -1,14 +1,12 @@
 .screen {
   margin: calc(var(--spacer) * var(--line-height)) auto 0 auto;
-  padding-left: 2%;
+  padding-left: 5vw;
-  padding-right: 2%;
+  padding-right: 5vw;
 }
 
 @media (min-width: 55rem) {
   .screen {
-    padding-left: 4%;
+    max-width: calc(var(--projectImageMaxWidth) + 10vw);
-    padding-right: 4%;
-    max-width: calc(var(--projectImageMaxWidth) + 8%);
   }
 }
 
@@ -16,11 +14,32 @@
 .screen > article {
   display: grid;
   grid-template-columns:
-    [full-start] minmax(var(--spacer), 1fr)
+    [full-start] minmax(calc(var(--spacer) / 2), 1fr)
     [main-start] minmax(0, 38rem) [main-end]
-    minmax(var(--spacer), 1fr) [full-end];
+    minmax(calc(var(--spacer) / 2), 1fr) [full-end];
 }
 
 .screen > article > * {
   grid-column: main;
 }
+
+.grid {
+  display: grid;
+  gap: calc(var(--spacer) * 2);
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+}
+
+@media (min-width: 55rem) {
+  .grid {
+    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+  }
+}
+
+.fullContainer {
+  grid-column: full !important;
+}
+
+.fullWidth {
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+}

src/components/atoms/FullWidth.module.css

@@ -1,8 +0,0 @@
-.fullContainer {
-  grid-column: full !important;
-}
-
-.fullWidth {
-  margin-left: calc(50% - 50vw);
-  margin-right: calc(50% - 50vw);
-}

src/components/atoms/ProjectImage.module.css

@@ -20,8 +20,16 @@ a:focus .frame {
   margin-bottom: calc(var(--spacer) * 3);
 }
 
+.projectImage:last-of-type {
+  margin-bottom: 0;
+}
+
 @media (min-width: 1200px) {
   .projectImage:not(:only-of-type) {
     margin-bottom: calc(var(--spacer) * 6);
   }
+
+  .projectImage:last-of-type {
+    margin-bottom: 0;
+  }
 }

src/components/molecules/Networks.module.css

@@ -1,12 +1,7 @@
 .networks {
   margin-top: calc(var(--spacer) * var(--line-height));
-  margin-left: auto;
-  margin-right: auto;
   width: 100%;
   text-align: center;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
 }
 
 .title {
@@ -24,8 +19,6 @@
   margin-bottom: calc(var(--spacer) / 2);
   text-align: center;
   display: inline-block;
-  flex: 0 1;
-  min-width: 2.5rem;
 }
 
 .link,
@@ -41,7 +34,7 @@
 
 .link:hover svg,
 .link:focus svg {
-  stroke: var(--brand-cyan);
+  stroke: var(--link-color);
 }
 
 .link:hover .title,

src/components/molecules/ProjectNav.module.css

@@ -1,5 +1,5 @@
 .projectNav {
-  composes: fullWidth from '../atoms/FullWidth.module.css';
+  composes: fullWidth from '../Layout.module.css';
   white-space: nowrap;
   overflow-y: hidden;
   overflow-x: auto;

src/components/organisms/Header.module.css

@@ -1,6 +1,6 @@
 .header {
   position: relative;
-  padding: var(--spacer);
+  padding: calc(var(--spacer) / 2);
   padding-top: 30vh;
   min-height: calc(100vh - var(--spacer));
   max-height: 1000px;

src/components/organisms/Repositories.jsx

@@ -2,11 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import Repository from '../molecules/Repository'
-import {
+import { sectionTitle, repos as styleRepos } from './Repositories.module.css'
-  section,
-  sectionTitle,
-  repos as styleRepos
-} from './Repositories.module.css'
 
 Repositories.propTypes = {
   repos: PropTypes.array
@@ -16,13 +12,13 @@ export default function Repositories({ repos }) {
   if (!repos) return null
 
   return (
-    <section className={section}>
+    <>
-      <h1 className={sectionTitle}>Open Source Projects</h1>
+      <h2 className={sectionTitle}>Open Source Projects</h2>
       <div className={styleRepos}>
         {repos.map((repo) => (
           <Repository key={repo.name} repo={repo} />
         ))}
       </div>
-    </section>
+    </>
   )
 }

src/components/organisms/Repositories.module.css

@@ -1,24 +1,11 @@
-.section {
-  margin: calc(var(--spacer) * 3) auto 0 auto;
-  max-width: calc(var(--projectImageMaxWidth) + var(--spacer) * 2);
-  padding-left: var(--spacer);
-  padding-right: var(--spacer);
-}
-
 .sectionTitle {
   font-size: var(--font-size-h3);
+  margin-top: calc(var(--spacer) * 6);
   margin-bottom: calc(var(--spacer) * 2);
   text-align: center;
 }
 
 .repos {
-  display: grid;
+  composes: grid from '../../components/Layout.module.css';
-  grid-template-columns: 1fr;
-  gap: calc(var(--spacer) * 2);
-}
-
-@media (min-width: 18rem) {
-  .repos {
   grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
 }
-}

src/pages/index.jsx

@@ -4,9 +4,9 @@ import { Link, graphql } from 'gatsby'
 import shortid from 'shortid'
 import SEO from '../components/atoms/SEO'
 import ProjectImage from '../components/atoms/ProjectImage'
+import { grid } from '../components/Layout.module.css'
 import {
   project as styleProject,
-  projects as styleProjects,
   title as styleTitle,
   imageCount as styleImageCount
 } from './index.module.css'
@@ -67,7 +67,7 @@ export default function Home({ data, pageContext }) {
     <>
       <SEO />
 
-      <div className={styleProjects}>
+      <div className={grid}>
         {projects.map(({ node }) => (
           <Project key={shortid.generate()} node={node} images={images} />
         ))}

src/pages/index.module.css

@@ -1,15 +1,3 @@
-.projects {
-  display: grid;
-  gap: calc(var(--spacer) * 2);
-  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
-}
-
-@media (min-width: 55rem) {
-  .projects {
-    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
-  }
-}
-
 .title {
   font-size: var(--font-size-h4);
   opacity: 0;

src/pages/{ProjectsYaml.slug}.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
-import { fullContainer } from '../components/atoms/FullWidth.module.css'
+import { fullContainer } from '../components/Layout.module.css'
 import ProjectImage from '../components/atoms/ProjectImage'
 import ProjectTechstack from '../components/molecules/ProjectTechstack'
 import ProjectLinks from '../components/molecules/ProjectLinks'

src/pages/{ProjectsYaml.slug}.module.css

@@ -14,7 +14,7 @@
 }
 
 .meta {
-  margin-top: -2rem;
+  margin-top: calc(var(--spacer) * 4);
   margin-bottom: calc(var(--spacer) * 5);
   display: grid;
   grid-template-columns: 1fr;