From a13f67a573d708d933248304506919b86146b00a Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 5 Nov 2019 11:22:34 +1100
Subject: [PATCH] wip

---
 client/assets/styles/game.less              | 14 ++----
 client/assets/styles/instance.less          |  4 +-
 client/assets/styles/styles.mobile.less     | 47 ++++++++++++++++++++-
 client/src/components/anims/siphon.tick.jsx |  2 +-
 4 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less
index ce49b4b1..7391265c 100644
--- a/client/assets/styles/game.less
+++ b/client/assets/styles/game.less
@@ -199,7 +199,7 @@
     position: absolute;
     top: 35%;
     height: 15%;
-    width: 90%;
+    width: calc(90% - 1.25em);
 }
 
 .resolving-skill {
@@ -239,6 +239,9 @@
     overflow: hidden;
     max-height: 100%;
     max-width: 100%;
+
+    display: flex;
+    flex-flow: column;
 }
 
 .combat-anim svg {
@@ -339,12 +342,3 @@
 .animating .skills {
     opacity: 0;
 }
-
-.skill-animation {
-    opacity: 0;
-    stroke-width: 5px;
-    overflow: hidden;
-    max-height: 100%;
-    max-width: 100%;
-    // height: 5em;
-}
\ No newline at end of file
diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less
index 0f05fc8b..cf1e43a0 100644
--- a/client/assets/styles/instance.less
+++ b/client/assets/styles/instance.less
@@ -225,7 +225,7 @@
         }
 
         figcaption {
-            font-size: 75%;
+            // font-size: 75%;
             line-height: initial;
         }
     }
@@ -239,7 +239,7 @@
         text-align: center;
 
         figcaption {
-            font-size: 75%;
+            // font-size: 75%;
         }
 
         // give speed some space
diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less
index 218d90df..30a03a5e 100644
--- a/client/assets/styles/styles.mobile.less
+++ b/client/assets/styles/styles.mobile.less
@@ -5,6 +5,51 @@
 
     #mnml {
         font-size: 8pt;
-    }
+        padding: 0.25em;
 
+        .game {
+
+            .team, #targeting, .resolving-skill {
+                width: calc(90% - 3em);
+            }
+
+            .game-construct {
+                .avatar {
+                    grid-area: initial;
+                    position: absolute;
+                    top: 0;
+                    height: 100%;
+                    width: 100%;
+                    z-index: -1;
+                }
+
+                svg {
+                    height: 1em;
+                }
+            }
+        }
+
+        .instance-construct {
+            position: relative;
+
+            .skills, .specs {
+                font-size: 75%;
+            }
+
+            .avatar {
+                grid-area: initial;
+                position: absolute;
+                top: 0;
+                height: 100%;
+                width: 100%;
+                z-index: -1;
+            }
+        }
+
+        .opponent {
+            .avatar {
+                bottom: 0;
+            }
+        }
+    }
 }
diff --git a/client/src/components/anims/siphon.tick.jsx b/client/src/components/anims/siphon.tick.jsx
index 43155c07..1f7f4d47 100644
--- a/client/src/components/anims/siphon.tick.jsx
+++ b/client/src/components/anims/siphon.tick.jsx
@@ -38,7 +38,7 @@ class SiphonTick extends Component {
     render() {
         return (
             <svg
-                class={'skill-anim'}
+                class='skill-anim'
                 version="1.1"
                 id="Layer_1"
                 xmlns="http://www.w3.org/2000/svg"