hnnnnnnn

client/instance.css

@@ -5,10 +5,10 @@
 .instance {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: min-content min-content 1fr 2fr;
+    grid-template-rows: min-content min-content min-content min-content;
 
     grid-template-areas:
-        "top    top     top"
+        "top    top     info"
         "vbox   vbox    info"
         "equip  equip   info"
         "cryps  cryps   info";
@@ -21,6 +21,9 @@
 .instance .info {
     margin-left: 1em;
     grid-area: info;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
 }
 
 .instance .cryps {
@@ -117,21 +120,21 @@
 
 .instance-cryp {
     display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: min-content min-content min-content min-content min-content min-content;
+    grid-template-rows: min-content min-content min-content 250px min-content;
     grid-template-areas:
         "name   "
+        "skills "
+        "specs  "
         "avatar "
-        "skills"
-        "stats  "
-        "specs  ";
-    margin: 0 2em;
-    /*border: 1px solid whitesmoke;*/
+        "stats  ";
+
+    /*margin: 0 2em;*/
+    padding: 0.5em;
+    border: 2px solid #222;
     transition-property: all;
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: ease;
-    /*max-height: 450px;*/
 }
 
 .instance-cryp:first-child {
@@ -149,6 +152,7 @@
 }
 
 .instance-cryp img {
+    justify-self: center;
     grid-area: avatar;
     min-width: 150px;
 }
@@ -176,9 +180,7 @@
 }
 
 .instance-cryp .skills button {
-    height: 100%;
-    width: 100%;
-    padding: 10px;
+    flex: 1;
     border-width: 0px;
 }
 
@@ -196,6 +198,7 @@
 }
 */
 .instance-cryp .specs {
+    margin-top: 1em;
     grid-area: specs;
     display: flex;
     flex: 1;
@@ -238,6 +241,10 @@
     justify-content: center;
 }
 
+.icons figure:nth-child(4n) {
+    margin: 0 1em;
+}
+
 .equip-icon {
     height: 2em;
     stroke-width: 5px;
@@ -275,11 +282,23 @@
 .equip {
     display: flex;
     margin: 1em 0;
+    text-align: center;
+}
+
+.equip h3 {
+    margin-bottom: 0.5em;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
 }
 
 .equip .specs {
-    display: flex;
     flex: 1;
+    border: 2px solid #222;
+}
+
+.equip .items {
+    display: flex;
+    flex-flow: row;
 }
 
 .label {
@@ -287,13 +306,12 @@
 }
 
 .equip .skills {
-    display: flex;
     flex: 1;
-    flex-direction: column;
+    border: 2px solid #222;
 }
 
 .equip .skills button {
-    flex: 1 1 100%;
+    flex: 1;
     color: whitesmoke;
     font-size: 16pt;
     padding: 5px;
@@ -318,17 +336,9 @@ button.equip {
     }
 }
 
-
-.equip .specs {
-    display: flex;
-    padding-left: 5%;
-    flex-direction: column;
-}
-
 .equip .specs figure {
     flex: 1;
     border: 0;
-    padding: 0.5em 1em 0 0;
     text-align: center;
 }
 

client/src/components/instance.cryps.jsx

@@ -113,7 +113,6 @@ function Cryp(props) {
             return (
                 <figure key={i} onClick={blankSpecClick} className={equip} >
                     {shapes.diamond(`stat-icon ${equip}`)}
-                    <figcaption>+</figcaption>
                 </figure>
             );
         }

client/styles.css

@@ -180,7 +180,7 @@ table {
 }
 
 table td {
-    border: 1px solid whitesmoke;
+    border: 1px solid #222;
     padding: 0.2em;
     text-align: center;
     height: 40px;