From c5cbe446f50d673232742372e7d9755fe8ad6032 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 20 Jun 2018 22:53:08 +0200
Subject: [PATCH] load base css on client entry

---
 gatsby-browser.js                                | 3 +++
 package.json                                     | 1 -
 src/components/Layout.jsx                        | 1 -
 src/{components/Layout.scss => styles/base.scss} | 9 ++-------
 4 files changed, 5 insertions(+), 9 deletions(-)
 create mode 100644 gatsby-browser.js
 rename src/{components/Layout.scss => styles/base.scss} (91%)

diff --git a/gatsby-browser.js b/gatsby-browser.js
new file mode 100644
index 0000000..bb138ee
--- /dev/null
+++ b/gatsby-browser.js
@@ -0,0 +1,3 @@
+exports.onClientEntry = () => {
+  require('./src/styles/base.scss')
+}
diff --git a/package.json b/package.json
index dc5818a..ddf804d 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,6 @@
     "vcf": "^2.0.1"
   },
   "devDependencies": {
-    "@types/prop-types": "^15.5.3",
     "babel-eslint": "^8.2.3",
     "eslint": "^5.0.0",
     "eslint-config-prettier": "^2.9.0",
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 7638f2d..aec818a 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -7,7 +7,6 @@ import Head from './atoms/Head'
 import Header from './organisms/Header'
 import Footer from './organisms/Footer'
 import { FadeIn } from './atoms/Animations'
-import './Layout.scss'
 
 class TransitionHandler extends Component {
   shouldComponentUpdate() {
diff --git a/src/components/Layout.scss b/src/styles/base.scss
similarity index 91%
rename from src/components/Layout.scss
rename to src/styles/base.scss
index 3149747..8744b64 100644
--- a/src/components/Layout.scss
+++ b/src/styles/base.scss
@@ -15,11 +15,6 @@ body {
 
 html {
     font-size: $font-size-root;
-
-    &.wf-loading,
-    &.wf-inactive {
-        font-size: $font-size-root - 2px;
-    }
 }
 
 body {
@@ -115,11 +110,11 @@ svg {
     display: flex;
     min-height: 100vh;
     flex-direction: column;
-    background: $body-background-color;
+    background-color: $body-background-color;
     transition: background .6s $easing;
 
     .dark & {
-        background: $body-background-color--dark;
+        background-color: $body-background-color--dark;
         color: $text-color--dark;
     }
 }