Add some CSS to status page

static/components.js

@@ -4,14 +4,27 @@ const style = `
 <style>
 .column {
     float: left;
-    width: 33.33%;
+    width: 24%;
+    height: 100%;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.137);
+    border-radius: 3%;
+    transition: 0.3s;
+    margin: 15px 3.33%;
+    padding: 12px 16px;
+    background-color: #282c34;
+    color: #FFFFFF;
+  }
+
+  .column:hover {
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.795);
   }
   
   /* Clear floats after the columns */
-  .row:after {
+  .row {
     content: "";
-    display: table;
     clear: both;
+    display: flex;
+    flex-wrap: wrap;
   }
 p {
     text-align: center;
@@ -67,7 +80,6 @@ ${style}
 
 configStatus.innerHTML = `
 ${style}
-<div class="container">
     <div class="row">
         <div class="column">
             <h4><p>Status</p></h4>
@@ -75,12 +87,8 @@ ${style}
             <p>Last Bump was <slot name="lastbump" /></p>
             <p>by <slot id="lastbumper" name="lastbumper" /></p>
         </div>
-    <div id="admin-stats" class="column">
-
-    <h4><p>Admin Stats</p></h4>
-    </div>
+        <br>
         <div class="column">
-
             <h4><p>Config</p></h4>
             <form>
                 <label for="Guild">Guild: </label>
@@ -113,6 +121,10 @@ ${style}
                 <input style="width: 100%;" type="submit" id="submitchanges" name="submitchanges" onClick="alert('Post blocked.')">
             </form>
         </div>
+        <br>
+        <div id="admin-stats" class="column">
+            <h4><p>Admin Stats</p></h4>
+        </div>
     </div>
 `;