gud

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;
         }
     }
 
@@ -203,9 +202,8 @@
 
 .combat-anim {
     width: 100%;
+    height: 100%;
     position: absolute;
-    display: flex;
-    flex-flow: column;
 }
 
 .combat-anim svg {
@@ -310,7 +308,7 @@
 .skill-animation {
     opacity: 0;
     stroke-width: 5px;
-    height: 5em;
+    // height: 5em;
 }
 
 @media (max-width: 1000px) {

client/assets/styles/instance.mobile.less

@@ -3,7 +3,7 @@
 // tablet / ipad
 @media (max-width: 1100px) {
     .instance {
-        grid-template-columns: 1fr2;
+        grid-template-columns: 1fr;
         grid-template-rows: min-content 1fr;
         grid-template-areas:
             "vbox"

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%;
         }
     }
 }