From 60e6348dc8d53f1e81ebdb2ec0e1962aac1e9842 Mon Sep 17 00:00:00 2001
From: undergroundwires <undergroundwires@users.noreply.github.com>
Date: Mon, 6 Jan 2020 20:41:37 +0100
Subject: [PATCH] using font variables

---
 src/App.vue                                       | 2 +-
 src/presentation/IconButton.vue                   | 3 ++-
 src/presentation/Scripts/Cards/CardList.vue       | 2 +-
 src/presentation/Scripts/Selector/TheSelector.vue | 2 +-
 src/presentation/Scripts/TheGrouper.vue           | 2 +-
 src/presentation/TheHeader.vue                    | 3 ++-
 src/presentation/TheSearchBar.vue                 | 2 +-
 src/presentation/styles/fonts.scss                | 5 +++--
 8 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index da744f5b..a6e65f11 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -55,7 +55,7 @@ export default class App extends Vue {
 
 body {
   background: $light-gray;
-  font-family: 'Slabo 27px', serif;
+  font-family: $fancy-font;
   color: $slate;
 }
 
diff --git a/src/presentation/IconButton.vue b/src/presentation/IconButton.vue
index adb3b8b0..6e95e4ac 100644
--- a/src/presentation/IconButton.vue
+++ b/src/presentation/IconButton.vue
@@ -29,6 +29,7 @@ export default class IconButton extends StatefulVue {
 
 <style scoped lang="scss">
 @import "@/presentation/styles/colors.scss";
+@import "@/presentation/styles/fonts.scss";
 
 .button {
     display: flex;
@@ -63,7 +64,7 @@ export default class IconButton extends StatefulVue {
     }
     &__text {
         display: none;
-        font-family: 'Yesteryear', cursive;
+        font-family: $artistic-font;
         font-size: 1.5em;
         color: $gray;
         font-weight: 500;
diff --git a/src/presentation/Scripts/Cards/CardList.vue b/src/presentation/Scripts/Cards/CardList.vue
index 65b8ab8e..8680fc04 100644
--- a/src/presentation/Scripts/Cards/CardList.vue
+++ b/src/presentation/Scripts/Cards/CardList.vue
@@ -57,6 +57,6 @@ export default class CardList extends StatefulVue {
   width: 100%;
   text-align: center;
   font-size: 3.5em;
-  font: $default-font;
+  font: $normal-font;
 }
 </style>
\ No newline at end of file
diff --git a/src/presentation/Scripts/Selector/TheSelector.vue b/src/presentation/Scripts/Selector/TheSelector.vue
index e7d13b7a..9aa3b521 100644
--- a/src/presentation/Scripts/Selector/TheSelector.vue
+++ b/src/presentation/Scripts/Selector/TheSelector.vue
@@ -100,7 +100,7 @@ export default class TheSelector extends StatefulVue {
         display: flex;
         margin-right:5px;
     }
-    font:16px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+    font-family: $normal-font;
 }
 
 </style>
diff --git a/src/presentation/Scripts/TheGrouper.vue b/src/presentation/Scripts/TheGrouper.vue
index 0f0fb9b5..5cb84837 100644
--- a/src/presentation/Scripts/TheGrouper.vue
+++ b/src/presentation/Scripts/TheGrouper.vue
@@ -31,7 +31,7 @@ export default class TheGrouper extends StatefulVue {
 
 .container {
     // text-align:left;
-    font:16px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+    font:$normal-font;
 
 }
 .enabled {
diff --git a/src/presentation/TheHeader.vue b/src/presentation/TheHeader.vue
index 0535e5e3..4741bab3 100644
--- a/src/presentation/TheHeader.vue
+++ b/src/presentation/TheHeader.vue
@@ -28,6 +28,7 @@ export default class TheHeader extends StatefulVue {
 
 <style scoped lang="scss">
 @import "@/presentation/styles/colors.scss";
+@import "@/presentation/styles/fonts.scss";
 #container {
   display: flex;
   align-items: center;
@@ -50,7 +51,7 @@ export default class TheHeader extends StatefulVue {
     margin: 0;
     font-size: 1.5em;
     color: $gray;
-    font-family: 'Yesteryear', cursive;
+    font-family: $artistic-font;
     font-weight: 500;
     line-height: 1.2;
   }
diff --git a/src/presentation/TheSearchBar.vue b/src/presentation/TheSearchBar.vue
index 5d1e4d7d..62daee56 100644
--- a/src/presentation/TheSearchBar.vue
+++ b/src/presentation/TheSearchBar.vue
@@ -38,7 +38,7 @@ export default class TheSearchBar extends StatefulVue {
     padding-top: 30px;
     padding-right: 30%;
     padding-left: 30%;
-    font: $default-font;
+    font: $normal-font;
 }
 
 .search {
diff --git a/src/presentation/styles/fonts.scss b/src/presentation/styles/fonts.scss
index 981902cc..029f8aad 100644
--- a/src/presentation/styles/fonts.scss
+++ b/src/presentation/styles/fonts.scss
@@ -23,5 +23,6 @@
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   }
 
-  $default-font: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
-  $artistic-font: 'Yesteryear', cursive;
\ No newline at end of file
+  $normal-font: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+  $artistic-font: 'Yesteryear', cursive;
+  $fancy-font: 'Slabo 27px';
\ No newline at end of file