From fb9e947c9c62ea0f9cfa96e7037f8e4d437b6e07 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Thu, 16 May 2019 21:20:05 +1000
Subject: [PATCH] some resizing

---
 client/instance.css                      | 20 +++++++++++++++++++-
 client/src/components/info.component.jsx | 10 ++++------
 client/styles.css                        | 22 +++++++++++++++-------
 3 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/client/instance.css b/client/instance.css
index 38e42479..e585759b 100644
--- a/client/instance.css
+++ b/client/instance.css
@@ -188,7 +188,6 @@
 .instance-cryp .skills {
     grid-area: skills;
     display: flex;
-    flex-flow: row;
     border-width: 0px;
 }
 
@@ -375,3 +374,22 @@ button.equip {
 .equip .specs figcaption {
     font-size: 75%;
 }
+
+.thresholds {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    /*justify-content: space-around;*/
+}
+
+.spec-goals figure {
+    margin: 1em 0;
+}
+
+.spec-goals figure svg {
+    height: 1em;
+}
+
+.spec-goals .unmet {
+    opacity: 0.5;
+}
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index 9b323cb1..6284790e 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -102,12 +102,10 @@ function Info(args) {
 
             return (
                 <div className="info-spec">
-                    <div>
-                        <div> {value.spec} </div>
-                        <div> {SPEC_CONSTANT[value.spec].description} </div>
-                        <div className="thresholds">
-                            {thresholdEl}
-                        </div>
+                    <div> {value.spec} </div>
+                    <div> {SPEC_CONSTANT[value.spec].description} </div>
+                    <div className="thresholds">
+                        {thresholdEl}
                     </div>
                     <button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
                         unequip
diff --git a/client/styles.css b/client/styles.css
index 35be648f..f997a44c 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -26,12 +26,6 @@ html, body, main {
     /*overflow: hidden;*/
 }
 
-@media (max-width: 1500px) {
-    .cryps {
-        font-size: 75%;
-    }
-}
-
 html {
     box-sizing: border-box;
     margin: 0;
@@ -505,4 +499,18 @@ section .top {
 
 .menu-instance-list table {
     margin-bottom: 2em;
-}
\ No newline at end of file
+}
+
+@media (max-height: 900px), (max-width: 1500px) {
+    .cryps {
+        font-size: 75%;
+    }
+
+    svg {
+        height: 1em;
+    }
+
+    .instance-cryp .skills {
+        flex-flow: column;
+    }
+}