better wip hey

client/assets/styles/game.css

@@ -79,8 +79,13 @@
     stroke-width: 2px;
     stroke: whitesmoke;
 
-    /* some stupid bug in chrome makes it fill the entire screen */
-    max-height: 10em;
+}
+
+/* some stupid bug in chrome makes it fill the entire screen */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    #targeting {
+        max-height: 10em;
+    }
 }
 
 .resolving #targeting {

client/assets/styles/instance.css

@@ -418,4 +418,4 @@ button.equipping {
 }
 
 /* Mobile Nav*/
-.instance .nav-btn { display: none; }
+.instance-nav { display: none; }

client/assets/styles/instance.mobile.css

@@ -2,12 +2,10 @@
     .instance {
         display: grid;
         grid-template-columns: 1fr;
-        grid-template-rows: min-content, min-content, min-content, 1fr;
+        grid-template-rows: min-content, 1fr;
         grid-template-areas:
-            "top"
-            "controls"
             "vbox"
-            "constructs"
+            "constructs";
     }
 
     .instance .nav-btn { display: initial; }
@@ -131,4 +129,20 @@
     .instance-construct:last-child {
         border-left: 1px solid #222;
     }
+
+    .instance-nav {
+        display: flex;
+        grid-area: nav;
+        margin-right: 0;
+        border-top: 2px solid #444;
+    }
+
+    .instance-nav button {
+        font-size: 150%;
+        border-right: 2px solid #444;
+    }
+
+    .instance-nav button:last-child {
+        border: none;
+    }
 }

client/assets/styles/styles.css

@@ -23,7 +23,7 @@ html, body, #mnml {
     /*padding: 0 20%;*/
 
     /* stops inspector going skitz*/
-    /*overflow: hidden;*/
+    overflow-x: hidden;
 }
 
 html {
@@ -70,10 +70,11 @@ figure {
     padding: 0 2em;
     display: grid;
     grid-template-columns: 1fr 8fr;
-    grid-template-rows: min-content 1fr;
+    grid-template-rows: min-content 1fr min-content;
     grid-template-areas:
       "hd  hd"
-      "nav main";
+      "nav main"
+      "nav footer";
 }
 
 nav {
@@ -145,6 +146,7 @@ button, input {
     letter-spacing: 0.25em;
     box-sizing: border-box;
     font-size: 100%;
+    flex: 1;
 
     /*the transitions */
     transition-property: color;
@@ -159,22 +161,6 @@ button:hover, button:focus {
     border-color: whitesmoke;
 }
 
-button.right[disabled]:hover, button.left[disabled]:hover {
-    box-shadow: none;
-}
-
-button.top:hover, button.top:focus {
-    box-shadow: inset 0 0.25em 0 0 whitesmoke;
-}
-
-button.right:hover, button.right:focus {
-    box-shadow: inset -0.5em 0 0 0 whitesmoke;
-}
-
-button.left:hover, button.left:focus {
-    box-shadow: inset 0.5em 0 0 0 whitesmoke;
-}
-
 a {
     color: whitesmoke;
     font-size: 150%;
@@ -313,18 +299,20 @@ header {
     letter-spacing: 0.05em;
 }
 
-.header-username {
-    letter-spacing: 0.05em;
-    display: inline;
+.header-status {
+    margin: 1em 0;
+    display: flex;
 }
 
-.header-status {
-    text-align: right;
+.header-username {
+    letter-spacing: 0.05em;
+    flex: 1;
+    display: inline;
 }
 
 .header-status svg {
     margin: 0.5em 0 0 1em;
-    height: 1.5em;
+    height: 1em;
     background-color: black;
     stroke: whitesmoke;
 }
@@ -359,29 +347,14 @@ header {
     TEAM
 */
 
-.menu-constructs {
+.team {
+    display: flex;
     display: grid;
-    grid-template-rows: min-content min-content;
-
-    grid-template-areas:
-        "top"
-        "team";
-}
-
-.constructs-list {
-    max-height: 100%;
-    margin-top: 0.5em;
-    grid-area: team;
-
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-auto-rows: 1fr;
-    grid-gap: 0.5em;
+    grid-gap: 1em;
+    grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
 }
 
 .menu-construct {
-    height: 100%;
-    box-sizing: border-box;
     border: 1px solid black;
 
     display: flex;
@@ -544,10 +517,11 @@ main .top button {
     max-height: 0.25em;
 
     border: none;
-    margin: 1em 0;
+    margin: 1em 0 0 0;
 }
 
 .timer {
+    flex: 1 0 100%;
     background: whitesmoke;
     transition-property: all;
     transition-duration: 0.5s;
@@ -559,6 +533,33 @@ main .top button {
     margin-bottom: 2em;
 }
 
+footer {
+    display: flex;
+    flex-flow: row wrap;
+    grid-area: footer;
+    margin: 0;
+}
+
+footer button {
+    margin: 0;
+    border: none;
+    background: #222;
+}
+
+footer button:disabled {
+    color: #444;
+}
+
+footer button:not(:last-child) {
+    background: #222;
+    border-right: 1px solid black;
+}
+
+footer button .ready {
+    background: forestgreen;
+    color: black;
+}
+
 @media (max-height: 900px), (max-width: 1500px) {
     #mnml {
         font-size: 75%;
@@ -569,7 +570,6 @@ main .top button {
     }
 }
 
-/* Mobile Nav*/
-#nav-btn {
+#nav-btn, #instance-nav {
     display: none;
 }

client/assets/styles/styles.mobile.css

@@ -2,11 +2,11 @@
     #mnml {
         font-size: 8pt;
         padding: 0;
-        grid-template-columns: min-content 1fr;
-        grid-template-rows: min-content 1fr;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr min-content;
         grid-template-areas:
-          "tnav hd "
-          "main main";
+          "main"
+          "footer";
     }
 
     #mnml button {
@@ -21,9 +21,8 @@
         display: none;
     }
 
-    #nav-btn {
-        display: inline-block;
-        margin: 0 0.5em;
+    #nav-btn, #instance-nav {
+        display: unset;
     }
 
     #mnml.nav-visible nav {
@@ -35,6 +34,10 @@
         display: none;
     }
 
+    header {
+        display: none;
+    }
+
     main {
         overflow-x: hidden;
     }