Add globalStyles

src/App.js

@@ -1,12 +1,14 @@
 import React, { Component } from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import Helmet from 'react-helmet'
+
 import Home from './views/Home'
 import About from './views/About'
 import NoMatch from './views/NoMatch'
 import Nav from './components/Nav'
 import NavLink from './components/NavLink'
 import Logo from './components/Logo'
+import globalStyles from './globalStyles'
 
 const siteTitle = 'HyperStatic'
 const routes = [
@@ -23,6 +25,9 @@ const routes = [
 ]
 
 class App extends Component {
+  componentDidMount () {
+    globalStyles()
+  }
   render () {
     return (
       <Router>

src/components/NavLink.js

@@ -2,18 +2,20 @@ import React from 'react'
 import { Route, Link } from 'react-router-dom'
 import styled from 'styled-components'
 
+import { color } from '../globalStyles'
+
 const NavLink = styled.span`
   a {
     padding: .5rem 1rem;
     display: block;
     font-weight: 400;
     transition: color 0.2s, border-bottom-color 0.2s;
-    color: ${props => props.active ? 'var(--col1)' : 'inherit'};
+    color: ${props => props.active ? color.primary : 'inherit'};
     text-decoration: none;
     border-bottom: 1px solid;
-    border-bottom-color: ${props => props.active ? 'var(--col1)' : 'transparent'};
+    border-bottom-color: ${props => props.active ? color.primary : 'transparent'};
     &:hover, &:active, &:focus {
-      color: ${props => props.active ? 'var(--col1)' : 'inherit'};
+      color: ${props => props.active ? color.primary : 'inherit'};
     }
   }
 `

src/components/PageHeader.js

@@ -2,10 +2,12 @@ import React from 'react'
 import styled from 'styled-components'
 import { Section, Container } from './common'
 
+import { color } from '../globalStyles'
+
 const Header = styled(Section)`
   line-height: 1em;
-  color: var(--col1);
-  background: var(--col1);
+  color: ${color.primary};
+  background: ${color.primary};
   color: white;
   h2{
     font-weight: 100;

src/globalStyles.js

@@ -0,0 +1,43 @@
+import { injectGlobal } from 'styled-components'
+
+export const color = {
+  primary: '#FA5463',
+  secondary: '#212121',
+  lightGrey: 'whitesmoke'
+}
+
+export const font = {
+  primary: `'Avenir', sans-serif`
+}
+
+export default () => injectGlobal`
+  html{
+    box-sizing: border-box;
+    font-size: 62.5%;
+    background: ${color.lightGrey};
+  }
+
+  body {
+    font-family: ${font.primary};
+    min-height: 100vh;
+    position: relative;
+    background: white;
+    color: ${color.secondary};
+    font-size: 1.6em;
+    font-weight: 300;
+    letter-spacing: .01em;
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+
+
+  a{
+    color: ${color.primary};
+  }
+`

src/index.css

@@ -1,34 +0,0 @@
-:root{
-  --col1: #FA5463;
-  --col2: #212121;
-}
-
-html{
-  box-sizing: border-box;
-  font-size: 62.5%;
-  background: whitesmoke;
-}
-
-body {
-  font-family: 'Avenir', sans-serif;
-  min-height: 100vh;
-  position: relative;
-  background: white;
-  color: var(--col2);
-	font-size: 1.6em;
-	font-weight: 300;
-	letter-spacing: .01em;
-	line-height: 1.6;
-  font-smoothing: antialiased;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-
-a{
-  color: var(--col1);
-}

src/index.js

@@ -2,7 +2,6 @@ import React from 'react'
 import { render } from 'react-snapshot'
 import App from './App'
 import 'normalize.css'
-import './index.css'
 
 const rootEl = document.getElementById('root')
 render(<App />, rootEl)