mobile less

client/assets/styles/styles.mobile.less

@@ -0,0 +1,93 @@
+@media (max-width: 800px) {
+    #mnml {
+        font-size: 12pt;
+        padding: 0;
+        grid-template-columns: 1fr;
+        grid-template-rows: 10fr 1fr;
+        grid-template-areas:
+          "main"
+          "footer";
+
+        height: 100vh;
+        max-height: initial;
+        min-height: initial;
+        overflow-y: initial;
+    }
+
+    table td {
+        height: 2.5em;
+    }
+
+    nav {
+        display: none;
+    }
+
+    aside {
+        display: none;
+    }
+
+    footer {
+        display: flex;
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+
+        button {
+            font-size: 90%;
+        }
+    }
+
+    #nav-btn, #instance-nav {
+        display: unset;
+    }
+
+    #mnml.nav-visible nav {
+        padding: 0.5em;
+        margin: 0;
+        display: block;
+        grid-area: main;
+    }
+
+    #mnml.nav-visible main {
+        display: none;
+    }
+
+    main {
+        overflow-x: hidden;
+        overflow-y: initial;
+        max-height: 100vh;
+        padding: 0 0.5em;
+    }
+
+    .welcome .login {
+        width: 100%;
+    }
+
+    .welcome .options {
+        width: 100%;
+        flex-flow: row wrap;
+    }
+
+    .welcome .options button {
+        flex: 1 0 50%;
+    }
+
+    .timer-container {
+        margin: 0.5em 0 0 0;
+    }
+
+    .mobile-title {
+        display: block;
+        margin-bottom: 1em;
+    }
+
+    .menu-instances {
+        display: grid;
+
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "constructs"
+            "inventory"
+            "games";
+    }
+}