diff --git a/client/instance.css b/client/instance.css index 3daa30bb..84f56aea 100644 --- a/client/instance.css +++ b/client/instance.css @@ -7,7 +7,7 @@ grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(11, 1fr); grid-template-areas: - "n v v v v v v v x x x x" + ". v v v v v v v x x x x" "n v v v v v v v x x x x" "n v v v v v v v x x x x" "n v v v v v v v x x x x" @@ -23,7 +23,7 @@ .instance-hdr { grid-area: n; display: flex; - flex-flow: row; + flex-flow: column; flex: 0 0 100%; } @@ -180,15 +180,14 @@ .instance-cryp { display: grid; grid-template-columns: repeat(5, 1fr); - grid-template-rows: repeat(4, 1fr); + grid-template-rows: repeat(5, 1fr); grid-template-areas: + "sp sp sp sp sp" "av av av sk sk" "av av av sk sk" "av av av sk sk" - "sp sp sp sp sp"; + "st st st st st"; - max-width: 350px; - max-height: 350px; margin-left: 1em; border: 1px solid whitesmoke; transition-property: all; @@ -201,12 +200,11 @@ grid-area: av; display: flex; flex: 1 1 auto; - justify-content: center; } .instance-cryp .avatar figure { margin: 0; - height: 75%; + height: 100%; text-align: center; box-sizing: border-box; } @@ -215,12 +213,23 @@ font-size: 90%; } +.instance-cryp .skills { + grid-area: sk; + display: flex; + flex-flow: column; +} + +.instance-cryp .skills button { + height: 100%; + width: 100%; +} + .instance-cryp .specs { grid-area: sp; display: flex; flex: 1; justify-content: center; - border-top: 1px solid whitesmoke; + border-bottom: 1px solid whitesmoke; } .instance-cryp .specs figure { @@ -235,13 +244,22 @@ font-size: 75%; } -.instance-cryp .skills { - grid-area: sk; +.instance-cryp .stats { + grid-area: st; display: flex; - flex-flow: column; + flex: 1; + justify-content: center; + border-top: 1px solid whitesmoke; } -.instance-cryp .skills button { - height: 100%; - width: 100%; +.instance-cryp .stats figure { + flex: 1; + border: 0; + align-items: center; + padding: 0.5em 0 0 0; + text-align: center; +} + +.instance-cryp .stats figcaption { + font-size: 75%; } diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index d4e75669..e6adf175 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -88,8 +88,8 @@ function InstanceComponent(args) {