From 02d732289cd7bdc122d2ae2a77bafaa1e061f84a Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Tue, 4 Aug 2020 19:55:07 -0400
Subject: [PATCH] Adjust font sizes

---
 src/App.vue                     |  4 ++++
 src/components/ChoiceButton.vue |  2 +-
 src/components/Combat.vue       |  2 +-
 src/components/Explore.vue      |  6 +++---
 src/components/NavButton.vue    |  2 +-
 src/components/Statblock.vue    | 16 ++++++++--------
 6 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5d1dced..9bafbcb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -75,6 +75,10 @@ body, html {
   overflow-x: hidden;
 }
 
+html {
+  font-size: calc(0.75em + 1vmin);
+}
+
 #app {
   position: relative;
   font-family: Avenir, Helvetica, Arial, sans-serif;
diff --git a/src/components/ChoiceButton.vue b/src/components/ChoiceButton.vue
index 68a109a..10b06d9 100644
--- a/src/components/ChoiceButton.vue
+++ b/src/components/ChoiceButton.vue
@@ -46,7 +46,7 @@ export default class ChoiceButton extends Vue {
   margin: 8pt;
   background: repeating-linear-gradient(45deg, #333, #333 20px, #222 20px, #222 40px);
   color: #ccc;
-  font-size: 150%;
+  font-size: 1.25rem;
   border-color: #ccc;
   border-width: 3px;
   border-radius: 8px;
diff --git a/src/components/Combat.vue b/src/components/Combat.vue
index ca005a7..30e0552 100644
--- a/src/components/Combat.vue
+++ b/src/components/Combat.vue
@@ -303,7 +303,7 @@ export default class Combat extends Vue {
   grid-area: main-row-start / main-col-start / main-row-end / main-col-end;
   overflow-y: scroll;
   overflow-x: hidden;
-  font-size: 12pt;
+  font-size: 1rem;
   width: 100%;
   max-height: 100%;
   width: 70vw;
diff --git a/src/components/Explore.vue b/src/components/Explore.vue
index 3e29d87..b72bd19 100644
--- a/src/components/Explore.vue
+++ b/src/components/Explore.vue
@@ -140,7 +140,7 @@ export default class Explore extends Vue {
 
 .worldinfo-date,
 .worldinfo-time {
-  font-size: 125%;
+  font-size: 1.25rem;
 }
 
 .explore-info {
@@ -155,12 +155,12 @@ export default class Explore extends Vue {
 }
 
 .location-name {
-  font-size: 200%;
+  font-size: 2rem;
   margin: 8pt;
 }
 
 .location-desc {
-  font-size: 150%;
+  font-size: 1.5rem;
   color: #ccc;
 }
 
diff --git a/src/components/NavButton.vue b/src/components/NavButton.vue
index e6ebaf4..4081522 100644
--- a/src/components/NavButton.vue
+++ b/src/components/NavButton.vue
@@ -44,7 +44,7 @@ export default class NavButton extends Vue {
   padding: 5%;
   background: #555;
   color: #ccc;
-  font-size: 18pt;
+  font-size: 1rem;
   border-color: #ccc;
   border-width: 3px;
   border-radius: 8px;
diff --git a/src/components/Statblock.vue b/src/components/Statblock.vue
index 1b44dae..bf415fe 100644
--- a/src/components/Statblock.vue
+++ b/src/components/Statblock.vue
@@ -157,7 +157,7 @@ export default class Statblock extends Vue {
 <style scoped>
 h2 {
   margin-bottom: 8pt;
-  font-size: 200%;
+  font-size: 2rem;
 }
 ul {
   list-style-type: none;
@@ -192,7 +192,7 @@ a {
 
 .stat-entry {
   position: relative;
-  font-size: 10pt;
+  font-size: 0.75rem;
   padding-top: 2pt;
   padding-bottom: 2pt;
   display: flex;
@@ -230,17 +230,17 @@ a {
 .stat-entry .healthbar i {
   flex: 0 1;
   flex-basis: 20pt;
-  font-size: 14pt;
+  font-size: 1rem;
 }
 
 .healthbar .healthbar-value {
   flex: 1 0;
-  font-size: 12pt;
+  font-size: 0.75rem;
   color: #bbb;
 }
 
 .stat-entry > i {
-  font-size: 16pt;
+  font-size: 1.25rem;
   width: 16pt;
   margin-bottom: 18pt;
 }
@@ -337,7 +337,7 @@ a {
 }
 
 .statblock-shader-dead i {
-  font-size: 100px;
+  font-size: 5rem;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -373,11 +373,11 @@ a {
 .statblock-status-icons {
   display: flex;
   justify-content: space-evenly;
-  min-height: 16pt;
+  min-height: 1.25rem;
 }
 
 .statblock-status-icons > i {
-  font-size: 16pt;
+  font-size: 1.25rem;
   position: relative;
 }