danbarber/chess
1
0
Fork 0
mirror of https://github.com/danbee/chess synced 2025-03-04 08:39:06 +00:00
Code Issues Releases Wiki Activity

Improve layout

Browse Source
This commit is contained in:
Daniel Barber 2018-05-12 18:35:03 -04:00
parent fff2c342ff
commit c0dc3f44eb
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/css/_game_grid.scss
View File

@ -3,7 +3,7 @@
grid-gap: $base-spacing;
}
@media (min-aspect-ratio: 10/11) {
@media (min-aspect-ratio: 9/11) {
.game-grid {
grid-template-areas:
"board game-info"
@ -11,9 +11,13 @@
grid-template-columns: min-content 1fr;
grid-template-rows: min-content 1fr;
}
.container {
max-width: 120vmin;
}
}
@media (max-aspect-ratio: 10/11) {
@media (max-aspect-ratio: 9/11) {
.game-grid {
grid-template-areas:
"game-info"
@ -22,3 +26,15 @@
grid-template-rows: min-content min-content min-content;
}
}
@media (max-height: 960px), (max-width: 768px) {
html {
font-size: 0.9em;
}
}
@media (max-height: 480px), (max-width: 400px) {
html {
font-size: 0.8em;
}
}

9
assets/css/_variables.scss
View File

@ -30,12 +30,17 @@ $colours: "black" "white";
$pieces: king queen bishop knight rook pawn;
:root {
--board-size: 90vmin;
--board-size: 64vw;
}
@media (min-aspect-ratio: 10/11) {
@media (min-aspect-ratio: 14/11) {
:root {
--board-size: 80vmin;
}
}
@media (max-aspect-ratio: 9/11) {
:root {
--board-size: 90vmin;
}
}