1
0
mirror of https://github.com/danbee/chess synced 2025-03-04 08:39:06 +00:00

Size board based on width *and* height of viewport

This commit is contained in:
Daniel Barber 2016-12-10 14:02:32 +00:00
parent eb6537cfe9
commit 86d43e9d34

View File

@ -21,7 +21,7 @@ h1, h2, h3, h4 {
margin: 0 auto;
}
$board-square-size: 8vw;
$board-square-size: 9vmin;
$base-font-size: 16px;
$black-square-color: #824c34;
@ -38,13 +38,13 @@ $pieces: king queen bishop knight rook pawn;
.board {
display: inline-block;
font-size: 0;
border: 0.3vw solid black;
border: 0.3vmin solid black;
margin: 0 auto;
}
.board-square {
position: relative;
border: 0.2vw solid $square-outline-color;
border: 0.2vmin solid $square-outline-color;
display: inline-block;
font-size: $base-font-size;
width: $board-square-size;
@ -68,7 +68,7 @@ $pieces: king queen bishop knight rook pawn;
&.selected {
background-color: mix($black-square-color, $selected-square-color, 60%);
border: 0.2vw solid $selected-outline-color;
border: 0.2vmin solid $selected-outline-color;
}
}
@ -77,7 +77,7 @@ $pieces: king queen bishop knight rook pawn;
&.selected {
background-color: mix($white-square-color, $selected-square-color, 60%);
border: 0.2vw solid $selected-outline-color;
border: 0.2vmin solid $selected-outline-color;
}
}