styles + rotate prompt

client/assets/styles/account.less

@@ -4,7 +4,7 @@
     grid-template-columns: 1fr 1fr 1fr 1fr;
 
     div {
-        padding-right: 2em;
+        padding-right: 1em;
     }
 
     button {

client/assets/styles/controls.less

@@ -96,6 +96,20 @@ aside {
             border-color: forestgreen;
         }
     }
+
+    // all green
+    // &:enabled {
+    //     background: forestgreen;
+    //     color: black;
+    //     border-color: forestgreen;
+
+    //     &:hover {
+    //         color: forestgreen;
+    //         border-color: forestgreen;
+    //         background: 0;
+    //     }
+    // }
+
 }
 
 .team-page-ctrl {

client/assets/styles/instance.less

@@ -9,10 +9,6 @@
     grid-template-areas:
         "vbox info"
         "constructs constructs";
-
-    hr {
-        grid-area: rule;
-    }
 }
 
 @media (max-width: 1920px) {
@@ -88,65 +84,6 @@
     border-right-width: 0;
 }
 
-/* VBOX */
-.vbox {
-    align-content: space-between;
-    grid-area: vbox;
-    display: grid;
-    grid-template-rows: min-content min-content min-content;
-    grid-template-columns: 1fr min-content 1fr;
-    grid-template-areas:
-        "vbox varrow inventory"
-        "vbox varrow combiner";
-}
-
-.vbox-inventory {
-    grid-area: inventory;
-}
-
-.vbox-combiner {
-    grid-area: combiner;
-    display: flex;
-    flex-flow: column;
-    justify-content: flex-end;
-}
-
-.vbox-arrow, .vbox-arrow-mobile {
-    display: flex;
-    justify-content:center;
-    align-content:center;
-    flex-direction:column;
-
-    margin: 1em 0.25em 0 0.25em;
-    grid-area: varrow;
-    font-size: 2em;
-    color: @gray-hint;
-}
-
-.vbox-combiner button {
-    flex: 0;
-}
-
-
-.vbox-hdr {
-    display: flex;
-}
-
-.vbox-hdr h3 {
-    flex: 1;
-}
-
-.vbox-hdr .bits {
-    font-size: 2em;
-    line-height: 1em;
-    animation: bits 1s ease-out;
-}
-
-.arrow {
-    grid-area: arrow;
-    color: @gray-hint;
-}
-
 @keyframes action {
     0% {
         color: palegoldenrod;

client/assets/styles/menu.less

@@ -142,6 +142,19 @@ section {
                     border-color: forestgreen;
                 }
             }
+
+            // // all green
+            // button.ready:enabled {
+            //     background: forestgreen;
+            //     color: black;
+            //     border-color: forestgreen;
+
+            //     &:hover {
+            //         color: forestgreen;
+            //         border-color: forestgreen;
+            //         background: 0;
+            //     }
+            // }
         }
     }
 

client/assets/styles/styles.less

@@ -316,4 +316,29 @@ li {
   width: 1px;
   height: 1px;
   padding: 0px;
-}
+}
+
+#rotate {
+    display: none;
+
+    z-index: 1000;
+
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    width: 100vw;
+    height: 100vh;
+    background-image: url("./../rotate.svg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    &.show {
+        display: flex;
+    }
+
+    h1 {
+        flex: 1;
+    }
+}

client/assets/styles/styles.mobile.less

@@ -7,17 +7,14 @@
         font-size: 8pt;
         padding: 0.25em;
 
-        .menu {
-            .logo {
-                display: none;
-            }
-
-            .team {
-                height: 20em;
-            }
-        }
-
         .instance {
+            grid-template-columns: 1fr;
+            grid-template-rows: min-content 1fr;
+
+            grid-template-areas:
+                "vbox"
+                "constructs";
+
             svg {
                 stroke-width: 1.25em;
             }
@@ -117,3 +114,79 @@
         }
     }
 }
+
+
+// portrait menu
+@media (max-width: 600px) {
+    #mnml {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+        grid-template-areas:
+          "main"
+    }
+
+    section {
+        grid-template-columns: 1fr;
+
+        .list {
+            grid-template-columns: 1fr 1fr;
+
+            &.play {
+                grid-template-columns: 1fr;
+            }
+        }
+
+    }
+
+    .account {
+        grid-template-columns: 1fr;
+
+        div {
+            padding: 0;
+        }
+    }
+
+    .play-ctrl {
+        display: none;
+    }
+
+    .menu {
+        height: auto;
+        display: block;
+
+        .options {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+
+            button:not(:last-child) {
+                border: 2px solid #222;
+            }
+
+            button.logo {
+                grid-column-end: span 2;
+                border: none;
+                margin-right: 0;
+                margin-top: 0.5em;
+                background-position: center;
+            }
+        }
+
+        .team {
+            grid-template-columns: 1fr;
+
+            .construct {
+                height: 10em;
+            }
+        }
+
+        .news {
+            padding: 0;
+        }
+    }
+
+    section {
+        .list {
+            grid-template-columns: 1fr;
+        }
+    }
+}

client/assets/styles/vbox.less

@@ -22,10 +22,6 @@
         grid-gap: 0.5em 1em;
         align-items: center;
         margin-bottom: 0.5em;
-
-        button {
-            width: 100%;
-        }
     }
 
     .vbox-btn {
@@ -73,6 +69,7 @@
     button {
         height: 4em;
         margin: 0;
+        width: 100%;
 
         // text-transform: none;
 
@@ -108,3 +105,62 @@
         }
     }
 }
+
+/* VBOX */
+.vbox {
+    align-content: space-between;
+    grid-area: vbox;
+    display: grid;
+    grid-template-rows: min-content min-content min-content;
+    grid-template-columns: 1fr min-content 1fr;
+    grid-template-areas:
+        "vbox varrow inventory"
+        "vbox varrow combiner";
+}
+
+.vbox-inventory {
+    grid-area: inventory;
+}
+
+.vbox-combiner {
+    grid-area: combiner;
+    display: flex;
+    flex-flow: column;
+    justify-content: flex-end;
+}
+
+.vbox-arrow, .vbox-arrow-mobile {
+    display: flex;
+    justify-content:center;
+    align-content:center;
+    flex-direction:column;
+
+    margin: 1em 0.25em 0 0.25em;
+    grid-area: varrow;
+    font-size: 2em;
+    color: @gray-hint;
+}
+
+.vbox-combiner button {
+    flex: 0;
+}
+
+
+.vbox-hdr {
+    display: flex;
+}
+
+.vbox-hdr h3 {
+    flex: 1;
+}
+
+.vbox-hdr .bits {
+    font-size: 2em;
+    line-height: 1em;
+    animation: bits 1s ease-out;
+}
+
+.arrow {
+    grid-area: arrow;
+    color: @gray-hint;
+}

client/src/components/mnml.jsx

@@ -7,15 +7,26 @@ const Controls = require('./controls');
 const Footer = require('./footer');
 
 const addState = connect(
-    state => ({ showNav: state.showNav })
+    ({ game, instance }) => ({ game, instance })
 );
 
 function Mnml(args) {
+    const {
+        game,
+        instance,
+    } = args;
+
+    const rotateClass = (game || instance) && window.innerWidth < window.innerHeight
+        ? 'show'
+        : '';
+
     return (
         <div id="mnml">
             <Main />
             <Controls />
             <Footer />
+            <div id="rotate" class={rotateClass} >
+            </div>
         </div>
     );
 }