From 9681d801830eb495c914ec82ff65d83dc6781408 Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Fri, 23 Feb 2018 14:28:21 -0500
Subject: [PATCH] Use flexbox to render the board

Also minor refactor on the CSS
---
 assets/css/_board.scss     |  71 +++++++++++++++++++++++++
 assets/css/_layout.scss    |  26 +++++++++
 assets/css/_variables.scss |  14 +++++
 assets/css/app.scss        | 106 +------------------------------------
 4 files changed, 113 insertions(+), 104 deletions(-)
 create mode 100644 assets/css/_board.scss
 create mode 100644 assets/css/_layout.scss

diff --git a/assets/css/_board.scss b/assets/css/_board.scss
new file mode 100644
index 0000000..f317c42
--- /dev/null
+++ b/assets/css/_board.scss
@@ -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;
+  }
+}
diff --git a/assets/css/_layout.scss b/assets/css/_layout.scss
new file mode 100644
index 0000000..1506e7f
--- /dev/null
+++ b/assets/css/_layout.scss
@@ -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;
+}
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index d881380..fb66213 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -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;
diff --git a/assets/css/app.scss b/assets/css/app.scss
index 1dbdd8d..9162824 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -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";