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

Size board based on width *and* height of viewport

Browse Source
This commit is contained in:
Daniel Barber 2016-12-10 14:02:32 +00:00
parent eb6537cfe9
commit 86d43e9d34
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/static/css/app.scss
View File

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