diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less
index aebde113..9fe43af7 100644
--- a/client/assets/styles/instance.less
+++ b/client/assets/styles/instance.less
@@ -4,11 +4,16 @@
overflow-x: hidden;
display: grid;
grid-template-columns: 2fr minmax(min-content, 1fr);
- grid-template-rows: min-content 1fr;
+ grid-template-rows: 1fr min-content min-content;
grid-template-areas:
- "vbox info"
- "constructs info";
+ "constructs constructs"
+ "rule rule"
+ "vbox info";
+
+ hr {
+ grid-area: rule;
+ }
}
@media (max-width: 1920px) {
@@ -30,9 +35,26 @@
align-content: center;
}
-.scoreboard .ready {
- background: black;
- color: forestgreen;
+.scoreboard {
+ display: flex;
+ flex-flow: column;
+ height: 100%;
+
+ table {
+ flex: 1;
+ }
+
+ button {
+ margin: 2em 0 0 0;
+ flex: 1;
+ font-size: 200%;
+ border-color: @green;
+ }
+
+ .ready {
+ background: black;
+ color: forestgreen;
+ }
}
.instance .info {
@@ -154,12 +176,12 @@
.instance-construct {
flex: 1;
display: grid;
- grid-template-rows: min-content min-content min-content 1fr min-content;
+ grid-template-rows: min-content 1fr min-content min-content min-content;
grid-template-areas:
"name "
+ "avatar "
"skills "
"specs "
- "avatar "
"stats ";
/*padding: 0.5em;*/
@@ -205,6 +227,7 @@
.specs {
grid-area: specs;
padding: 0 0.5em;
+ margin-bottom: 0.75em;
display: grid;
grid-template-columns: repeat(3, 1fr);
diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less
index aa085da9..9828e1a0 100644
--- a/client/assets/styles/styles.less
+++ b/client/assets/styles/styles.less
@@ -81,11 +81,12 @@ figure {
grid-template-rows: min-content 1fr min-content;
grid-template-areas:
"hd hd"
- "nav main"
- "footer footer";
+ "main main"
+ "main main";
}
nav {
+ display: none;
grid-area: nav;
padding-left: 2em;
margin-right: 2em;
@@ -134,8 +135,7 @@ nav button:focus, nav button:active {
}
main {
- padding-top: 1em;
- padding-right: 1em;
+ padding: 1em;
grid-area: main;
}
@@ -627,7 +627,7 @@ main .top button {
}
footer {
- display: flex;
+ display: none;
flex-flow: row wrap;
grid-area: footer;
margin: 0;
diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.css
index 2c2c8ac7..68e27ca9 100644
--- a/client/assets/styles/styles.mobile.css
+++ b/client/assets/styles/styles.mobile.css
@@ -21,6 +21,10 @@
display: none;
}
+ footer {
+ display: flex;
+ }
+
#nav-btn, #instance-nav {
display: unset;
}
diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less
index 81b03437..d2f9c31c 100644
--- a/client/assets/styles/vbox.less
+++ b/client/assets/styles/vbox.less
@@ -1,8 +1,6 @@
@import 'colours.less';
.vbox {
- margin-bottom: 2em;
-
.vbox-hdr {
margin-bottom: 1em;
height: 2em;
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 03c626ea..78b145ce 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -63,6 +63,7 @@ function Instance(args) {