wip

client/assets/styles/styles.css

@@ -455,37 +455,45 @@ header {
 }
 
 .inventory {
-    display: flex;
-    flex-flow: row wrap;
+    margin-right: 2em;
+    grid-area: inventory;
 }
 
-.inventory h2 {
-    flex: 1 0 100%;
+.inventory .list {
+    letter-spacing: 0.25em;
+    text-transform: uppercase;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 1em;
+    flex-flow: row wrap;
+    align-items: flex-end;
 }
 
 .inventory figure {
-    flex: 0 0 10%;
+    font-size: 125%;
     display: flex;
     flex-flow: column;
-    margin: 0.5em 1em;
-}
-
-/* heading included */
-.inventory figure:nth-child(3) {
-    margin-right: 2em;
-}
-
-.inventory figure div {
-
 }
 
 .menu-instances {
-    display: flex;
-    flex-flow: column;
+    height: 100%;
+    display: grid;
+
+    grid-template-rows: minmax(min-content, 2fr) 1fr;
+    grid-template-columns: 1fr 1fr;
+
+    grid-template-areas:
+        "constructs constructs"
+        "inventory  games";
 }
 
 .menu-instances .construct-list {
-    flex: 1;
+    grid-area: constructs;
+
+    /* poor man's <hr>*/
+    padding-bottom: 2em;
+    margin-bottom: 2em;
+    border-bottom: 0.1em solid whitesmoke;
 }
 
 .menu-instances .menu-construct {
@@ -493,6 +501,7 @@ header {
 }
 
 .menu-instance-list {
+    grid-area: games;
     flex: 1;
     order: 99;
     flex-flow: row wrap;
@@ -650,4 +659,4 @@ footer button .ready {
 
 .mobile-title {
     display: none;
-}
+}

client/assets/styles/styles.mobile.css

@@ -57,4 +57,14 @@
         display: block;
         margin-bottom: 1em;
     }
+
+    .menu-instances {
+        display: grid;
+
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "constructs"
+            "inventory"
+            "games";
+    }
 }