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

Use CSS vars and media queries to resize board

Browse Source 
This should mostly keep the board entirely within the viewport.
This commit is contained in:
Daniel Barber 2018-04-06 13:23:49 -04:00
parent 2e319f762a
commit 35d1f33f76
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
assets/css/_board.scss
View File

@ -1,4 +1,12 @@
$board-size: 90vmin; :root {
--board-size: 90vmin;
}
@media (min-aspect-ratio: 10/11) {
:root {
--board-size: 80vmin;
}
}
@mixin move-indicator { @mixin move-indicator {
border-radius: 50%; border-radius: 50%;
@ -15,12 +23,12 @@ $board-size: 90vmin;
border-collapse: unset; border-collapse: unset;
border-radius: 2.8%; border-radius: 2.8%;
border-spacing: 1px; border-spacing: 1px;
box-shadow: 0 ($board-size / 200) ($board-size / 40) $board-shadow-color; box-shadow: 0 (var(--board-size) / 200) (var(--board-size) / 40) $board-shadow-color;
color: $white-square-color; color: $white-square-color;
height: $board-size; height: var(--board-size);
padding: $board-size / 20; padding: calc(var(--board-size) / 20);
position: relative; position: relative;
width: $board-size; width: var(--board-size);
&.white-to-move::before { &.white-to-move::before {
@include move-indicator; @include move-indicator;
@ -83,7 +91,7 @@ $board-size: 90vmin;
align-items: center; align-items: center;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
font-size: $board-size / 40; font-size: calc(var(--board-size) / 40);
justify-content: center; justify-content: center;
} }
@ -101,12 +109,12 @@ $board-size: 90vmin;
&.selected { &.selected {
background-color: mix($black-square-color, $selected-square-color, 60%); background-color: mix($black-square-color, $selected-square-color, 60%);
box-shadow: inset 0 0 0 ($board-size / 400) $selected-outline-color; box-shadow: inset 0 0 0 (var(--board-size) / 400) $selected-outline-color;
} }
&.available { &.available {
background-color: mix($black-square-color, $available-square-color, 80%); background-color: mix($black-square-color, $available-square-color, 80%);
box-shadow: inset 0 0 0 ($board-size / 400) $available-outline-color; box-shadow: inset 0 0 0 (var(--board-size) / 400) $available-outline-color;
} }
} }
@ -115,12 +123,12 @@ $board-size: 90vmin;
&.selected { &.selected {
background-color: mix($white-square-color, $selected-square-color, 60%); background-color: mix($white-square-color, $selected-square-color, 60%);
box-shadow: inset 0 0 0 ($board-size / 400) $selected-outline-color; box-shadow: inset 0 0 0 (var(--board-size) / 400) $selected-outline-color;
} }
&.available { &.available {
background-color: mix($white-square-color, $available-square-color, 80%); background-color: mix($white-square-color, $available-square-color, 80%);
box-shadow: inset 0 0 0 ($board-size / 400) $available-outline-color; box-shadow: inset 0 0 0 (var(--board-size) / 400) $available-outline-color;
} }
} }