From d6fb7986eff16893e5b7eeaa05799a8558177bf7 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Wed, 18 Sep 2019 13:09:35 +1000
Subject: [PATCH] mobile styles init and font size

---
 client/assets/styles/menu.less         | 43 ++++++++++++++++++++++++++
 client/assets/styles/styles.less       |  4 +--
 client/assets/styles/styles.mobile.css |  6 ++--
 client/index.js                        |  2 +-
 client/src/components/demo.jsx         |  2 +-
 5 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less
index a1320161..0d6c3c40 100644
--- a/client/assets/styles/menu.less
+++ b/client/assets/styles/menu.less
@@ -180,4 +180,47 @@ section {
             height: 100%;
         }
     }
+}
+
+@media (max-width: 800px) {
+    section {
+        grid-template-columns: 1fr;
+
+        .list {
+            grid-template-columns: 1fr 1fr;
+        }
+
+        .news {
+            display: none;
+        }
+    }
+
+    .demo {
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "vinfo"
+            "vcons"
+            "game";
+
+
+        .construct-list .instance-construct:not(:first-child) {
+            display: none;
+        }
+
+        .game-demo {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .menu .team {
+        grid-template-columns: 1fr;
+
+        .construct {
+            height: 10em;
+        }
+    }
+
+    .account {
+        grid-template-columns: 1fr;
+    }
 }
\ No newline at end of file
diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less
index 29e06109..2eb724cd 100644
--- a/client/assets/styles/styles.less
+++ b/client/assets/styles/styles.less
@@ -6,7 +6,7 @@ html, body, #mnml {
     background-color: black;
     font-family: 'Jura';
     color: whitesmoke;
-    font-size: 12pt;
+    font-size: 14pt;
 
     user-select: none;
     -moz-user-select: none;
@@ -26,7 +26,7 @@ html, body, #mnml {
 
 @media (min-width: 1921px) {
     html, body, #mnml {
-        font-size: 14pt;
+        font-size: 16pt;
     }
 }
 
diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.css
index c0db0c18..6b09a6c7 100644
--- a/client/assets/styles/styles.mobile.css
+++ b/client/assets/styles/styles.mobile.css
@@ -1,6 +1,6 @@
 @media (max-width: 800px) {
     #mnml {
-        font-size: 10pt;
+        font-size: 14pt;
         padding: 1em 0 0 0;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr min-content;
@@ -44,10 +44,10 @@
         display: none;
     }
 
-    header {
+/*    header {
         display: none;
     }
-
+*/
     main {
         overflow-x: hidden;
         padding: 0 0.5em;
diff --git a/client/index.js b/client/index.js
index d25854c0..ae5df689 100644
--- a/client/index.js
+++ b/client/index.js
@@ -1,8 +1,8 @@
 require('./assets/styles/styles.less');
+require('./assets/styles/account.less');
 require('./assets/styles/menu.less');
 require('./assets/styles/nav.less');
 require('./assets/styles/footer.less');
-require('./assets/styles/account.less');
 require('./assets/styles/controls.less');
 require('./assets/styles/instance.less');
 require('./assets/styles/vbox.less');
diff --git a/client/src/components/demo.jsx b/client/src/components/demo.jsx
index 84e05e93..9777603f 100644
--- a/client/src/components/demo.jsx
+++ b/client/src/components/demo.jsx
@@ -168,7 +168,7 @@ function Demo(args) {
     };
 
     return (
-        <section class='demo news'>
+        <section class='demo news bottom'>
             {vboxDemo()}
             {vboxConstructs()}
             {gameDemo()}