From 1a6e6001e66a331da39fad1c05528b2e82f41aa2 Mon Sep 17 00:00:00 2001
From: steven-y-e <steven@mineral.town>
Date: Mon, 21 Dec 2020 22:44:19 -0500
Subject: [PATCH] fix(style): layout

---
 public/index.php | 54 +++++++++++++++++++++++++++++++++---------------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/public/index.php b/public/index.php
index 1081e5c..484dbbf 100644
--- a/public/index.php
+++ b/public/index.php
@@ -22,24 +22,44 @@
 
       color: #fff;
       text-shadow: 1px 1px #000;
+
+      text-align: center;
+    }
+
+    /* layout */
+    header, #luggage, #parties, footer {
+      clear: both;
+      padding: 0.5em;
+    }
+    header {
+      color: #e9992d;
     }
     .luggage {
       float: left;
-      width: 24%;
+      width: 25%;
+    }
+    h5 {
+      text-align: left;
+      margin: 0.5em 3em;
+    }
+    em {
+      float: right;
     }
     .party {
       float: left;
-      width: 48%;
+      width: 50%;
     }
     #bernkastel {
-      color: #464693;
+      color: #849bf3;
     }
     #lambdadelta {
-      color: #fbefcc;
+      color: #ffe4f2;
     }
     #virgilia {
       color: #d1d0e3;
-      width: 100%;
+      display: inline-block;
+      margin: auto;
+      text-align: left;
     }
   </style>
 
@@ -94,7 +114,7 @@
   <h2>Luggage</h2>
   <div class="luggage">
     <h3>Keepall</h3>
-    <svg height="120" width="120" viewBox="0 0 20 20">
+    <svg height="80%" width="80%" viewBox="0 0 20 20">
       <circle r="10" cx="10" cy="10" fill="#e6ddcc" />
       <circle r="5" cx="10" cy="10" fill="transparent"
         stroke="#312c4c"
@@ -104,12 +124,12 @@
         transform="rotate(-90) translate(-20)"
       />
     </svg>
-    <h4><em>Free Space:</em> <?php echo getByteString($keepall_free);?></h4>
-    <h4><em>Used Space:</em> <?php echo getByteString($keepall_used);?></h4>
+    <h5>Free Space: <em><?php echo getByteString($keepall_free);?></em></h5>
+    <h5>Used Space: <em><?php echo getByteString($keepall_used);?></em></h5>
   </div>
   <div class="luggage">
     <h3>Neverfull</h3>
-    <svg height="120" width="120" viewBox="0 0 20 20">
+    <svg height="80%" width="80%" viewBox="0 0 20 20">
       <circle r="10" cx="10" cy="10" fill="#e6ddcc" />
       <circle r="5" cx="10" cy="10" fill="transparent"
         stroke="#312c4c"
@@ -119,12 +139,12 @@
         transform="rotate(-90) translate(-20)"
       />
     </svg>
-    <h4><em>Free Space:</em> <?php echo getByteString($neverfull_free);?></h4>
-    <h4><em>Used Space:</em> <?php echo getByteString($neverfull_used);?></h4>
+    <h5>Free Space: <em><?php echo getByteString($neverfull_free);?></em></h5>
+    <h5>Used Space: <em><?php echo getByteString($neverfull_used);?></em></h5>
   </div>
   <div class="luggage">
     <h3>Speedy</h3>
-    <svg height="120" width="120" viewBox="0 0 20 20">
+    <svg height="80%" width="80%" viewBox="0 0 20 20">
       <circle r="10" cx="10" cy="10" fill="#e6ddcc" />
       <circle r="5" cx="10" cy="10" fill="transparent"
         stroke="#312c4c"
@@ -134,12 +154,12 @@
         transform="rotate(-90) translate(-20)"
       />
     </svg>
-    <h4><em>Free Space:</em> <?php echo getByteString($speedy_free);?></h4>
-    <h4><em>Used Space:</em> <?php echo getByteString($speedy_used);?></h4>
+    <h5>Free Space: <em><?php echo getByteString($speedy_free);?></em></h5>
+    <h5>Used Space: <em><?php echo getByteString($speedy_used);?></em></h5>
   </div>
   <div class="luggage">
     <h3>Pochette</h3>
-    <svg height="120" width="120" viewBox="0 0 20 20">
+    <svg height="80%" width="80%" viewBox="0 0 20 20">
       <circle r="10" cx="10" cy="10" fill="#e6ddcc" />
       <circle r="5" cx="10" cy="10" fill="transparent"
         stroke="#312c4c"
@@ -149,8 +169,8 @@
         transform="rotate(-90) translate(-20)"
       />
     </svg>
-    <h4><em>Free Space:</em> <?php echo getByteString($pochette_free);?></h4>
-    <h4><em>Used Space:</em> <?php echo getByteString($pochette_used);?></h4>
+    <h5>Free Space: <em><?php echo getByteString($pochette_free);?></em></h5>
+    <h5>Used Space: <em><?php echo getByteString($pochette_used);?></em></h5>
   </div>
 </div>