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 flexbox to render the board

Browse Source 
Also minor refactor on the CSS
This commit is contained in:
Daniel Barber 2018-02-23 14:28:21 -05:00
parent e76d5a9fce
commit 9681d80183
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
4 changed files with 113 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
assets/css/_board.scss Normal file
View File

@ -0,0 +1,71 @@
.board {
display: flex;
flex-direction: column;
font-size: 0;
border: 0.3vmin solid black;
margin: 0 auto;
width: 80vmin;
height: 80vmin;
}
.board-rank {
height: 12.5%;
}
.board-square {
position: relative;
border: 0.2vmin solid $square-outline-color;
display: inline-block;
font-size: $base-font-size;
width: 12.5%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
@each $colour in $colours {
@each $piece in $pieces {
&.#{$colour}.#{$piece} {
background-image: url(/images/#{$piece}_#{$colour}.svg);
}
}
}
}
%black-square {
background-color: $black-square-color;
&.selected {
background-color: mix($black-square-color, $selected-square-color, 60%);
border: 0.2vmin solid $selected-outline-color;
}
}
%white-square {
background-color: $white-square-color;
&.selected {
background-color: mix($white-square-color, $selected-square-color, 60%);
border: 0.2vmin solid $selected-outline-color;
}
}
.board-rank:nth-child(odd) {
.board-square:nth-child(even) {
@extend %black-square;
}
.board-square:nth-child(odd) {
@extend %white-square;
}
}
.board-rank:nth-child(even) {
.board-square:nth-child(even) {
@extend %white-square;
}
.board-square:nth-child(odd) {
@extend %black-square;
}
}

26
assets/css/_layout.scss Normal file
View File

@ -0,0 +1,26 @@
body {
background: $background-color;
color: mix($background-color, $foreground-color, 20%);
}
a {
color: mix($background-color, $link-color, 30%);
}
h1, h2, h3, h4 {
font-variant: small-caps;
font-weight: 300;
}
h1 {
font-size: 2em;
}
.container {
width: 80%;
margin: 0 auto;
}
.form-group {
margin-top: 2em;
}

14
assets/css/_variables.scss
View File

@ -2,3 +2,17 @@ $background-color: #1e3f51;
$foreground-color: white;
$link-color: #ffdd00;
$board-square-size: 9vmin;
$base-font-size: 16px;
$black-square-color: #777;
$white-square-color: #bbb;
$selected-square-color: #66ff00;
$square-outline-color: darken($black-square-color, 20%);
$selected-outline-color: lighten($selected-square-color, 20%);
$colours: "black" "white";
$pieces: king queen bishop knight rook pawn;

106
assets/css/app.scss
View File

@ -3,107 +3,5 @@
@import "variables";
body {
background: $background-color;
color: mix($background-color, $foreground-color, 20%);
}
a {
color: mix($background-color, $link-color, 30%);
}
h1, h2, h3, h4 {
font-variant: small-caps;
font-weight: 300;
}
h1 {
font-size: 2em;
}
.container {
width: 80%;
margin: 0 auto;
}
$board-square-size: 9vmin;
$base-font-size: 16px;
$black-square-color: #777;
$white-square-color: #bbb;
$selected-square-color: #66ff00;
$square-outline-color: darken($black-square-color, 20%);
$selected-outline-color: lighten($selected-square-color, 20%);
$colours: "black" "white";
$pieces: king queen bishop knight rook pawn;
.board {
display: inline-block;
font-size: 0;
border: 0.3vmin solid black;
margin: 0 auto;
}
.board-square {
position: relative;
border: 0.2vmin solid $square-outline-color;
display: inline-block;
font-size: $base-font-size;
width: $board-square-size;
height: $board-square-size;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
@each $colour in $colours {
@each $piece in $pieces {
&.#{$colour}.#{$piece} {
background-image: url(/images/#{$piece}_#{$colour}.svg);
}
}
}
}
%black-square {
background-color: $black-square-color;
&.selected {
background-color: mix($black-square-color, $selected-square-color, 60%);
border: 0.2vmin solid $selected-outline-color;
}
}
%white-square {
background-color: $white-square-color;
&.selected {
background-color: mix($white-square-color, $selected-square-color, 60%);
border: 0.2vmin solid $selected-outline-color;
}
}
.board-rank:nth-child(odd) {
.board-square:nth-child(even) {
@extend %black-square;
}
.board-square:nth-child(odd) {
@extend %white-square;
}
}
.board-rank:nth-child(even) {
.board-square:nth-child(even) {
@extend %white-square;
}
.board-square:nth-child(odd) {
@extend %black-square;
}
}
.form-group {
margin-top: 2em;
}
@import "layout";
@import "board";