From 1c0cc228f65356524e01b42d1a75cedf098f9efe Mon Sep 17 00:00:00 2001
From: pskfyi <patrick.keenan.fyi@gmail.com>
Date: Thu, 13 Jan 2022 13:02:43 -0800
Subject: [PATCH] feat: custom fonts

---
 components/KeyArtStage.vue |  5 +++--
 components/TimeHeader.vue  |  1 +
 layouts/default.vue        |  9 ++++++++-
 pages/Missions.vue         | 20 +++++---------------
 pages/TimeMachine.vue      |  8 ++++----
 5 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/components/KeyArtStage.vue b/components/KeyArtStage.vue
index 1d8d3bc..ca56733 100644
--- a/components/KeyArtStage.vue
+++ b/components/KeyArtStage.vue
@@ -9,10 +9,11 @@
         class="spare-time flex flex-row items-center font-bold rounded-2xl select-none"
         :class="`text-${$store.getters.activeTab.darkColor}`"
       >
-        <span class="text-3xl md:text-5xl" v-text="currencyText" />
         <span
-          class="fas fa-hourglass-half text-xl pt-1 pl-2 md:text-3xl md:pt-2"
+          class="spare-time-value text-3xl md:text-5xl"
+          v-text="currencyText"
         />
+        <span class="fas fa-hourglass-half text-xl pl-2 md:text-3xl md:pt-1" />
       </span>
     </div>
   </div>
diff --git a/components/TimeHeader.vue b/components/TimeHeader.vue
index 5163da5..dd854e8 100644
--- a/components/TimeHeader.vue
+++ b/components/TimeHeader.vue
@@ -42,6 +42,7 @@ export default {
 header {
   min-width: 18rem;
   transition: background-color 2000ms, color 2000ms;
+  font-family: 'Roboto Slab', serif;
 }
 @media (min-width: 768px) {
   header {
diff --git a/layouts/default.vue b/layouts/default.vue
index 1edc481..103887b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -21,7 +21,7 @@
         :class="activeTabColorClasses"
       >
         <div
-          class="w-full text-2xl text-center pt-1 pb-2"
+          class="tab-title w-full text-2xl text-center pt-1 pb-2"
           v-text="activeTab.title"
         />
 
@@ -80,6 +80,8 @@ export default {
 </script>
 
 <style>
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&family=Roboto+Slab:wght@600&display=swap');
+
 html,
 body,
 #__nuxt,
@@ -91,6 +93,7 @@ body,
 html {
   background: #e5e7eb;
   overflow-y: hidden;
+  font-family: 'Manrope', sans-serif;
 }
 </style>
 
@@ -99,4 +102,8 @@ main {
   grid-template-rows: auto minmax(0, 2fr) auto minmax(0, 3fr);
   transition: background-color 2000ms;
 }
+
+.tab-title {
+  font-family: 'Roboto Slab', serif;
+}
 </style>
diff --git a/pages/Missions.vue b/pages/Missions.vue
index bebf192..2113a23 100644
--- a/pages/Missions.vue
+++ b/pages/Missions.vue
@@ -1,12 +1,6 @@
 <template>
   <div class="missions grid">
-    <responsive-grid
-      v-if="incomplete.length"
-      :class="
-        completed.length &&
-        `pb-6 border-b-2 border-${$store.getters.activeTab.darkColor}`
-      "
-    >
+    <responsive-grid v-if="incomplete.length">
       <mission-button
         v-for="(mission, index) in incomplete"
         :key="index"
@@ -15,18 +9,14 @@
       />
     </responsive-grid>
 
-    <div
-      v-else
-      :class="
-        completed.length &&
-        `pt-6 pb-10 border-b-2 border-${$store.getters.activeTab.darkColor}`
-      "
-    >
+    <div v-else>
       <h3 class="text-center">No Missions Currently Available</h3>
     </div>
 
     <template v-if="completed.length">
-      <h2 class="pt-2 pb-2 text-center text-xl">Completed Missions</h2>
+      <h2 class="pt-4 pb-2 md:pt-8 md:pb-4 font-semibold text-center text-xl">
+        Completed Missions
+      </h2>
       <responsive-grid min="1" mid="3" max="6">
         <completed-mission
           v-for="(mission, index) in completed"
diff --git a/pages/TimeMachine.vue b/pages/TimeMachine.vue
index c48388a..b715c54 100644
--- a/pages/TimeMachine.vue
+++ b/pages/TimeMachine.vue
@@ -20,15 +20,15 @@
       </span>
     </div>
 
-    <h2 class="text-lg font-semibold text-center pt-4 md:pt-8">Upgrades</h2>
+    <h2 class="text-xl font-semibold text-center pt-4 md:pt-8">Upgrades</h2>
 
-    <responsive-grid class="pt-4 md:pt-8">
+    <responsive-grid class="pt-2 md:pt-4">
       <max-energy-upgrade-button />
     </responsive-grid>
 
-    <h2 class="text-lg font-semibold text-center pt-4 md:pt-8">Time Travel</h2>
+    <h2 class="text-xl font-semibold text-center pt-4 md:pt-8">Time Travel</h2>
 
-    <responsive-grid class="pt-4 md:pt-8">
+    <responsive-grid class="pt-2 md:pt-4">
       <progress-button
         v-for="process in $store.state.processes"
         :key="process.instrument"