chess/assets/css/app.scss

@import "bourbon/bourbon";
@import "base/base";

@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: #824c34;
$white-square-color: #d0bfa1;

$selected-square-color: #0099ff;

$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;
}