move to CSS modules

src/components/atoms/Content.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import './Content.scss'
+import styles from './Content.module.scss'
 
 const Content = props => (
-  <div className="content" {...props}>
+  <div className={styles.content} {...props}>
     {props.children}
   </div>
 )

src/components/atoms/FullWidth.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import './FullWidth.scss'
+import styles from './FullWidth.module.scss'
 
-const FullWidth = ({ children }) => <div className="full-width">{children}</div>
+const FullWidth = ({ children }) => (
+  <div className={styles.fullWidth}>{children}</div>
+)
 
 FullWidth.propTypes = {
   children: PropTypes.node

src/components/atoms/FullWidth.module.scss

@@ -1,4 +1,4 @@
-.full-width {
+.fullWidth {
     width: 100vw;
     position: relative;
     left: 50%;

src/components/atoms/LogoUnit.jsx

@@ -1,16 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { ReactComponent as Logo } from '../../images/logo.svg'
-import './LogoUnit.scss'
+import styles from './LogoUnit.module.scss'
 
 const LogoUnit = ({ meta, minimal }) => {
-  const classes = minimal ? 'logounit logounit--minimal' : 'logounit'
+  const classes = minimal
+    ? `${styles.logounit} ${styles.minimal}`
+    : styles.logounit
 
   return (
     <div className={classes}>
-      <Logo className="logounit__logo" />
-      <h1 className="logounit__title">{meta.title.toLowerCase()}</h1>
-      <p className="logounit__description">
+      <Logo className={styles.logounit__logo} />
+      <h1 className={styles.logounit__title}>{meta.title.toLowerCase()}</h1>
+      <p className={styles.logounit__description}>
         <span>{'{ '}</span> {meta.tagline.toLowerCase()} <span>{' }'}</span>
       </p>
     </div>

src/components/atoms/LogoUnit.module.scss

@@ -1,5 +1,9 @@
 @import 'variables';
 
+.logounit {
+    display: block;
+}
+
 .logounit__logo {
     display: block;
     width: 1.5rem;
@@ -36,7 +40,7 @@
     }
 }
 
-.logounit--minimal {
+.minimal {
     transform: scale(.7);
     transform-origin: top center;
     transform-box: border-box;

src/components/molecules/Availability.jsx

@@ -1,7 +1,7 @@
 import React, { Fragment, PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { MoveIn } from '../atoms/Animations'
-import './Availability.scss'
+import styles from './Availability.module.scss'
 
 class Availability extends PureComponent {
   constructor(props) {
@@ -64,7 +64,9 @@ class Availability extends PureComponent {
           <MoveIn>
             <aside
               className={
-                status ? 'availability available' : 'availability unavailable'
+                status
+                  ? `${styles.availability} ${styles.available}`
+                  : `${styles.availability} ${styles.unavailable}`
               }
             >
               <p

src/components/molecules/Networks.jsx

@@ -9,8 +9,8 @@ import { ReactComponent as Twitter } from '../../images/twitter.svg'
 import { ReactComponent as GitHub } from '../../images/github.svg'
 import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
 
-import '../atoms/Icons.scss'
-import './Networks.scss'
+import icons from '../atoms/Icons.module.scss'
+import styles from './Networks.module.scss'
 
 const NetworkIcon = props => {
   switch (props.title) {
@@ -34,7 +34,7 @@ class Network extends PureComponent {
     super(props)
 
     this.state = {
-      classes: 'networks'
+      classes: styles.networks
     }
   }
 
@@ -48,9 +48,9 @@ class Network extends PureComponent {
 
   toggleClasses = () => {
     if (this.props.minimal) {
-      this.setState({ classes: 'networks networks--minimal' })
+      this.setState({ classes: `${styles.networks} ${styles.minimal}` })
     } else {
-      this.setState({ classes: 'networks' })
+      this.setState({ classes: styles.networks })
     }
   }
 
@@ -61,12 +61,12 @@ class Network extends PureComponent {
           <aside className={this.state.classes}>
             {Object.keys(this.props.meta.social).map((key, i) => (
               <OutboundLink
-                className="networks__link"
+                className={styles.link}
                 href={this.props.meta.social[key]}
                 key={i}
               >
-                <NetworkIcon title={key} className="icon" />
-                <span className="networks__title">{key}</span>
+                <NetworkIcon title={key} className={icons.icon} />
+                <span className={styles.title}>{key}</span>
               </OutboundLink>
             ))}
           </aside>

src/components/molecules/Networks.module.scss

@@ -10,7 +10,7 @@
     max-width: 20rem;
 }
 
-.networks__title {
+.title {
     display: block;
     font-size: $font-size-mini;
     color: $brand-grey-light;
@@ -19,7 +19,7 @@
     transition: .2s $easing;
 }
 
-.networks__link {
+.link {
     margin-left: $spacer / 2;
     margin-right: $spacer / 2;
     text-align: center;
@@ -27,35 +27,38 @@
     flex: 1 1 (100% / 5);
 
     &,
-    .icon {
+    svg {
         transition: .2s $easing;
     }
 
-    .icon {
+    svg {
         fill: $brand-grey-light;
     }
 
     &:hover,
     &:focus {
-        .icon {
+        svg {
             fill: $brand-cyan;
         }
 
-        .networks__title {
+        .title {
             opacity: 1;
             transform: translate3d(0, 0, 0);
         }
     }
+}
 
-    .networks--minimal & {
+.minimal {
+    .link {
         padding: $spacer / 4;
         margin-left: $spacer / 4;
         margin-right: $spacer / 4;
+    }
 
-        .icon {
-            width: .85rem;
-            height: .85rem;
-            opacity: .8;
-        }
+    /* stylelint-disable no-descending-specificity */
+    svg {
+        width: .85rem;
+        height: .85rem;
+        opacity: .8;
     }
 }

src/components/molecules/ProjectLinks.jsx

@@ -9,8 +9,8 @@ import { ReactComponent as Styleguide } from '../../images/styleguide.svg'
 import { ReactComponent as GitHub } from '../../images/github.svg'
 import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
 
-import '../atoms/Icons.scss'
-import './ProjectLinks.scss'
+import icons from '../atoms/Icons.module.scss'
+import styles from './ProjectLinks.module.scss'
 
 const LinkIcon = props => {
   switch (props.title) {
@@ -32,8 +32,8 @@ const LinkIcon = props => {
 }
 
 const ProjectLinks = ({ links }) => (
-  <div className="project__links">
-    <h3 className="project__meta__title">
+  <div className={styles.projectLinks}>
+    <h3 className={styles.title}>
       Links <span>Learn more on the interwebz.</span>
     </h3>
 
@@ -44,7 +44,7 @@ const ProjectLinks = ({ links }) => (
         return (
           <li key={title}>
             <OutboundLink href={url}>
-              <LinkIcon title={title} className="icon" />
+              <LinkIcon title={title} className={icons.icon} />
               {title}
             </OutboundLink>
           </li>

src/components/molecules/ProjectLinks.module.scss

@@ -1,6 +1,6 @@
 @import 'variables';
 
-.project__links {
+.projectLinks {
     ul {
         padding: 0;
         display: flex;
@@ -17,7 +17,7 @@
         margin-bottom: $spacer / 2;
     }
 
-    .icon {
+    svg {
         margin-right: $spacer / 3;
         transition: .2s ease-out;
         margin-bottom: -.1rem;
@@ -33,7 +33,7 @@
         transition-property: all;
         background: rgba(#fff, .15);
 
-        .icon {
+        svg {
             fill: $brand-grey-light;
         }
 
@@ -50,3 +50,16 @@
         }
     }
 }
+
+.title {
+    font-size: $font-size-h3;
+    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,10 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 import Img from 'gatsby-image'
+import FullWidth from '../atoms/FullWidth'
 import { ReactComponent as Index } from '../../images/index.svg'
 
-import '../atoms/Icons.scss'
-import './ProjectNav.scss'
+import icons from '../atoms/Icons.module.scss'
+import styles from './ProjectNav.module.scss'
 
 const ProjectNavLink = ({ previous, next }) => {
   const slug = previous ? previous.slug : next.slug
@@ -13,36 +14,38 @@ const ProjectNavLink = ({ previous, next }) => {
   const img = previous ? previous.img : next.img
 
   return (
-    <div className="project__nav__item">
-      <Link className="project__nav__link prev" to={slug}>
+    <div className={styles.item}>
+      <Link className={styles.link + ' prev'} to={slug}>
         <Img
-          className="project__nav__image"
+          className={styles.image}
           sizes={img.childImageSharp.sizes}
           alt={title}
         />
-        <h1 className="project__nav__title">{title}</h1>
+        <h1 className={styles.title}>{title}</h1>
       </Link>
     </div>
   )
 }
 
 const ProjectNav = ({ previous, next }) => (
-  <nav className="project__nav full-width">
-    {previous && <ProjectNavLink previous={previous} />}
-    <Link className="project__nav__index" title="Back to projects" to={'/'}>
-      <Index className="icon" />
-    </Link>
-    {next ? (
-      <ProjectNavLink next={next} />
-    ) : (
-      <div className="project__nav__item project__nav__item--end">
-        <div className="project__nav__end">
-          <h3>This is the end</h3>
-          <p>I would rather not show you my websites from 1999.</p>
+  <FullWidth>
+    <nav className={styles.projectNav}>
+      {previous && <ProjectNavLink previous={previous} />}
+      <Link className={styles.index} title="Back to projects" to={'/'}>
+        <Index className={icons.icon} />
+      </Link>
+      {next ? (
+        <ProjectNavLink next={next} />
+      ) : (
+        <div className={`${styles.item} ${styles.itemEnd}`}>
+          <div className={styles.end}>
+            <h3>This is the end</h3>
+            <p>I would rather not show you my websites from 1999.</p>
+          </div>
         </div>
-      </div>
-    )}
-  </nav>
+      )}
+    </nav>
+  </FullWidth>
 )
 
 ProjectNavLink.propTypes = {

src/components/molecules/ProjectNav.module.scss

@@ -2,14 +2,14 @@
 
 $breakpoint-project-nav: 45rem;
 
-.project__nav {
+.projectNav {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     overflow: hidden;
 }
 
-.project__nav__image {
+.image {
     margin: 0;
     box-shadow: 0 3px 5px rgba($brand-main, .15),
         0 5px 16px rgba($brand-main, .15);
@@ -20,7 +20,7 @@ $breakpoint-project-nav: 45rem;
     }
 }
 
-.project__nav__item {
+.item {
     flex: 1 1 46%;
     position: relative;
     transition: .2s ease-out;
@@ -56,16 +56,22 @@ $breakpoint-project-nav: 45rem;
     }
 }
 
-.project__nav__title {
+.itemEnd {
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+}
+
+.title {
     visibility: hidden;
     font-size: 0;
 }
 
-.project__nav__link {
+.link {
     display: block;
 }
 
-.project__nav__index {
+.index {
     height: 100%;
     display: block;
     align-self: center;
@@ -84,7 +90,7 @@ $breakpoint-project-nav: 45rem;
         width: auto;
     }
 
-    .icon {
+    svg {
         fill: $brand-grey-light;
         width: 1.5rem;
         height: 1.5rem;
@@ -92,7 +98,7 @@ $breakpoint-project-nav: 45rem;
 
     &:hover,
     &:focus {
-        .icon {
+        svg {
             fill: $brand-cyan;
         }
     }
@@ -106,13 +112,7 @@ $breakpoint-project-nav: 45rem;
     }
 }
 
-.project__nav__item--end {
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-}
-
-.project__nav__end {
+.end {
     padding-right: $spacer;
     text-align: left;
 

src/components/molecules/ProjectTechstack.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import './ProjectTechstack.scss'
+import styles from './ProjectTechstack.module.scss'
 
 const ProjectTechstack = ({ techstack }) => (
-  <div className="project__techstack">
-    <h3 className="project__meta__title">
+  <div className={styles.projectTechstack}>
+    <h3 className={styles.title}>
       Tools & Technologies <span>The tech stack I was involved with.</span>
     </h3>
     <ul>{techstack.map(tech => <li key={tech}>{tech}</li>)}</ul>

src/components/molecules/ProjectTechstack.module.scss

@@ -1,6 +1,6 @@
 @import 'variables';
 
-.project__techstack {
+.projectTechstack {
     ul {
         padding: 0;
         display: flex;
@@ -23,3 +23,16 @@
         font-size: $font-size-base;
     }
 }
+
+.title {
+    font-size: $font-size-h3;
+    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/ThemeSwitch.jsx

@@ -4,18 +4,18 @@ import Helmet from 'react-helmet'
 import { FadeIn } from '../atoms/Animations'
 import { ReactComponent as Day } from '../../images/day.svg'
 import { ReactComponent as Night } from '../../images/night.svg'
-import './ThemeSwitch.scss'
+import styles from './ThemeSwitch.module.scss'
 
 const ThemeToggle = props => {
   return (
     <span
       id="toggle"
-      className="checkbox__faux-container"
+      className={styles.checkboxContainer}
       aria-live="assertive"
     >
-      <Day className={props.dark ? 'icon' : 'icon active'} />
-      <span className="checkbox__faux" />
-      <Night className={props.dark ? 'icon active' : 'icon'} />
+      <Day className={props.dark ? null : 'active'} />
+      <span className={styles.checkboxFake} />
+      <Night className={props.dark ? 'active' : null} />
     </span>
   )
 }
@@ -48,9 +48,9 @@ class ThemeSwitch extends PureComponent {
           <body className={this.state.dark ? 'dark' : null} />
         </Helmet>
         <FadeIn>
-          <aside className="themeswitch">
-            <label className="checkbox">
-              <span className="checkbox__label">Toggle Night Mode</span>
+          <aside className={styles.themeSwitch}>
+            <label className={styles.checkbox}>
+              <span className={styles.label}>Toggle Night Mode</span>
               <input
                 onChange={this.handleChange}
                 type="checkbox"

src/components/molecules/ThemeSwitch.module.scss

@@ -1,12 +1,12 @@
 @import 'variables';
 
-.themeswitch {
+.themeSwitch {
     position: absolute;
     top: $spacer / 2;
     right: $spacer;
     z-index: 10;
 
-    .icon {
+    svg {
         width: .8rem;
         height: .8rem;
         margin-top: -.05rem;
@@ -24,7 +24,7 @@
     }
 }
 
-.checkbox__faux-container {
+.checkboxContainer {
     display: flex;
     align-items: center;
 }
@@ -32,7 +32,7 @@
 $knob-size: 8px;
 $knob-space: 1px;
 
-.checkbox__faux {
+.checkboxFake {
     display: block;
     position: relative;
     width: ($knob-size + ($knob-space * 2)) * 2;
@@ -74,7 +74,7 @@ $knob-space: 1px;
     }
 
     [type='checkbox'],
-    .checkbox__label {
+    .label {
         width: 1px;
         height: 1px;
         border: 0;
@@ -87,8 +87,8 @@ $knob-space: 1px;
 
     [type='checkbox'] {
         &:checked {
-            + .checkbox__faux-container {
-                .checkbox__faux {
+            + .checkboxContainer {
+                .checkboxFake {
                     &::after {
                         transform: translate3d(100%, 0, 0);
                     }

src/components/organisms/Footer.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import Vcard from '../atoms/Vcard'
 import LogoUnit from '../atoms/LogoUnit'
 import Networks from '../molecules/Networks'
-import './Footer.scss'
+import styles from './Footer.module.scss'
 
 class Footer extends PureComponent {
   constructor(props) {
@@ -17,16 +17,16 @@ class Footer extends PureComponent {
     const pkg = this.props.pkg
 
     return (
-      <footer className="footer">
+      <footer className={styles.footer}>
         <LogoUnit meta={meta} minimal />
         <Networks meta={meta} minimal />
 
-        <p className="footer__actions">
+        <p className={styles.footer__actions}>
           <Vcard meta={meta} />
           <a href={meta.gpg}>PGP/GPG key</a>
           <a href={pkg.bugs}>Found a bug?</a>
         </p>
-        <p className="footer__copyright">
+        <p className={styles.footer__copyright}>
           <small>
             &copy; {this.state.year} {meta.title} &mdash; All Rights Reserved
           </small>

src/components/organisms/Footer.module.scss

@@ -11,7 +11,7 @@
         font-size: $font-size-mini;
     }
 
-    .networks {
+    > aside {
         margin-top: 0;
         margin-bottom: $spacer * 2;
     }

src/components/organisms/Header.jsx

@@ -6,7 +6,7 @@ import Networks from '../molecules/Networks'
 import Availability from '../molecules/Availability'
 import ThemeSwitch from '../molecules/ThemeSwitch'
 import LogoUnit from '../atoms/LogoUnit'
-import './Header.scss'
+import styles from './Header.module.scss'
 
 class Header extends PureComponent {
   constructor(props) {
@@ -25,9 +25,9 @@ class Header extends PureComponent {
 
   toggleClasses = () => {
     if (this.props.isHomepage) {
-      this.setState({ classes: 'header' })
+      this.setState({ classes: styles.header })
     } else {
-      this.setState({ classes: 'header header--minimal' })
+      this.setState({ classes: `${styles.header} ${styles.minimal}` })
     }
   }
 
@@ -39,7 +39,7 @@ class Header extends PureComponent {
       <header className={this.state.classes}>
         <ThemeSwitch />
         <FadeIn>
-          <Link className="header__logounit-link" to={'/'}>
+          <Link className={styles.header__link} to={'/'}>
             <LogoUnit meta={meta} minimal={!isHomepage} />
           </Link>
         </FadeIn>

src/components/organisms/Header.module.scss

@@ -12,20 +12,20 @@
     text-align: center;
 }
 
-.header__logounit-link {
+.header__link {
     pointer-events: none;
     display: block;
     width: 100%;
 }
 
-.header--minimal {
+.minimal {
     height: auto;
 
     @media (min-width: 30rem) {
         padding-top: $spacer * 2;
     }
 
-    .header__logounit-link {
+    .header__link {
         pointer-events: all;
         width: auto;
     }

src/pages/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 import ProjectImage from '../components/atoms/ProjectImage'
 import FullWidth from '../components/atoms/FullWidth'
-import './index.scss'
+import styles from './index.module.scss'
 
 const Home = ({ data }) => {
   const projects = data.allProjectsYaml.edges
@@ -14,9 +14,9 @@ const Home = ({ data }) => {
         const { slug, title, img } = node
 
         return (
-          <article className="projects__project" key={slug}>
+          <article className={styles.project} key={slug}>
             <Link to={slug}>
-              <h1 className="projects__project__title">{title}</h1>
+              <h1 className={styles.title}>{title}</h1>
               <ProjectImage sizes={img.childImageSharp.sizes} alt={title} />
             </Link>
           </article>

src/pages/index.module.scss

@@ -1,6 +1,6 @@
 @import 'variables';
 
-.projects__project {
+.project {
     text-align: center;
     margin-bottom: $spacer * 4;
 
@@ -42,7 +42,7 @@
     }
 }
 
-.projects__project__title {
+.title {
     visibility: hidden;
     font-size: 0;
     margin: 0;