From 2afed92c82159f496f0434a238d2dd0d47bf05c1 Mon Sep 17 00:00:00 2001
From: Steven Evans <kopelli@gmail.com>
Date: Mon, 16 Jul 2018 23:36:48 -0400
Subject: [PATCH] [refactor] Moving global styling out of "loader"

---
 css/_reset.scss | 15 +++++++++++++++
 css/_theme.scss |  1 +
 css/loader.scss | 18 +-----------------
 css/styles.scss | 24 +++++++++++++++---------
 4 files changed, 32 insertions(+), 26 deletions(-)
 create mode 100644 css/_reset.scss

diff --git a/css/_reset.scss b/css/_reset.scss
new file mode 100644
index 000000000..84877ec88
--- /dev/null
+++ b/css/_reset.scss
@@ -0,0 +1,15 @@
+@import "theme";
+
+* {
+    font-size: $defaultFontSize;
+    font-family: $fontFamily;
+}
+
+*,
+*:before,
+*:after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    vertical-align: top;
+}
diff --git a/css/_theme.scss b/css/_theme.scss
index 52603eb3d..e9ffd2225 100644
--- a/css/_theme.scss
+++ b/css/_theme.scss
@@ -1 +1,2 @@
 $fontFamily: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Courier New', Courier, monospace, 'Times New Roman';
+$defaultFontSize: 16px;
diff --git a/css/loader.scss b/css/loader.scss
index 1dda09b90..6e4cb12b1 100644
--- a/css/loader.scss
+++ b/css/loader.scss
@@ -1,4 +1,5 @@
 @import "mixins";
+@import "reset";
 
 @include keyframes(LOADERSPINNER) {
     0% {
@@ -28,13 +29,6 @@
     }
 }
 
-*, *:before, *:after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    vertical-align: top;
-}
-
 .loaderoverlay {
     $spinnerBoxSize: 200px;
     $themeColor: #6f3;
@@ -100,13 +94,3 @@
         left: 50%;
     }
 }
-
-button[type="button"] {
-    @include transform(translateX(-50%));
-
-    padding: 0.5rem 1rem;
-    position: absolute;
-    z-index: 1;
-    bottom: 10px;
-    left: 50%;
-}
diff --git a/css/styles.scss b/css/styles.scss
index cdb9a9c05..801b2d58c 100644
--- a/css/styles.scss
+++ b/css/styles.scss
@@ -1,19 +1,14 @@
 @import "mixins";
 @import "theme";
 
+@import "reset";
+
 :root{
     --my-font-color: #6f3;
     --my-background-color: #000;
     --my-highlight-color: #fff;
 }
 
-* {
-    margin: 0;
-    padding: 0;
-    font-size: 16px;
-    font-family: $fontFamily;
-}
-
 body {
     background-color: var(--my-background-color);
 }
@@ -26,7 +21,7 @@ h2,
 }
 
 h1 {
-    font-size: 22px;
+    font-size: $defaultFontSize * 1.375;
     color: var(--my-font-color);
 }
 
@@ -44,6 +39,16 @@ span {
     padding: 4px;
 }
 
+button[type="button"] {
+    @include transform(translateX(-50%));
+
+    padding: 0.5rem 1rem;
+    position: absolute;
+    z-index: 1;
+    bottom: 10px;
+    left: 50%;
+}
+
 #entire-game-container {
     background-color: transparent;
 }
@@ -130,7 +135,8 @@ tr:focus {
 }
 
 /* Make html links ("a" elements) nice looking buttons with this class */
-a:link, a:visited {
+a:link,
+a:visited {
     color: #fff;
 }