project meta refactor

src/components/molecules/ProjectLinks.module.scss

@@ -21,14 +21,5 @@
 }
 
 .title {
-    font-size: $font-size-h3;
+    composes: metaTitle from '../../templates/Project.module.scss';
-    margin-bottom: $spacer * 1.5;
-
-    span {
-        display: block;
-        margin-top: $spacer / 3;
-        font-size: $font-size-base;
-        font-family: $font-family-base;
-        color: $brand-grey-light;
-    }
 }

src/components/molecules/ProjectNav.jsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql, StaticQuery } from 'gatsby'
 import Img from 'gatsby-image'
-import FullWidth from '../atoms/FullWidth'
 import styles from './ProjectNav.module.scss'
 
 const query = graphql`
@@ -73,26 +72,24 @@ export default class ProjectNav extends Component {
           const projects = data.allProjectsYaml.edges
 
           return (
-            <FullWidth>
+            <nav
-              <nav
+              className={styles.projectNav}
-                className={styles.projectNav}
+              ref={node => (this.scrollContainer = node)}
-                ref={node => (this.scrollContainer = node)}
+            >
-              >
+              {projects.map(({ node }) => {
-                {projects.map(({ node }) => {
+                const current = node.slug === slug
-                  const current = node.slug === slug
 
-                  return (
+                return (
-                    <div
+                  <div
-                      className={styles.item}
+                    className={styles.item}
-                      key={node.slug}
+                    key={node.slug}
-                      ref={node => current && (this.currentItem = node)}
+                    ref={node => current && (this.currentItem = node)}
-                    >
+                  >
-                      <ProjectLink node={node} />
+                    <ProjectLink node={node} />
-                    </div>
+                  </div>
-                  )
+                )
-                })}
+              })}
-              </nav>
+            </nav>
-            </FullWidth>
           )
         }}
       />

src/components/molecules/ProjectNav.module.scss

@@ -1,7 +1,6 @@
 @import 'variables';
 
 .projectNav {
-    // composes: fullWidth from '../atoms/FullWidth.module.scss';
     white-space: nowrap;
     overflow-y: hidden;
     overflow-x: auto;

src/components/molecules/ProjectTechstack.module.scss

@@ -28,14 +28,5 @@
 }
 
 .title {
-    font-size: $font-size-h3;
+    composes: metaTitle from '../../templates/Project.module.scss';
-    margin-bottom: $spacer * 1.5;
-
-    span {
-        display: block;
-        margin-top: $spacer / 3;
-        font-size: $font-size-base;
-        font-family: $font-family-base;
-        color: $brand-grey-light;
-    }
 }

src/templates/Project.jsx

@@ -9,11 +9,10 @@ import ProjectTechstack from '../components/molecules/ProjectTechstack'
 import ProjectLinks from '../components/molecules/ProjectLinks'
 import ProjectNav from '../components/molecules/ProjectNav'
 import SEO from '../components/atoms/SEO'
-
 import styles from './Project.module.scss'
 
 const ProjectMeta = ({ links, techstack }) => (
-  <footer className={styles.project__meta}>
+  <footer className={styles.meta}>
     {!!links && <ProjectLinks links={links} />}
     {!!techstack && <ProjectTechstack techstack={techstack} />}
   </footer>
@@ -22,7 +21,7 @@ const ProjectMeta = ({ links, techstack }) => (
 const ProjectImages = ({ projectImages, title }) => (
   <FullWidth>
     {projectImages.map(({ node }) => (
-      <div className={styles.spacer} key={node.id}>
+      <div className={styles.imageWrap} key={node.id}>
         <ProjectImage fluid={node.fluid} alt={title} />
       </div>
     ))}
@@ -44,11 +43,11 @@ const Project = ({ data }) => {
 
       <article>
         <header>
-          <h1 className={styles.project__title}>{title}</h1>
+          <h1 className={styles.title}>{title}</h1>
         </header>
         <ReactMarkdown
           source={descriptionWithLineBreaks}
-          className={styles.project__description}
+          className={styles.description}
         />
         <ProjectImages projectImages={projectImages} title={title} />
         <ProjectMeta links={links} techstack={techstack} />

src/templates/Project.module.scss

@@ -1,7 +1,7 @@
 @import 'variables';
 @import '../components/molecules/ProjectImage.module';
 
-.spacer {
+.imageWrap {
     margin-bottom: $spacer * 3;
 
     @media (min-width: $screen-xs) {
@@ -9,7 +9,7 @@
     }
 }
 
-.project__title {
+.title {
     font-size: $font-size-h2;
 
     @media (min-width: $screen-xs) {
@@ -17,12 +17,12 @@
     }
 }
 
-.project__description {
+.description {
     font-size: $font-size-base;
     margin-bottom: $spacer * 2;
 }
 
-.project__meta {
+.meta {
     margin-top: -($spacer);
     margin-bottom: $spacer * 5;
     display: grid;
@@ -35,7 +35,7 @@
     }
 }
 
-.project__meta__title {
+.metaTitle {
     font-size: $font-size-h3;
     margin-bottom: $spacer * 1.5;