tabs init

client/assets/styles/instance.less

@@ -3,7 +3,7 @@
 .instance {
     overflow-x: hidden;
     display: grid;
-    grid-template-columns: 2fr minmax(min-content, 1fr);
+    grid-template-columns: 1fr minmax(min-content, 1fr);
     grid-template-rows: min-content 1fr;
 
     grid-template-areas:

client/assets/styles/menu.less

@@ -4,11 +4,12 @@
     height: 100%;
     display: grid;
 
-    grid-template-rows: minmax(min-content, 2fr) 1fr;
+    grid-template-rows: minmax(min-content, 2fr) min-content 1fr;
     grid-template-columns: 1fr;
 
     grid-template-areas:
         "top"
+        "tabs"
         "bottom";
 
     .top {
@@ -63,7 +64,6 @@
     .inventory {
         margin-top: 2em;
         grid-area: bottom;
-
         display: grid;
         grid-template-columns: 1fr 1fr;
 
@@ -87,4 +87,18 @@
             flex-flow: column;
         }
     }
+
+    .options {
+        grid-area: tabs;
+        display: flex;
+        flex-flow: row;
+        button {
+            border-top: 0;
+            border: 1px solid #222;
+            &:not(:last-child) {
+                border-right: 0;
+            }
+            flex: 1;
+        }
+    }
 }

client/assets/styles/styles.less

@@ -88,8 +88,8 @@ dl {
     grid-template-rows: min-content 1fr min-content;
     grid-template-areas:
       "hd  hd   ctrl"
-      "nav main ctrl"
-      "nav main ctrl";
+      "main main ctrl"
+      "main main ctrl";
 }
 
 main {
@@ -198,12 +198,6 @@ button[disabled] {
 */
 
 .welcome {
-    .highlight {
-        color: black;
-        background: @white;
-        border: 1px solid @white;
-    }
-
     .login {
         width: 50%;
         display: flex;
@@ -213,11 +207,6 @@ button[disabled] {
 
     .options {
         width: 50%;
-        display: flex;
-        flex-flow: row;
-        button {
-            flex: 1;
-        }
     }
 
     h2 {
@@ -262,4 +251,32 @@ figure.gray {
 
 .mobile-title {
     display: none;
-}
+}
+
+.options {
+    display: flex;
+    flex-flow: row;
+
+    button {
+        &.highlight {
+            color: @white;
+            box-shadow: inset 0px 5px 0px 0px @white;
+            border: 0;
+            &:first-child {
+                border-left: 1px solid #444;
+            }
+
+            &:last-child {
+                border-right: 1px solid #444;
+            }
+
+        }
+
+        border: 1px solid #444;
+        flex: 1;
+    }
+}
+
+nav {
+    display: none;
+}