at last i may rest

client/assets/styles/game.css

@@ -52,8 +52,7 @@
 .game-construct {
     display: grid;
 
-    /*justify-items: center;*/
-    justify-items: start;
+    justify-items: center;
     /*align-items: flex-end;*/
 
     grid-template-rows: min-content minmax(min-content, 1fr) min-content min-content min-content;
@@ -100,8 +99,8 @@
 .game-construct .stats {
     grid-area: stats;
     display: flex;
-    width: 100%;
     justify-content: center;
+    text-align: center;
 }
 
 .game-construct .stats div {

client/assets/styles/instance.css

@@ -199,17 +199,6 @@
     text-align: center;
 }
 
-.construct-list .avatar figure {
-    margin: 0;
-    height: 80%;
-    text-align: center;
-    box-sizing: border-box;
-}
-
-.construct-list .avatar figcaption {
-    font-size: 90%;
-}
-
 .construct-list .skills {
     grid-area: skills;
     display: flex;
@@ -246,19 +235,19 @@
     display: flex;
     flex-flow: row;
     flex: 1;
-    justify-content: center;
     border-width: 0px;
+    text-align: center;
 }
 
 .construct-list .stats figcaption {
     font-size: 75%;
 }
 
-.stats figure:nth-child(4n) {
+.stats div:nth-child(4n) {
     margin: 0 1em;
 }
 
-.stats figure {
+.stats div {
     flex: 1;
 }
 

client/assets/styles/instance.mobile.css

@@ -1,5 +1,6 @@
 @media (max-height: 800px), (max-width: 1000px) {
     .instance {
+        font-size: 8pt;
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: min-content 1fr;
@@ -78,29 +79,41 @@
         transition-timing-function: ease;
     }
 
+    .instance-construct .avatar {
+        min-height: 150px;
+    }
+
     .instance-construct:not(:last-child) {
         border-right: 1px solid #222;
     }
 
+    .instance-construct .skills {
+        flex-flow: column;
+    }
+
+    .instance-construct .skills button {
+        margin: 0;
+    }
+
     .instance-construct .specs {
         margin: 0;
     }
 
     .construct-list .stats {
         flex-flow: row wrap;
+        text-align: center;
     }
 
-    .construct-list .stats figcaption {
-        font-size: 75%;
-    }
-
-    .instance-construct .stats figure.speed {
+    .instance-construct .stats div.speed {
         order: -1;
         flex: 1 0 100%;
+        margin: 0;
     }
 
-    .instance-construct .stats figure {
-        flex: 1 0 33%;
+    .instance-construct .stats div {
+        flex: 1 1 33%;
+        min-width: 0;
+        overflow: hidden;
     }
 
     .instance-nav {

client/assets/styles/styles.mobile.css

@@ -1,6 +1,6 @@
-@media (max-height: 800px), (max-width: 1000px) {
+@media (max-height: 800px), (max-width: 800px) {
     #mnml {
-        font-size: 8pt;
+        font-size: 10pt;
         padding: 0;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr min-content;
@@ -10,7 +10,7 @@
     }
 
     #mnml button {
-        font-size: 8pt;
+        font-size: 10pt;
     }
 
     table td {

client/index.html

@@ -10,6 +10,7 @@
     <meta name="author" content="ntr@smokestack.io">
     <link rel="manifest" href="manifest.webmanifest">
     <link rel="stylesheet" href="./node_modules/izitoast/dist/css/iziToast.min.css"></script>
+    <link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
     <link rel="stylesheet" href="assets/styles/normalize.css">
     <link rel="stylesheet" href="assets/styles/skeleton.css">
   </head>

client/src/components/footer.jsx

@@ -25,8 +25,8 @@ function renderHeader(args) {
         game,
     } = args;
 
-    if (instance) return <InstanceFooter />;
     if (game) return <GameFooter />;
+    if (instance) return <InstanceFooter />;
 
     if (nav === 'team') return <TeamFooter />;
     if (nav === 'list') return <ListFooter />;

client/src/components/instance.constructs.jsx

@@ -190,13 +190,13 @@ function Construct(props) {
             || (s.includes('Power') && 'Power')
             || (s.includes('Life') && 'Life');
 
-        return <figure key={stat.stat}
+        return <div key={stat.stat}
             alt={stat.stat}
             className={stat.stat}
             onMouseOver={e => hoverInfo(e, info)} >
             {shapes[s]()}
-            <figcaption>{construct[stat.stat].value}</figcaption>
-        </figure>;
+            <div>{construct[stat.stat].value}</div>
+        </div>;
     });
 
     return (