Use CSS Modules

package.json

@@ -88,8 +88,7 @@
   "dependencies": {
     "lost": "^6.7.2",
     "moment": "^2.12.0",
-    "rucksack-css": "^0.8.5",
-    "safe-access": "^0.1.0",
-    "sugarss": "^0.1.2"
+    "postcss-import": "^8.0.2",
+    "rucksack-css": "^0.8.5"
   }
 }

scripts/webpack.config.babel.js

@@ -32,17 +32,21 @@ export default ({ config, pkg }) => ({
         },
       },
       {
-        test: /\.css$/,
+        test: /global\.styles$/,
         loader: ExtractTextPlugin.extract(
           "style-loader",
           "css-loader!postcss-loader",
         ),
       },
       {
-        test: /\.sss$/,
+        test: /\.css$/,
         loader: ExtractTextPlugin.extract(
           "style-loader",
-          "css-loader!postcss-loader?parser=sugarss",
+          "css-loader" + (
+            "?modules"+
+            "&localIdentName=[path][name]--[local]--[hash:base64:5]"
+          ) + "!" +
+          "postcss-loader",
         ),
       },
       {
@@ -62,10 +66,21 @@ export default ({ config, pkg }) => ({
 
   postcss: () => [
     // require("stylelint")(),
-    require("lost")(),
-    require("rucksack-css")({
-      autoprefixer: true,
+    require("postcss-import")(),
+    require("postcss-cssnext")({
+      browsers: "last 2 versions",
+      features: {
+        customMedia: {
+          extensions: {
+            "--lg": "screen and (max-width: 1100px)",
+            "--md": "screen and (max-width: 900px)",
+            "--sm": "screen and (max-width: 500px)",
+          },
+        },
+      },
     }),
+    require("lost")(),
+    require("rucksack-css")(),
     require("postcss-browser-reporter")(),
     require("postcss-reporter")(),
   ],
@@ -76,8 +91,6 @@ export default ({ config, pkg }) => ({
       NODE_ENV: JSON.stringify(
         config.production ? "production" : process.env.NODE_ENV
       ),
-      CLIENT: true,
-      REDUX_DEVTOOLS: Boolean(process.env.REDUX_DEVTOOLS),
       STATINAMIC_PATHNAME: JSON.stringify(process.env.STATINAMIC_PATHNAME),
     } }),
     ...config.production && [

web_modules/LayoutContainer/global/global.styles

@@ -0,0 +1,4 @@
+@import "./reset.css";
+@import "./typography.css";
+@import "./highlight.css";
+@import "./heading-anchors.css";

web_modules/LayoutContainer/highlight.css → web_modules/LayoutContainer/global/highlight.css

@@ -1,14 +1,8 @@
 p > code, span > code {
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
 	border-radius: 3px;
 	white-space: pre;
 	white-space: pre-wrap;
 	white-space: pre-line;
-	white-space: -pre-wrap;
-	white-space: -o-pre-wrap;
-	white-space: -moz-pre-wrap;
-	white-space: -hp-pre-wrap;
 	word-wrap: break-word;
 	background: #f8f8f8;
 	display: inline;
@@ -78,4 +72,4 @@ pre code {
 }
 .hljs-strong {
 	font-weight: bold;
-}
+}

web_modules/LayoutContainer/index.js

@@ -2,11 +2,8 @@
 import React, { Component, PropTypes } from "react"
 import Helmet from "react-helmet"
 
-import "./reset.css"
-import "./typography.css"
-import "./highlight.css"
-import "./heading-anchors.css"
-import "./blog.sss"
+import "./global/global.styles"
+import styles from "./styles.css"
 
 export default class Layout extends Component {
 
@@ -38,10 +35,10 @@ export default class Layout extends Component {
           ] }
           meta={ [
             { property: "og:site_name", content: config.siteTitle },
-            { name: "twitter:site", content: config.twitter },
+            { name: "twitter:site", content: `@${  config.twitter }` },
           ] }
         />
-        <div className="wrapper">
+        <div className={ styles.wrapper }>
           { this.props.children }
         </div>
       </div>

web_modules/LayoutContainer/styles.css

@@ -0,0 +1,3 @@
+.wrapper {
+  lost-center: 1070px;
+}

web_modules/components/GoHomeButton/index.js

@@ -0,0 +1,13 @@
+import React, { PropTypes } from "react"
+import Link from "statinamic/lib/Link"
+import styles from "./styles.css"
+
+const GoHomeButton = ({ text }) => ((
+  <Link to="/" className={ styles.button }>{ text }</Link>
+))
+
+GoHomeButton.propTypes = {
+  text: PropTypes.string.isRequired,
+}
+
+export default GoHomeButton

web_modules/components/GoHomeButton/styles.css

@@ -0,0 +1,27 @@
+.button {
+  font-family: 'Raleway', Helvetica, Arial, sans-serif;
+	font-size: 16px;
+	text-align: center;
+	color: #343e47;
+	font-weight: 600;
+	position: fixed;
+	left: 20px;
+	top: 20px;
+	opacity: 0.5;
+	padding: 8px 18px;
+	border: 2px solid #343e47 !important;
+	border-radius: 3px;
+
+  @media (--md) {
+    position: static;
+    margin: 20px auto 0;
+    text-align: center;
+    width: 85px;
+    display: block;
+  }
+}
+
+.button:hover {
+  color: #201e28;
+	opacity: 1;
+}

web_modules/components/SidebarLayout/index.js

@@ -0,0 +1,22 @@
+import React, { Component, PropTypes } from "react"
+import SidebarLeft from "../SidebarLeft"
+import styles from "./styles.css"
+
+export default class SidebarLayout extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  render() {
+    return (
+      <div>
+        <SidebarLeft />
+        <div className={ styles.wrapper }>
+          <main className={ styles.inner }>
+            { this.props.children }
+          </main>
+        </div>
+      </div>
+    )
+  }
+}

web_modules/components/SidebarLayout/styles.css

@@ -0,0 +1,27 @@
+.wrapper {
+  lost-column: 2/3;
+
+  @media (--lg) {
+    lost-column: 2/4;
+  }
+  @media (--md) {
+    lost-column: 7/12;
+  }
+  @media (--sm) {
+    lost-column: 4/4;
+  }
+}
+
+.inner {
+  padding: 40px 35px;
+
+  @media (--lg) {
+    padding: 35px 20px;
+  }
+  @media (--md) {
+    padding: 30px 20px
+  }
+  @media (--sm) {
+    padding: 25px 20px;
+  }
+}

web_modules/components/SidebarLeft/index.js

@@ -3,8 +3,7 @@ import Link from "statinamic/lib/Link"
 import SidebarNav from "../SidebarNav"
 import Avatar from "./avatar.jpg"
 import Social from "../SidebarSocial"
-// import BlogSocial from "../BlogSocial"
-import "./style.sss"
+import styles from "./style.css"
 
 class SidebarLeft extends React.Component {
   static contextTypes = {
@@ -17,39 +16,23 @@ class SidebarLeft extends React.Component {
     } = this.context.metadata
 
     return (
-      <div className="sidebar">
-        <div className="sidebar-inner">
+      <div className={ styles.wrapper }>
+        <div className={ styles.inner }>
           <header>
-            <Link
-              style={ {
-                textDecoration: "none",
-                borderBottom: "none",
-                outline: "none",
-              } }
-              to="/"
-            >
+            <Link className={ styles.siteLogo } to="/">
               <img src={ Avatar } width="75" height="75" />
             </Link>
             <h1>
-              <Link
-                style={ {
-                  textDecoration: "none",
-                  borderBottom: "none",
-                  color: "inherit",
-                } }
-                to={ "/" }
-              >
+              <Link className={ styles.siteTitle } to={ "/" }>
                 { config.siteTitle }
               </Link>
             </h1>
-            <p>
-              { config.siteDescr }
-            </p>
+            <p>{ config.siteDescr }</p>
           </header>
           <SidebarNav />
           <footer>
             <Social />
-            <p className="copyright">&copy; All rights reserved.</p>
+            <p className={ styles.copyright }>&copy; All rights reserved.</p>
           </footer>
         </div>
       </div>

web_modules/components/SidebarLeft/style.css

@@ -0,0 +1,87 @@
+.wrapper {
+  lost-column: 1/3;
+
+  @media (--lg) {
+    lost-column: 2/4;
+  }
+  @media (--md) {
+    lost-column: 5/12;
+  }
+  @media (--sm) {
+    lost-column: 4/4;
+  }
+}
+
+.inner {
+  position: relative;
+	padding: 40px;
+
+  @media (--lg) {
+    padding: 35px 20px 0;
+  }
+  @media (--md) {
+    padding: 30px 20px 0;
+  }
+  @media (--sm) {
+    padding: 25px 20px 0;
+  }
+}
+
+.inner:after {
+	background: #eee;
+	background: linear-gradient(to bottom, #eee 0%, #eee 48%, #fff 100%);
+	position: absolute;
+	content: '';
+	width: 1px;
+	height: 540px;
+	top: 30px;
+	right: -10px;
+	bottom: 0;
+
+  @media (--sm) {
+    display: none;
+  }
+}
+
+.inner img {
+	display: inline-block;
+	margin-bottom: 0;
+	border-radius: 50%;
+	background-clip: padding-box;
+}
+
+.inner h1,
+.inner h2 {
+  font-size: responsive 16px 18px;
+  line-height: 1;
+  margin: 20px 0 10px;
+}
+
+.inner p {
+  font-size: 14px;
+	color: #888;
+	line-height: 23px;
+	margin-bottom: 23px;
+}
+
+.copyright {
+  color: #b6b6b6;
+	font-size: 12px;
+}
+
+.siteTitle {
+  text-decoration: none;
+  border-bottom: none;
+  color: inherit;
+}
+
+.siteLogo {
+  text-decoration: none;
+  border-bottom: none;
+  outline: none;
+
+  &:visited:hover,
+  &:hover {
+    border-bottom: none;
+  }
+}