wip

client/assets/styles/instance.css

@@ -54,7 +54,6 @@
 /* VBOX */
 .vbox {
     grid-area: vbox;
-
     display: grid;
     grid-template-rows: min-content min-content;
     grid-template-areas:

client/assets/styles/instance.mobile.css

@@ -0,0 +1,36 @@
+@media (max-height: 800px), (max-width: 800px) {
+    .instance {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: min-content;
+        grid-template-areas:
+            "top"
+            "vbox"
+    }
+
+    .instance .equip { display: none; }
+    .instance .info { display: none; }
+    .instance .cryp-list { display: none; }
+
+    .vbox {
+        grid-area: vbox;
+        display: grid;
+        grid-template-rows: min-content min-content min-content;
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "vbox"
+            "inventory"
+            "combiner";
+    }
+
+    .vbox-inventory {
+        margin-left: 0;
+    }
+
+    .vbox-combiner {
+        grid-area: combiner;
+    }
+
+
+
+}

client/assets/styles/styles.mobile.css

@@ -1,6 +1,6 @@
 @media (max-height: 800px), (max-width: 800px) {
     #cryps {
-        font-size: 50%;
+        font-size: 55%;
         grid-template-columns: min-content 1fr;
         grid-template-rows: min-content 1fr;
         grid-template-areas:
@@ -8,9 +8,15 @@
           "main main";
     }
 
-    svg {
-        height: 1em;
+    table td {
+        height: 2.5em;
     }
+
+    svg {
+        width: 5em;
+    }
+
+
     nav {
         opacity: 0;
         position: fixed;
@@ -53,4 +59,5 @@
         opacity: 0.1;
         pointer-events: none;
     }
+
 }

client/index.js

@@ -1,6 +1,7 @@
 require('./assets/styles/styles.css');
 require('./assets/styles/styles.mobile.css');
 require('./assets/styles/instance.css');
+require('./assets/styles/instance.mobile.css');
 require('./assets/styles/game.css');
 
 // kick it off