mobile styling

client/assets/styles/game.css

@@ -27,7 +27,6 @@
 
 .opponent {
     grid-area: opponent;
-    transform: perspective(23rem);
 }
 
 .opponent .combat-text {
@@ -38,10 +37,10 @@
 
 .opponent .game-construct {
     align-items: flex-start;
-    grid-template-rows: min-content min-content min-content 2fr;
+    grid-template-rows: min-content min-content min-content minmax(min-content, 2fr);
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
-        "stats  stats"
+        "stats  ."
         "name   ."
         "effects ."
         "avatar target";
@@ -59,14 +58,14 @@
     justify-items: start;
     /*align-items: flex-end;*/
 
-    grid-template-rows: 1fr 2fr 1fr min-content;
+    grid-template-rows: min-content minmax(min-content, 2fr) min-content min-content min-content;
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
         "skills     ."
         "avatar     target"
         "effects    ."
         "name       ."
-        "stats      stats ";
+        "stats      .";
 
     transition-property: all;
     transition-duration: 0.25s;
@@ -99,12 +98,20 @@
     grid-area: stats;
     display: flex;
     flex-flow: row;
+    width: 100%;
 }
 
-.game-construct figure {
+.game-construct .stats div {
     padding: 0 0.5em;
     display: flex;
     flex-flow: column;
+    flex: 1;
+    white-space: nowrap;
+    text-align: center;
+}
+
+.game-construct .stats .value {
+    display: none;
 }
 
 .game-construct figcaption {
@@ -139,7 +146,6 @@
 
 .game-construct .effects {
     grid-area: effects;
-    font-size: 1.5em;
     white-space: nowrap;
     width: 100%;
     text-align: center;
@@ -378,4 +384,23 @@ CONSTRUCT DAMAGE
     opacity: 1;
   }
 }
-*/
+*/
+
+
+@media (max-height: 800px), (max-width: 1000px) {
+    .game .stats div {
+        padding: 0;
+    }
+
+    .game .stats .max {
+        display: none;
+    }
+
+    .game .stats .value {
+        display: flex;
+    }
+
+    .game .stats svg {
+        height: 1em;
+    }
+}

client/assets/styles/styles.css

@@ -2,7 +2,7 @@
     GLOBAL
 */
 
-html, body, #constructs {
+html, body, #mnml {
     /*width: 100%;*/
     margin: 0;
 
@@ -61,7 +61,7 @@ figure {
     text-align: center;
 }
 
-#constructs {
+#mnml {
     padding: 0 2em;
     display: grid;
     grid-template-columns: 1fr 8fr;
@@ -111,8 +111,9 @@ nav button[disabled], nav button[disabled]:hover {
     text-decoration: line-through
 }
 
-nav button:hover {
+nav button:hover, nav button:focus {
     color: whitesmoke;
+    text-decoration: underline;
 }
 
 main {
@@ -282,13 +283,13 @@ button[disabled] {
     flex-flow: column;
 }
 
-#constructs input, #constructs select {
+#mnml input, #mnml select {
     border-color: #444;
     background-color: #333;
     border-radius: 0;
 }
 
-#constructs input:focus {
+#mnml input:focus, #mnml select:focus {
     border-color: whitesmoke;
 }
 
@@ -396,7 +397,8 @@ header {
 
 .spawn-btn button {
     flex: 1;
-    margin: 0.5em 2em;
+    margin: 0.5em 1em;
+    padding: 0 0.5em;
     border-color: #333
 }
 
@@ -459,6 +461,13 @@ header {
 .create-form button {
     flex: 0 1 25%;
     font-size: 1.5em;
+    border-color: #444;
+    background-color: #333;
+}
+
+.create-form button:hover, .create-form button:focus {
+    border-color: whitesmoke;
+    text-decoration: none;
 }
 
 figure.gray {
@@ -517,7 +526,7 @@ main .top {
 }
 
 @media (max-height: 900px), (max-width: 1500px) {
-    #constructs {
+    #mnml {
         font-size: 75%;
     }
 

client/assets/styles/styles.mobile.css

@@ -1,5 +1,5 @@
 @media (max-height: 800px), (max-width: 1000px) {
-    #constructs {
+    #mnml {
         font-size: 8pt;
         padding: 0;
         grid-template-columns: min-content 1fr;
@@ -17,11 +17,6 @@
         height: 2.5em;
     }
 
-    svg {
-        width: 5em;
-    }
-
-
     nav {
         opacity: 0;
         position: fixed;