From d021c47e700e720db64e3ce93ba67c90a519c607 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Sat, 11 Jul 2020 17:09:43 -0400
Subject: [PATCH] Improve the layout a bit (especially on mobile)

---
 src/App.vue                     | 2 ++
 src/components/ActionButton.vue | 4 ++--
 src/components/Combat.vue       | 6 ++++--
 src/components/Header.vue       | 2 ++
 src/components/Statblock.vue    | 2 +-
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c33d013..c48d866 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -48,5 +48,7 @@ body, html {
   max-width: 1000pt;
   margin: auto;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 </style>
diff --git a/src/components/ActionButton.vue b/src/components/ActionButton.vue
index 270f937..a0a6951 100644
--- a/src/components/ActionButton.vue
+++ b/src/components/ActionButton.vue
@@ -32,8 +32,8 @@ export default class ActionButton extends Vue {
 <style scoped>
 
 .action-button {
-  width: 100px;
-  height: 100px;
+  width: 48pt;
+  height: 48pt;
 }
 
 </style>
diff --git a/src/components/Combat.vue b/src/components/Combat.vue
index 8166ad4..29e7cfe 100644
--- a/src/components/Combat.vue
+++ b/src/components/Combat.vue
@@ -83,10 +83,11 @@ export default class Combat extends Vue {
 <style scoped>
 .combat-layout {
   display: grid;
-  grid-template-rows: 20% [main-row-start] 30% 30% [main-row-end] 20%;
-  grid-template-columns: 20% [main-col-start] 60% [main-col-end] 20%;
+  grid-template-rows: 20% [main-row-start] 1fr 1fr [main-row-end] 20%;
+  grid-template-columns: minmax(80pt, 20%) [main-col-start] 1fr [main-col-end] minmax(80pt, 20%);
   width: 100%;
   height: 100%;
+  flex: 10;
 }
 
 .player-stats {
@@ -136,6 +137,7 @@ a {
   display: flex;
   flex-direction: column;
   align-items: center;
+  flex-wrap: wrap;
 }
 </style>
 
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 230c4fe..629fdc6 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -20,6 +20,8 @@ export default class Header extends Vue {
 
 <style scoped>
 #header {
+  flex: 1 1;
+  max-height: 60pt;
   width: 100%;
   background: #222;
   top: 0%;
diff --git a/src/components/Statblock.vue b/src/components/Statblock.vue
index bbbe705..3b81ee4 100644
--- a/src/components/Statblock.vue
+++ b/src/components/Statblock.vue
@@ -58,7 +58,7 @@ a {
   margin: 16px;
 }
 .stat-line {
-  font-size: 24pt;
+  font-size: 2vh;
   padding-top: 4pt;
   padding-bottom: 4pt;
 }