Style boost

This commit is contained in:
2024-11-16 21:39:17 -06:00
parent 48ab8f7964
commit b5c6b8244d
5 changed files with 59 additions and 69 deletions

View File

@@ -3,11 +3,12 @@
display: grid;
grid-template-areas:
"rank board opponent-side-board"
"rank board opponent-info"
"rank board player-info"
"rank board player-side-board"
". file .";
grid-template-columns: auto 1fr auto;
grid-template-rows: repeat(3, 1fr) auto;
grid-template-rows: 3fr 1fr 1fr 3fr auto;
background-color: #444;
gap: 5px;
place-self: center;
@@ -103,18 +104,29 @@
align-content: stretch;
}
.login-to-play {
background: linear-gradient(45deg, beige, white);
display: grid;
place-content: center;
}
@media all and (max-width: 900px) {
.game-board {
grid-template-areas:
". opponent-side-board ."
"rank board player-info"
". file ."
". player-side-board .";
grid-template-rows: auto 1fr auto auto;
gap: 1rem;
". opponent-side-board"
". opponent-info"
"rank board"
". file"
". player-info"
". player-side-board";
grid-template-rows: repeat(2, auto) 1fr repeat(3, auto);
gap: 0.25rem;
}
.side-board {
min-height: 2rem;
}
.player-info {
text-align: center;
}
}