Merge remote-tracking branch 'origin/pax' into develop

client/assets/styles/controls.less

@@ -44,7 +44,10 @@ aside {
     button {
         width: 100%;
         font-size: 150%;
-        margin-bottom: 0.5em;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 
     button.ready:enabled {

client/assets/styles/game.less

@@ -66,14 +66,16 @@
 
     justify-items: center;
 
-    grid-template-columns: 1fr 3fr;
+    grid-template-columns: 1fr;
+    grid-template-rows: min-content 1fr;
 
     .left {
+        width: 100%;
         display: grid;
-        grid-template-rows: 1fr 1fr;
+
+        grid-template-columns: 1fr 2fr;
         grid-template-areas:
-            "skills "
-            "effects";
+            "skills effects";
     }
 
     .right {
@@ -92,7 +94,6 @@
     transition-timing-function: ease;
 
     .effects {
-        align-self: flex-end;
         text-align: right;
     }
 
@@ -108,13 +109,11 @@
     }
 
     .skills {
-        grid-area: skills;
-        width: 100%;
-
         button {
             width: 100%;
             height: 2em;
             height: 25%;
+            margin-right: 1em;
         }
         button.active {
             background: #2c2c2c;
@@ -206,9 +205,8 @@
 
 .combat-anim {
     width: 100%;
+    height: 100%;
     position: absolute;
-    display: flex;
-    flex-flow: column;
 }
 
 .combat-anim svg {
@@ -313,7 +311,7 @@
 .skill-animation {
     opacity: 0;
     stroke-width: 5px;
-    height: 5em;
+    // height: 5em;
 }
 
 @media (max-width: 1000px) {
@@ -332,6 +330,11 @@
             grid-template-rows: min-content 1fr;
 
             .left {
+                width: 100%;
+                grid-template-areas:
+                    "skills"
+                    "effects";
+                grid-template-columns: 1fr;
                 grid-template-rows: min-content min-content;
             }
 
@@ -369,9 +372,13 @@
                 font-size: 100%;
             }
 
-            .skills button, .stats, .name {
+            .stats, .name {
                 font-size: 75%;
             }
+
+            .skills button {
+                font-size: 50%;
+            }
         }
 
         .opponent {
@@ -382,4 +389,4 @@
             }
         }
     }
-}
+}

client/assets/styles/instance.mobile.less

@@ -1,5 +1,20 @@
 @import 'colours.less';
 
+// tablet / ipad
+@media (max-width: 1100px) {
+    .instance {
+        grid-template-columns: 1fr;
+        grid-template-rows: min-content 1fr;
+        grid-template-areas:
+            "vbox"
+            "constructs";
+
+        .info {
+            display: none;
+        }
+    }
+}
+
 @media (max-width: 800px) {
     .instance {
         font-size: 8pt;
@@ -32,6 +47,10 @@
         &:not(.visible) {
             display: none;
         }
+
+        .vbox-vbox {
+            margin-bottom: 1em;
+        }
     }
 
     .vbox-arrow {

client/assets/styles/styles.less

@@ -97,14 +97,8 @@ dl {
     padding: 0.5em 1em;
 
     &.animations-test {
-        grid-template-columns: 1fr 9fr 1fr;
-        grid-template-areas:
-          "nav hdr  ctrl"
-          "nav main ctrl"
-          "nav main ctrl";
-
-        nav {
-            display: initial;
+        aside button {
+            font-size: 50%;
         }
     }
 }
@@ -124,6 +118,7 @@ button, input {
     font-size: 100%;
     flex: 1;
     border-radius: 0.5em;
+    line-height: 2em;
 
     /*the transitions */
     transition-property: border-color, color, background;

client/assets/styles/styles.mobile.less

@@ -14,10 +14,6 @@
         overflow-y: initial;
     }
 
-    #mnml button {
-        font-size: 10pt;
-    }
-
     table td {
         height: 2.5em;
     }
@@ -35,6 +31,10 @@
         position: fixed;
         bottom: 0;
         width: 100%;
+
+        button {
+            font-size: 90%;
+        }
     }
 
     #nav-btn, #instance-nav {
@@ -52,10 +52,6 @@
         display: none;
     }
 
-/*    header {
-        display: none;
-    }
-*/
     main {
         overflow-x: hidden;
         overflow-y: initial;

client/assets/styles/vbox.less

@@ -33,6 +33,7 @@
         margin: 0;
         background-color: @gray-box;
         height: 3em;
+        line-height: 1em;
         border-width: 0;
 
         :active, :hover, :focus {