From 61ced01ba78def0f00fdb760ac01bbf55a28922d Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 4 Jun 2019 00:27:28 +1000
Subject: [PATCH] at last i may rest

---
 client/assets/styles/game.css                 |  5 ++--
 client/assets/styles/instance.css             | 17 +++---------
 client/assets/styles/instance.mobile.css      | 27 ++++++++++++++-----
 client/assets/styles/styles.mobile.css        |  6 ++---
 client/index.html                             |  1 +
 client/src/components/footer.jsx              |  2 +-
 client/src/components/instance.constructs.jsx |  6 ++---
 7 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css
index 4c6593b4..5e7b3a15 100644
--- a/client/assets/styles/game.css
+++ b/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 {
diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css
index ff109d77..90b73b5e 100644
--- a/client/assets/styles/instance.css
+++ b/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;
 }
 
diff --git a/client/assets/styles/instance.mobile.css b/client/assets/styles/instance.mobile.css
index bee7e2fb..71804f1e 100644
--- a/client/assets/styles/instance.mobile.css
+++ b/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 {
diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.css
index 94b58e2d..dc23e586 100644
--- a/client/assets/styles/styles.mobile.css
+++ b/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 {
diff --git a/client/index.html b/client/index.html
index 37b7ce89..3101999c 100644
--- a/client/index.html
+++ b/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>
diff --git a/client/src/components/footer.jsx b/client/src/components/footer.jsx
index d7cfa295..8b726001 100644
--- a/client/src/components/footer.jsx
+++ b/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 />;
diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx
index 7662411d..a26a256d 100644
--- a/client/src/components/instance.constructs.jsx
+++ b/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 (