diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css
index 4c6593b4..5e7b3a15 100644
--- a/client/assets/styles/game.css
+++ b/client/assets/styles/game.css
@@ -52,8 +52,7 @@
.game-construct {
display: grid;
- /*justify-items: center;*/
- justify-items: start;
+ justify-items: center;
/*align-items: flex-end;*/
grid-template-rows: min-content minmax(min-content, 1fr) min-content min-content min-content;
@@ -100,8 +99,8 @@
.game-construct .stats {
grid-area: stats;
display: flex;
- width: 100%;
justify-content: center;
+ text-align: center;
}
.game-construct .stats div {
diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css
index ff109d77..90b73b5e 100644
--- a/client/assets/styles/instance.css
+++ b/client/assets/styles/instance.css
@@ -199,17 +199,6 @@
text-align: center;
}
-.construct-list .avatar figure {
- margin: 0;
- height: 80%;
- text-align: center;
- box-sizing: border-box;
-}
-
-.construct-list .avatar figcaption {
- font-size: 90%;
-}
-
.construct-list .skills {
grid-area: skills;
display: flex;
@@ -246,19 +235,19 @@
display: flex;
flex-flow: row;
flex: 1;
- justify-content: center;
border-width: 0px;
+ text-align: center;
}
.construct-list .stats figcaption {
font-size: 75%;
}
-.stats figure:nth-child(4n) {
+.stats div:nth-child(4n) {
margin: 0 1em;
}
-.stats figure {
+.stats div {
flex: 1;
}
diff --git a/client/assets/styles/instance.mobile.css b/client/assets/styles/instance.mobile.css
index bee7e2fb..71804f1e 100644
--- a/client/assets/styles/instance.mobile.css
+++ b/client/assets/styles/instance.mobile.css
@@ -1,5 +1,6 @@
@media (max-height: 800px), (max-width: 1000px) {
.instance {
+ font-size: 8pt;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content 1fr;
@@ -78,29 +79,41 @@
transition-timing-function: ease;
}
+ .instance-construct .avatar {
+ min-height: 150px;
+ }
+
.instance-construct:not(:last-child) {
border-right: 1px solid #222;
}
+ .instance-construct .skills {
+ flex-flow: column;
+ }
+
+ .instance-construct .skills button {
+ margin: 0;
+ }
+
.instance-construct .specs {
margin: 0;
}
.construct-list .stats {
flex-flow: row wrap;
+ text-align: center;
}
- .construct-list .stats figcaption {
- font-size: 75%;
- }
-
- .instance-construct .stats figure.speed {
+ .instance-construct .stats div.speed {
order: -1;
flex: 1 0 100%;
+ margin: 0;
}
- .instance-construct .stats figure {
- flex: 1 0 33%;
+ .instance-construct .stats div {
+ flex: 1 1 33%;
+ min-width: 0;
+ overflow: hidden;
}
.instance-nav {
diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.css
index 94b58e2d..dc23e586 100644
--- a/client/assets/styles/styles.mobile.css
+++ b/client/assets/styles/styles.mobile.css
@@ -1,6 +1,6 @@
-@media (max-height: 800px), (max-width: 1000px) {
+@media (max-height: 800px), (max-width: 800px) {
#mnml {
- font-size: 8pt;
+ font-size: 10pt;
padding: 0;
grid-template-columns: 1fr;
grid-template-rows: 1fr min-content;
@@ -10,7 +10,7 @@
}
#mnml button {
- font-size: 8pt;
+ font-size: 10pt;
}
table td {
diff --git a/client/index.html b/client/index.html
index 37b7ce89..3101999c 100644
--- a/client/index.html
+++ b/client/index.html
@@ -10,6 +10,7 @@
+
diff --git a/client/src/components/footer.jsx b/client/src/components/footer.jsx
index d7cfa295..8b726001 100644
--- a/client/src/components/footer.jsx
+++ b/client/src/components/footer.jsx
@@ -25,8 +25,8 @@ function renderHeader(args) {
game,
} = args;
- if (instance) return