woah

client/assets/styles/account.less

@@ -1,9 +1,6 @@
 @import 'colours.less';
 
 .account {
-    margin-top: 2em;
-    grid-area: bottom;
-
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-gap: 0 1em;

client/assets/styles/controls.less

@@ -8,10 +8,17 @@ aside {
         "timer controls";
 
     grid-template-columns: min-content 1fr;
-    grid-template-rows: 1fr 1fr 1fr;
-    grid-gap: 0.5em 0;
+    grid-template-rows: 1fr;
 
-    padding: 1em 1em 1em 0;
+    padding-left: 1em;
+
+    .controls {
+        grid-area: controls;
+
+        display: grid;
+        grid-auto-rows: 1fr;
+        grid-gap: 0.5em 0;
+    }
 
     // fix chrome being inconsistent
     table {

client/assets/styles/instance.less

@@ -1,7 +1,7 @@
 @import 'colours.less';
 
 .instance {
-    overflow-x: hidden;
+    overflow: hidden;
     display: grid;
     grid-template-columns: 1fr minmax(min-content, 1fr);
     grid-template-rows: min-content 1fr;

client/assets/styles/menu.less

@@ -4,17 +4,16 @@
     height: 100%;
     display: grid;
 
-    grid-template-rows: minmax(min-content, 2fr) min-content 1fr;
+    grid-template-rows: min-content 1fr 2fr;
     grid-template-columns: 1fr;
 
     grid-template-areas:
+        "hdr"
         "top"
-        "tabs"
         "bottom";
 
     .top {
         grid-area: top;
-        padding: 0 0 0.5em 2em;
         border-bottom: 0.1em solid #222;
         box-sizing: border-box;
     }
@@ -25,9 +24,10 @@
 
     .team {
         display: grid;
-        grid-area: top;
+        grid-area: bottom;
         grid-template-columns: repeat(auto-fill, minmax(min-content, 33%));
         max-height: 100%;
+        margin-top: 1em;
 
         .team-select:not(:nth-child(3n)) {
             margin-right: 0.5em;
@@ -62,8 +62,6 @@
     }
 
     .inventory {
-        margin-top: 2em;
-        grid-area: bottom;
         display: grid;
         grid-template-columns: 1fr 1fr;
 
@@ -71,6 +69,10 @@
             margin-bottom: 0.5em;
         }
 
+        .news {
+            padding-right: 1em;
+        }
+
         .list {
             letter-spacing: 0.25em;
             text-transform: uppercase;
@@ -89,16 +91,19 @@
     }
 
     .options {
-        grid-area: tabs;
-        display: flex;
-        flex-flow: row;
+        grid-area: hdr;
+
         button {
+            width: 25%;
             border-top: 0;
             border: 1px solid #222;
             &:not(:last-child) {
                 border-right: 0;
             }
-            flex: 1;
+
+            &:last-child {
+                float: right;
+            }
         }
     }
 }

client/assets/styles/styles.less

@@ -84,16 +84,17 @@ dl {
 
 #mnml {
     display: grid;
-    grid-template-columns: minmax(min-content, 1fr) 8fr 1fr;
-    grid-template-rows: min-content 1fr min-content;
+    grid-template-columns: 9fr 1fr;
+    grid-template-rows: min-content min-content 1fr;
     grid-template-areas:
-      "hd  hd   ctrl"
-      "main main ctrl"
-      "main main ctrl";
+      "hdr  ctrl"
+      "main ctrl"
+      "main ctrl";
+
+    padding: 0.5em 1em;
 }
 
 main {
-    padding: 1em;
     grid-area: main;
 }
 
@@ -253,10 +254,17 @@ figure.gray {
     display: none;
 }
 
-.options {
-    display: flex;
-    flex-flow: row;
+header {
+    .options {
+        font-size: 150%;
+    }
 
+    button {
+        height: 2em;
+    }
+}
+
+.options {
     button {
         &.highlight {
             color: @white;
@@ -279,4 +287,4 @@ figure.gray {
 
 nav {
     display: none;
-}
+}