Adjust font sizes

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;

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;

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;

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;
 }
 

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;

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;
 }