From 76ae1d009416e9e8a64ad3a3262a5aba3a88baa4 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Mon, 7 Oct 2019 19:02:34 +1100
Subject: [PATCH] mobile less

---
 client/assets/styles/styles.mobile.less | 93 +++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 client/assets/styles/styles.mobile.less

diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less
new file mode 100644
index 00000000..0b88dac7
--- /dev/null
+++ b/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";
+    }
+}