mobile styles

WORKLOG.md

@@ -34,6 +34,8 @@
 
 *CLIENT*
 
+targeting arrows back?
+
 *SERVER*
 * std game mode
   * time control

client/assets/styles/instance.css

@@ -177,11 +177,7 @@
     padding: 0.5em;
     border: 2px solid #222;
     border-left-width: 0;
-/*    transition-property: all;
+}
-    transition-duration: 0.5s;
-    transition-delay: 0;
-    transition-timing-function: ease;
-*/}
 
 .instance-construct:first-child, .instance-construct-active:first-child {
     margin-left: 0;

client/assets/styles/instance.mobile.css

@@ -35,6 +35,7 @@
     .instance.constructs-visible .equip {
         display: initial;
         grid-area: vbox;
+        margin: 0 0 0.5em 0;
     }
 
     .instance.constructs-visible .highlight {
@@ -64,6 +65,10 @@
         align-items: stretch;
     }
 
+    .equip .skills {
+        border-bottom: 0;
+    }
+
     .instance-construct {
         grid-row: 2;
         display: grid;
@@ -72,7 +77,7 @@
             "name   "
             "avatar ";
         padding: 0.5em;
-        border: 2px solid #222;
+        border: 1px solid #222;
         transition-property: all;
         transition-duration: 0.5s;
         transition-delay: 0;
@@ -91,6 +96,9 @@
         display: none;
     }
 
+    .instance-construct-active .avatar {
+        min-height: 150px;
+    }
 
     .instance-construct-active {
         grid-row: 1;
@@ -104,19 +112,26 @@
             "avatar "
             "stats  ";
 
-        /*margin: 0 2em;*/
         padding: 0.5em;
-        border: 2px solid #222;
+        border: none;
         transition-property: all;
         transition-duration: 0.5s;
         transition-delay: 0;
         transition-timing-function: ease;
     }
 
+    .instance-construct-active .specs {
+        margin: 0;
+    }
+
     .instance-construct-active img {
         width: 55px;
     }
 
+    .instance-construct:last-child {
+        border-left-width: 0;
+    }
+
 
     /* Construct Stuff */
 

client/src/components/skill.btn.jsx

@@ -44,6 +44,7 @@ function Skill(props) {
             <button
                 disabled='true'
                 className='construct-skill-btn disabled'>
+                &nbsp;
             </button>
         );
     }