Move to CSS modules and Sass

src/components/About.js

@@ -1,22 +1,23 @@
 import React, {Component} from 'react';
 import '../static/stylesheets/globals.scss';
-import './About.scss';
+import styles from './About.scss';
+import contentStyle from '../static/stylesheets/content.scss';
 
 export default class About extends Component {
 
   render () {
     if (this.props.isLoading) {
       return (
-        <div className="content-wrapper">
+        <div className={contentStyle.contentWrapper}>
           <h1>Loading</h1>
         </div>
       );
     }
 
     return (
-      <div className="content-wrapper">
+      <div className={contentStyle.contentWrapper}>
         <h1>About</h1>
-        <div className="content" dangerouslySetInnerHTML={{__html: this.props.about.body}}>
+        <div className={contentStyle.content} dangerouslySetInnerHTML={{__html: this.props.about.body}}>
         </div>
       </div>
     )

src/components/Blog.js

@@ -1,13 +1,14 @@
 import React, {Component} from 'react';
 import '../static/stylesheets/globals.scss';
 import styles from './Blog.scss';
+import contentStyle from '../static/stylesheets/content.scss';
 
 export default class Blog extends Component {
 
   render() {
     if (this.props.isLoading) {
       return (
-        <div className="content-wrapper">
+        <div className={contentStyle.contentWrapper}>
           <h1>Loading</h1>
         </div>
       );
@@ -35,10 +36,10 @@ export default class Blog extends Component {
     )
 
     return (
-      <div className="content-wrapper">
+      <div className={contentStyle.contentWrapper}>
         <h1>Blog</h1>
 
-        <div className="content">
+        <div className={contentStyle.content}>
           {posts}
         </div>
 

src/components/NotFoundPage.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import '../static/stylesheets/globals.scss';
+import contentStyle from '../static/stylesheets/content.scss';
 
 export const NotFoundPage = (props) => {
   if (props.location.pathname === '/') {
@@ -7,7 +8,7 @@ export const NotFoundPage = (props) => {
   }
   return (
     <div>
-      <div className="content-wrapper">
+      <div className={contentStyle.contentWrapper}>
         <h1>Uhm... WHAT?</h1>
         <h2>Looks like you&apos;re lost</h2>
         <p>404 Page not found</p>

src/components/Post.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import '../static/stylesheets/globals.scss';
-import './Post.scss';
+import contentStyle from '../static/stylesheets/content.scss';
+import styles from './Post.scss';
 
 export default class Post extends Component {
   render() {
@@ -12,15 +13,15 @@ export default class Post extends Component {
     }
 
     return (
-      <div className="content-wrapper">
+      <div className={contentStyle.contentWrapper}>
         <a href={this.props.post.link}>
           <h1>{this.props.post.title}</h1>
         </a>
-        <div className="content">
+        <div className={contentStyle.content}>
-          <div className="post-date">
+          <div className={styles.postDate}>
             <h3>{this.props.post.published}</h3>
           </div>
-          <div className="post-content" dangerouslySetInnerHTML={{__html: this.props.post.body}}>
+          <div className={styles.postContent} dangerouslySetInnerHTML={{__html: this.props.post.body}}>
           </div>
         </div>
       </div>

src/components/Post.scss

@@ -1,10 +1,10 @@
 @import "../static/stylesheets/variables.scss";
 
-.post-content {
+.postContent {
   clear: both;
 }
 
-.post-date {
+.postDate {
 	float: right;
   h3 {
     font-weight: normal

src/static/stylesheets/content.scss

@@ -0,0 +1,28 @@
+@import "./variables.scss";
+
+.contentWrapper {
+  margin-left: 320px;
+  overflow: auto;
+  padding: 20px;
+  h1 {
+    text-align: center;
+  }
+  a {
+    color: $blue;
+  }
+  @media screen and (max-width: $break-medium) {
+    width: 100%;
+    float: none;
+  }
+  @media screen and (min-width: $break-large) {
+    margin-left: 500px;
+  }
+}
+
+.content {
+  box-sizing: border-box;
+  margin: 0 auto;
+  @media screen and (min-width: $break-large) {
+    width: 90%;
+  }
+}

src/static/stylesheets/globals.scss

@@ -1,24 +1,5 @@
 @import "./variables.scss";
 
-:global(.content-wrapper) {
-  margin-left: 320px;
-  overflow: auto;
-  padding: 20px;
-  h1 {
-    text-align: center;
-  }
-  a {
-    color: $blue;
-  }
-  @media screen and (max-width: $break-medium) {
-    width: 100%;
-    float: none;
-  }
-  @media screen and (min-width: $break-large) {
-    margin-left: 500px;
-  }
-}
-
 :global(body) {
   font-family: $font-paragraph;
   color: $black;
@@ -30,11 +11,3 @@
     font-family: $font-header;
   }
 }
-
-:global(.content) {
-  box-sizing: border-box;
-  margin: 0 auto;
-  @media screen and (min-width: $break-large) {
-    width: 90%;
-  }
-}