diff --git a/client/.eslintrc.js b/client/.eslintrc.js
old mode 100755
new mode 100644
diff --git a/client/game.css b/client/assets/styles/game.css
similarity index 100%
rename from client/game.css
rename to client/assets/styles/game.css
diff --git a/client/instance.css b/client/assets/styles/instance.css
similarity index 100%
rename from client/instance.css
rename to client/assets/styles/instance.css
diff --git a/client/assets/normalize.css b/client/assets/styles/normalize.css
similarity index 100%
rename from client/assets/normalize.css
rename to client/assets/styles/normalize.css
diff --git a/client/assets/skeleton.css b/client/assets/styles/skeleton.css
similarity index 100%
rename from client/assets/skeleton.css
rename to client/assets/styles/skeleton.css
diff --git a/client/styles.css b/client/assets/styles/styles.css
similarity index 98%
rename from client/styles.css
rename to client/assets/styles/styles.css
index 99170928..55407d22 100644
--- a/client/styles.css
+++ b/client/assets/styles/styles.css
@@ -95,7 +95,6 @@ nav button {
display: block;
color: #888;
flex: 1 1 100%;
- font-size: 16pt;
padding: 0;
margin: 0;
border-width: 0px;
@@ -514,3 +513,7 @@ main .top {
flex-flow: column;
}
}
+
+/* Mobile Nav*/
+#toggle-nav { display: none; }
+#toggle-nav-label { display: none; }
diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.css
new file mode 100644
index 00000000..a667c5ac
--- /dev/null
+++ b/client/assets/styles/styles.mobile.css
@@ -0,0 +1,56 @@
+@media (max-height: 800px), (max-width: 800px) {
+ #cryps {
+ font-size: 50%;
+ grid-template-columns: min-content 1fr;
+ grid-template-rows: min-content 1fr;
+ grid-template-areas:
+ "tnav hd "
+ "main main";
+ }
+
+ svg {
+ height: 1em;
+ }
+ nav {
+ opacity: 0;
+ position: fixed;
+ margin-top: 4em;
+ pointer-events: none;
+ -webkit-transition: all 0.5s ease-in-out;
+ -moz-transition: all 0.5s ease-in-out;
+ -o-transition: all 0.5s ease-in-out;
+ transition: all 0.5s ease-in-out;
+
+ }
+ main {
+ -webkit-transition: all 0.5s ease-in-out;
+ -moz-transition: all 0.5s ease-in-out;
+ -o-transition: all 0.5s ease-in-out;
+ transition: all 0.5s ease-in-out;
+ }
+
+ #toggle-nav { display: none; }
+
+ #toggle-nav-label {
+ grid-area: tnav;
+ color: whitesmoke;
+ line-height: 1.75em;
+ font-size: 1.5em;
+ display: block;
+ cursor: pointer;
+ margin-right: 0.5em;
+ }
+
+ #toggle-nav:checked #toggle-nav-label {
+ color: #ababab;
+ }
+
+ #toggle-nav:checked ~ nav {
+ opacity: 1;
+ pointer-events: auto;
+ }
+ #toggle-nav:checked ~ main {
+ opacity: 0.1;
+ pointer-events: none;
+ }
+}
\ No newline at end of file
diff --git a/client/index.html b/client/index.html
index 3ff703ee..58b3d1d7 100644
--- a/client/index.html
+++ b/client/index.html
@@ -11,8 +11,9 @@
-
-
+
+
+
diff --git a/client/index.js b/client/index.js
old mode 100755
new mode 100644
index f5ec6a52..f85e70bb
--- a/client/index.js
+++ b/client/index.js
@@ -1,6 +1,7 @@
-require('./styles.css');
-require('./instance.css');
-require('./game.css');
+require('./assets/styles/styles.css');
+require('./assets/styles/styles.mobile.css');
+require('./assets/styles/instance.css');
+require('./assets/styles/game.css');
// kick it off
require('./src/app');
diff --git a/client/src/app.jsx b/client/src/app.jsx
index 65e79741..97375e3d 100644
--- a/client/src/app.jsx
+++ b/client/src/app.jsx
@@ -51,6 +51,8 @@ document.fonts.load('16pt "Jura"').then(() => {
const Cryps = () => (
+
+