diff --git a/client/cryps.css b/client/cryps.css index 666e4dc4..e0afb803 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -521,6 +521,65 @@ table td svg { min-width: 300px; } +/* CRYP BOX */ +.instance-cryp { + flex: 1 1 100%; + + display: flex; + flex-flow: column; + border: 1px solid whitesmoke; + margin-bottom: 1em; + justify-content: center; + + transition-property: all; + transition-duration: 0.5s; + transition-delay: 0; + transition-timing-function: ease; +} + +.instance-cryp-top { + display: flex; + flex: 1 1 75%; + width: 100%; + justify-content: center; + align-items: stretch; +} + +.instance-cryp figure { + margin: 0; + flex: 0 0 50%; + text-align: center; + box-sizing: border-box; + display: flex; + flex-flow: column; + justify-content: flex-end; +} + +.instance-cryp .stats { + flex: 0 0 20%; + width: 100%; + display: flex; + border-top: 1px solid whitesmoke; +} + +.stats figure { + flex: 1 1 0; + border: 0; + align-items: center; + padding: 0.5em 0 0 0; +} + +.instance-cryp .stats figcaption { + font-size: 75%; +} + +.instance-cryp .skills { + display: flex; + flex-flow: row wrap; + flex: 1 1 50%; + height: 100%; +} + /* INFO */ diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx index 9ee261cf..dbc02ba9 100644 --- a/client/src/components/instance.cryps.jsx +++ b/client/src/components/instance.cryps.jsx @@ -124,12 +124,12 @@ function Cryp(props) { return (
-
+
{crypAvatar(cryp.name)}
{cryp.name}