From e6702425813772edd9fe5b601ebec9d252de6d4e Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Sat, 18 Apr 2020 10:29:04 -0400
Subject: [PATCH] Switch the move buttons to a css-grid layout

---
 satiate.css | 84 +++++++++++++++++++++--------------------------------
 1 file changed, 33 insertions(+), 51 deletions(-)

diff --git a/satiate.css b/satiate.css
index 5636867..6101d4b 100644
--- a/satiate.css
+++ b/satiate.css
@@ -327,15 +327,17 @@ a:hover {
 }
 
 #move-holder {
+  width: 90%;
+  height: 90%;
   position: absolute;
-  left: 50%;
-  margin-left: -100px;
   top: 5%;
-}
-
-.move-button {
-  width: 200px;
-  height: 50px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: auto auto auto auto;
+  column-gap: 8pt;
+  row-gap: 8pt;
 }
 
 .move-button {
@@ -346,78 +348,58 @@ a:hover {
   font-size: 24px;
 }
 
-.move-button:focus {
-  outline: 0px;
-}
-
-.disabled {
-  background-color: #444;
-  border: none;
-}
-
-.missing {
-  background-color: #444;
-  color: #aaa !important;
-}
-
 #move-up-left {
-  position: absolute;
-  left: -140px;
-  top: 60px;
+  grid-column-start: 1;
 }
 
 #move-up {
-  position: absolute;
-  left: 0px;
-  top: 0px;
+  grid-column-start: 2;
 }
 
 #move-up-right {
-  position: absolute;
-  left: 140px;
-  top: 60px;
+  grid-column-start: 3;
 }
 
 #move-left {
-  position: absolute;
-  left: -200px;
-  top: 120px;
+  grid-column-start: 1;
 }
 
 #move-right {
-  position: absolute;
-  left: 200px;
-  top: 120px;
+  grid-column-start: 3;
 }
 
 #move-down-left {
-  position: absolute;
-  left: -140px;
-  top: 180px;
+  grid-column-start: 1;
 }
 
 #move-down {
-  position: absolute;
-  left: 0px;
-  top: 240px;
+  grid-column-start: 2;
 }
 
 #move-down-right {
-  position: absolute;
-  left: 140px;
-  top: 180px;
+  grid-column-start: 3;
 }
 
 #move-ascend {
-  position: absolute;
-  left: -200px;
-  top: 300px;
+  grid-column-start: 1;
 }
 
 #move-descend {
-  position: absolute;
-  left: 200px;
-  top: 300px;
+  grid-column-start: 3;
+}
+
+.move-button:focus {
+  outline: 0px;
+}
+
+.disabled {
+  background-color: #444;
+  border: none;
+}
+
+.missing {
+  background-color: #444;
+  color: #aaa !important;
 }
 
 #area-name {