From bedd6605ef869bf8a04cabbc5f80cad300d30c2a Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Sun, 26 Aug 2018 22:25:56 -0400
Subject: [PATCH] Redesign whole site in B&W
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Forms and board tweaks for small screen sizes
* Re-style game status indicators
* Re-style viewing/offline indicator
* Better eyecons 👁
* Re-organise CSS according to ITCSS principles
* Pick new font from Google Fonts
* Fix up tests
* Move some things into partials
---
 assets/css/_board.scss                        | 222 ------------------
 assets/css/_forms.scss                        |   8 -
 assets/css/_game_info.scss                    |  29 ---
 assets/css/_game_list.scss                    |  11 -
 assets/css/_headings.scss                     |  18 --
 assets/css/_layout.scss                       |  22 --
 assets/css/_nav.scss                          |  27 ---
 assets/css/_variables.scss                    |  51 ----
 assets/css/app.scss                           |  64 +++--
 assets/css/base/_base.scss                    |  14 --
 assets/css/base/_media.scss                   |   9 -
 assets/css/base/_typography.scss              |  45 ----
 assets/css/base/_variables.scss               |  41 ----
 assets/css/components/_board.scss             | 139 +++++++++++
 .../_game-grid.scss}                          |  12 -
 assets/css/components/_game-info.scss         |   8 +
 assets/css/components/_game-list.scss         |  11 +
 assets/css/components/_game-state.scss        |  31 +++
 .../_move-list.scss}                          |   2 +-
 assets/css/components/_nav.scss               |  38 +++
 assets/css/components/_square.scss            | 178 ++++++++++++++
 assets/css/{base => elements}/_buttons.scss   |  15 +-
 assets/css/{base => elements}/_forms.scss     |  36 +--
 assets/css/elements/_headings.scss            |  24 ++
 assets/css/elements/_links.scss               |   3 +
 assets/css/{base => elements}/_lists.scss     |   2 +-
 assets/css/elements/_main.scss                |   3 +
 assets/css/elements/_paragraphs.scss          |   3 +
 assets/css/{base => elements}/_tables.scss    |   3 +-
 assets/css/{base => generic}/_layout.scss     |  12 +-
 assets/css/generic/_typography.scss           |  18 ++
 assets/css/objects/_container.scss            |   4 +
 assets/css/objects/_form-group.scss           |   3 +
 assets/css/objects/_form.scss                 |  15 ++
 assets/css/{ => objects}/_tables.scss         |   2 +-
 assets/css/settings/_board.scss               |  17 ++
 assets/css/settings/_chess.scss               |   2 +
 assets/css/settings/_colors.scss              |  18 ++
 assets/css/settings/_forms.scss               |   1 +
 assets/css/settings/_global.scss              |  16 ++
 assets/css/settings/_typography.scss          |  19 ++
 assets/css/utilities/_text-right.scss         |   3 +
 .../_visually-hidden.scss}                    |   0
 assets/css/{ => vendor}/bourbon/_bourbon.scss |   0
 .../bourbon/helpers/_buttons-list.scss        |   0
 .../bourbon/bourbon/helpers/_scales.scss      |   0
 .../bourbon/helpers/_text-inputs-list.scss    |   0
 .../bourbon/library/_border-color.scss        |   0
 .../bourbon/library/_border-radius.scss       |   0
 .../bourbon/library/_border-style.scss        |   0
 .../bourbon/library/_border-width.scss        |   0
 .../bourbon/bourbon/library/_buttons.scss     |   0
 .../bourbon/bourbon/library/_clearfix.scss    |   0
 .../bourbon/library/_contrast-switch.scss     |   0
 .../bourbon/bourbon/library/_ellipsis.scss    |   0
 .../bourbon/bourbon/library/_font-face.scss   |   0
 .../bourbon/bourbon/library/_font-stacks.scss |   0
 .../bourbon/bourbon/library/_hide-text.scss   |   0
 .../bourbon/library/_hide-visually.scss       |   0
 .../bourbon/bourbon/library/_margin.scss      |   0
 .../bourbon/library/_modular-scale.scss       |   0
 .../bourbon/library/_overflow-wrap.scss       |   0
 .../bourbon/bourbon/library/_padding.scss     |   0
 .../bourbon/bourbon/library/_position.scss    |   0
 .../bourbon/bourbon/library/_prefixer.scss    |   0
 .../bourbon/bourbon/library/_shade.scss       |   0
 .../bourbon/bourbon/library/_size.scss        |   0
 .../bourbon/bourbon/library/_strip-unit.scss  |   0
 .../bourbon/bourbon/library/_text-inputs.scss |   0
 .../bourbon/library/_timing-functions.scss    |   0
 .../bourbon/bourbon/library/_tint.scss        |   0
 .../bourbon/bourbon/library/_triangle.scss    |   0
 .../bourbon/library/_value-prefixer.scss      |   0
 .../bourbon/bourbon/settings/_settings.scss   |   0
 .../bourbon/utilities/_assign-inputs.scss     |   0
 .../bourbon/utilities/_compact-shorthand.scss |   0
 .../bourbon/utilities/_contrast-ratio.scss    |   0
 .../utilities/_directional-property.scss      |   0
 .../utilities/_fetch-bourbon-setting.scss     |   0
 .../utilities/_font-source-declaration.scss   |   0
 .../bourbon/bourbon/utilities/_gamma.scss     |   0
 .../bourbon/bourbon/utilities/_lightness.scss |   0
 .../bourbon/utilities/_unpack-shorthand.scss  |   0
 .../bourbon/validators/_contains-falsy.scss   |   0
 .../bourbon/bourbon/validators/_contains.scss |   0
 .../bourbon/bourbon/validators/_is-color.scss |   0
 .../bourbon/validators/_is-length.scss        |   0
 .../bourbon/validators/_is-number.scss        |   0
 .../bourbon/bourbon/validators/_is-size.scss  |   0
 assets/js/components/chess-board-square.js    |  14 +-
 assets/js/components/chess-board.js           |   8 +-
 assets/js/components/file-labels.js           |   4 +-
 assets/js/components/game-info.js             |  28 ++-
 assets/js/components/game-state.js            |   2 +-
 assets/js/components/move-list.js             |   2 -
 assets/js/components/rank-labels.js           |   4 +-
 assets/static/images/eye-closed.svg           |   1 +
 assets/static/images/eye-open.svg             |   1 +
 lib/chess_web/templates/game/index.html.eex   |   7 +-
 .../templates/layout/_alerts.html.eex         |   8 +
 lib/chess_web/templates/layout/_head.html.eex |  11 +
 .../templates/layout/_header.html.eex         |  22 ++
 .../templates/layout/_scripts.html.eex        |   3 +
 lib/chess_web/templates/layout/app.html.eex   |  46 +---
 lib/chess_web/views/game_view.ex              |   2 +-
 test/features/games_test.exs                  |   4 +-
 test/features/moves_test.exs                  |  26 +-
 test/features/registration_test.exs           |   8 +-
 test/features/session_test.exs                |   8 +-
 109 files changed, 748 insertions(+), 660 deletions(-)
 delete mode 100644 assets/css/_board.scss
 delete mode 100644 assets/css/_forms.scss
 delete mode 100644 assets/css/_game_info.scss
 delete mode 100644 assets/css/_game_list.scss
 delete mode 100644 assets/css/_headings.scss
 delete mode 100644 assets/css/_layout.scss
 delete mode 100644 assets/css/_nav.scss
 delete mode 100644 assets/css/_variables.scss
 delete mode 100644 assets/css/base/_base.scss
 delete mode 100644 assets/css/base/_media.scss
 delete mode 100644 assets/css/base/_typography.scss
 delete mode 100644 assets/css/base/_variables.scss
 create mode 100644 assets/css/components/_board.scss
 rename assets/css/{_game_grid.scss => components/_game-grid.scss} (74%)
 create mode 100644 assets/css/components/_game-info.scss
 create mode 100644 assets/css/components/_game-list.scss
 create mode 100644 assets/css/components/_game-state.scss
 rename assets/css/{_move_list.scss => components/_move-list.scss} (83%)
 create mode 100644 assets/css/components/_nav.scss
 create mode 100644 assets/css/components/_square.scss
 rename assets/css/{base => elements}/_buttons.scss (72%)
 rename assets/css/{base => elements}/_forms.scss (57%)
 create mode 100644 assets/css/elements/_headings.scss
 create mode 100644 assets/css/elements/_links.scss
 rename assets/css/{base => elements}/_lists.scss (78%)
 create mode 100644 assets/css/elements/_main.scss
 create mode 100644 assets/css/elements/_paragraphs.scss
 rename assets/css/{base => elements}/_tables.scss (89%)
 rename assets/css/{base => generic}/_layout.scss (59%)
 create mode 100644 assets/css/generic/_typography.scss
 create mode 100644 assets/css/objects/_container.scss
 create mode 100644 assets/css/objects/_form-group.scss
 create mode 100644 assets/css/objects/_form.scss
 rename assets/css/{ => objects}/_tables.scss (77%)
 create mode 100644 assets/css/settings/_board.scss
 create mode 100644 assets/css/settings/_chess.scss
 create mode 100644 assets/css/settings/_colors.scss
 create mode 100644 assets/css/settings/_forms.scss
 create mode 100644 assets/css/settings/_global.scss
 create mode 100644 assets/css/settings/_typography.scss
 create mode 100644 assets/css/utilities/_text-right.scss
 rename assets/css/{_utilities.scss => utilities/_visually-hidden.scss} (100%)
 rename assets/css/{ => vendor}/bourbon/_bourbon.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/helpers/_buttons-list.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/helpers/_scales.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/helpers/_text-inputs-list.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_border-color.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_border-radius.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_border-style.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_border-width.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_buttons.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_clearfix.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_contrast-switch.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_ellipsis.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_font-face.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_font-stacks.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_hide-text.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_hide-visually.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_margin.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_modular-scale.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_overflow-wrap.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_padding.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_position.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_prefixer.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_shade.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_size.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_strip-unit.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_text-inputs.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_timing-functions.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_tint.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_triangle.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/library/_value-prefixer.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/settings/_settings.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/utilities/_assign-inputs.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/utilities/_compact-shorthand.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/utilities/_contrast-ratio.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/utilities/_directional-property.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/utilities/_fetch-bourbon-setting.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/utilities/_font-source-declaration.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/utilities/_gamma.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/utilities/_lightness.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/utilities/_unpack-shorthand.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/validators/_contains-falsy.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/validators/_contains.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/validators/_is-color.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/validators/_is-length.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/validators/_is-number.scss (100%)
 rename assets/css/{ => vendor}/bourbon/bourbon/validators/_is-size.scss (100%)
 create mode 100644 assets/static/images/eye-closed.svg
 create mode 100644 assets/static/images/eye-open.svg
 create mode 100644 lib/chess_web/templates/layout/_alerts.html.eex
 create mode 100644 lib/chess_web/templates/layout/_head.html.eex
 create mode 100644 lib/chess_web/templates/layout/_header.html.eex
 create mode 100644 lib/chess_web/templates/layout/_scripts.html.eex

diff --git a/assets/css/_board.scss b/assets/css/_board.scss
deleted file mode 100644
index e5474cc..0000000
--- a/assets/css/_board.scss
+++ /dev/null
@@ -1,222 +0,0 @@
-@mixin move-indicator {
-  border-radius: 50%;
-  content: "";
-  display: block;
-  height: 2%;
-  position: absolute;
-  right: 2%;
-  width: 2%;
-}
-
-.board {
-  background: lighten($black-square-color, 7%);
-  border-collapse: unset;
-  border-radius: 2.8%;
-  border-spacing: 1px;
-  box-shadow: 0 calc(var(--board-size) / 200) calc(var(--board-size) / 40) $board-shadow-color;
-  color: $white-square-color;
-  grid-area: board;
-  height: var(--board-size);
-  padding: calc(var(--board-size) / 20);
-  position: relative;
-  width: var(--board-size);
-
-  &.white-to-move::before {
-    @include move-indicator;
-    background: $white;
-  }
-
-  &.black-to-move::before {
-    @include move-indicator;
-    background: $black;
-  }
-
-  &.player-is-white.white-to-move::before,
-  &.player-is-black.black-to-move::before {
-    bottom: 2%;
-  }
-
-  &.player-is-white.black-to-move::before,
-  &.player-is-black.white-to-move::before {
-    top: 2%;
-  }
-
-  .board-rank-labels,
-  .board-file-labels {
-    display: none;
-  }
-
-  &.player-is-white {
-    .board-rank-labels {
-      display: flex;
-      flex-direction: column-reverse;
-    }
-
-    .board-file-labels {
-      display: flex;
-      flex-direction: row;
-    }
-  }
-
-  &.player-is-black {
-    .board-rank-labels {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .board-file-labels {
-      display: flex;
-      flex-direction: row-reverse;
-    }
-  }
-}
-
-.board-rank-labels {
-  display: flex;
-  height: 90%;
-  left: 0;
-  position: absolute;
-  width: 5%;
-}
-
-.board-file-labels {
-  display: flex;
-  height: 5%;
-  position: absolute;
-  top: 0;
-  width: 90%;
-}
-
-.board-game-state {
-  align-items: center;
-  background-color: $game-state-background-color;
-  border-radius: calc(var(--board-size) / 75);
-  bottom: -2.5%;
-  box-shadow: 0 calc(var(--board-size) / 200) calc(var(--board-size) / 40) $board-shadow-color, inset 0 0 0 calc(var(--board-size) / 300) $white-square-color;
-  color: $foreground-color;
-  display: none;
-  font-size: calc(var(--board-size) / 40);
-  height: 6%;
-  justify-content: center;
-  position: absolute;
-  right: 5%;
-  width: 15%;
-
-  &.check,
-  &.checkmate,
-  &.stalemate {
-    display: block; // So PhantomJS will display it.
-    display: flex;
-  }
-
-  &.checkmate,
-  &.stalemate {
-    font-size: calc(var(--board-size) / 30);
-    height: 7.5%;
-    left: calc(50% - 15%);
-    top: calc(50% - 3.5%);
-    width: 30%;
-  }
-}
-
-.board-label {
-  align-items: center;
-  display: flex;
-  flex-grow: 1;
-  justify-content: center;
-}
-
-.board-body {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  grid-template-rows: repeat(8, 1fr);
-
-  height: 100%;
-  width: 100%;
-}
-
-%black-square {
-  background-color: $black-square-color;
-
-  &.selected {
-    background-color: mix($black-square-color, $selected-square-color, 60%);
-    box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $selected-outline-color;
-  }
-
-  &.available {
-    background-color: mix($black-square-color, $available-square-color, 80%);
-    box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $available-outline-color;
-  }
-}
-
-%white-square {
-  background-color: $white-square-color;
-
-  &.selected {
-    background-color: mix($white-square-color, $selected-square-color, 60%);
-    box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $selected-outline-color;
-  }
-
-  &.available {
-    background-color: mix($white-square-color, $available-square-color, 80%);
-    box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $available-outline-color;
-  }
-}
-
-.board-square {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100%;
-  border-radius: 2%;
-  margin: 0.5px;
-
-  // This is to ensure the squares can be clicked on in PhantomJS
-  // TODO: Figure out why we need this
-
-  min-height: 20px;
-  min-width: 20px;
-
-  @include odd-between(1, 8) { @extend %white-square; }
-  @include even-between(1, 8) { @extend %black-square; }
-
-  @include odd-between(9, 16) { @extend %black-square; }
-  @include even-between(9, 16) { @extend %white-square; }
-
-  @include odd-between(17, 24) { @extend %white-square; }
-  @include even-between(17, 24) { @extend %black-square; }
-
-  @include odd-between(25, 32) { @extend %black-square; }
-  @include even-between(25, 32) { @extend %white-square; }
-
-  @include odd-between(33, 40) { @extend %white-square; }
-  @include even-between(33, 40) { @extend %black-square; }
-
-  @include odd-between(41, 48) { @extend %black-square; }
-  @include even-between(41, 48) { @extend %white-square; }
-
-  @include odd-between(49, 56) { @extend %white-square; }
-  @include even-between(49, 56) { @extend %black-square; }
-
-  @include odd-between(57, 64) { @extend %black-square; }
-  @include even-between(57, 64) { @extend %white-square; }
-
-  @each $colour in $colours {
-    @each $piece in $pieces {
-      &.#{$colour}.#{$piece} {
-        background-image: url(/images/#{$piece}_#{$colour}.svg);
-      }
-    }
-  }
-}
-
-@media (min-width: 480px) {
-  .board-body {
-    grid-gap: 1px;
-  }
-}
-
-@media (min-width: 768px) {
-  .board-body {
-    grid-gap: 2px;
-  }
-}
diff --git a/assets/css/_forms.scss b/assets/css/_forms.scss
deleted file mode 100644
index 74b4bfe..0000000
--- a/assets/css/_forms.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.form {
-  background-color: $form-background-color;
-  border-radius: $base-border-radius;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  margin: 0 auto;
-  max-width: 40rem;
-  padding: $base-spacing;
-}
diff --git a/assets/css/_game_info.scss b/assets/css/_game_info.scss
deleted file mode 100644
index 2996350..0000000
--- a/assets/css/_game_info.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.game-info {
-  grid-area: game-info;
-
-  .offline,
-  .viewing {
-    &::before {
-      border-radius: 50%;
-      content: "";
-      display: inline-block;
-      height: 0.75rem;
-      margin-right: 0.25rem;
-      width: 0.75rem;
-    }
-  }
-
-  .offline {
-    opacity: 0.4;
-
-    &::before {
-      background-color: $offline-opponent-color;
-    }
-  }
-
-  .viewing {
-    &::before {
-      background-color: $viewing-opponent-color;
-    }
-  }
-}
diff --git a/assets/css/_game_list.scss b/assets/css/_game_list.scss
deleted file mode 100644
index cae4e98..0000000
--- a/assets/css/_game_list.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.player-indicator {
-  img {
-    height: 1.5em;
-    vertical-align: middle;
-  }
-}
-
-.your-turn {
-  background-color: $your-turn-background-color;
-  font-weight: bold;
-}
diff --git a/assets/css/_headings.scss b/assets/css/_headings.scss
deleted file mode 100644
index 2c9a424..0000000
--- a/assets/css/_headings.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-h1,
-h2,
-h3,
-h4 {
-  font-weight: 300;
-}
-
-h1 {
-  font-size: 1.6em;
-  margin: 0;
-}
-
-.heading {
-  font-family: $heading-font-family;
-  font-size: modular-scale(1);
-  line-height: $heading-line-height;
-  margin: 0 0 $small-spacing;
-}
diff --git a/assets/css/_layout.scss b/assets/css/_layout.scss
deleted file mode 100644
index d0356fc..0000000
--- a/assets/css/_layout.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-html {
-  background: $background-color;
-  color: mix($background-color, $foreground-color, 20%);
-  font-weight: 300;
-}
-
-a {
-  color: mix($background-color, $link-color, 30%);
-}
-
-main {
-  margin-top: 5vmin;
-}
-
-.container {
-  margin: 0 auto;
-  width: 90%;
-}
-
-.form-group {
-  margin-top: 2em;
-}
diff --git a/assets/css/_nav.scss b/assets/css/_nav.scss
deleted file mode 100644
index 5bd1b1e..0000000
--- a/assets/css/_nav.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-[role='banner'] {
-  background: $black;
-  margin-bottom: 1em;
-  padding: 0.5em 0;
-
-  .container {
-    display: flex;
-  }
-
-  h1 {
-    flex: 0;
-  }
-
-  a {
-    color: $white;
-    text-decoration: none;
-
-    &:hover {
-      color: $link-color;
-    }
-  }
-
-  .user-nav {
-    flex: 1;
-    text-align: right;
-  }
-}
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
deleted file mode 100644
index d03eabb..0000000
--- a/assets/css/_variables.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-$black: #000;
-$white: #fff;
-
-$background-color: #1e3f51;
-$foreground-color: $white;
-
-$link-color: #fd0;
-
-$form-background-color: darken($background-color, 4%);
-
-$board-border-color: #000;
-$board-shadow-color: rgba(0, 0, 0, 0.4);
-
-$board-square-size: 9vmin;
-$base-font-size: 16px;
-
-$black-square-color: #777;
-$white-square-color: #bbb;
-
-$selected-square-color: #0cf;
-$available-square-color: #6f0;
-
-$your-turn-background-color: rgba($white, 0.1);
-
-$game-state-background-color: rgba(darken($black-square-color, 10%), 0.9);
-
-$offline-opponent-color: #c33;
-$viewing-opponent-color: #6c3;
-
-$square-outline-color: darken($black-square-color, 20%);
-$selected-outline-color: lighten($selected-square-color, 20%);
-$available-outline-color: rgba(lighten($available-square-color, 20%), 0.5);
-
-$colours: "black" "white";
-$pieces: king queen bishop knight rook pawn;
-
-:root {
-  --board-size: 64vw;
-}
-
-@media (min-aspect-ratio: 14/11) {
-  :root {
-    --board-size: 80vmin;
-  }
-}
-
-@media (max-aspect-ratio: 9/11) {
-  :root {
-    --board-size: 90vmin;
-  }
-}
diff --git a/assets/css/app.scss b/assets/css/app.scss
index f081355..31dd18d 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -1,20 +1,56 @@
-@import "bourbon/bourbon";
+// 0. Vendor - Imported from other source
+@import "vendor/bourbon/bourbon";
 @import "vendor/family";
-@import "base/base";
 
-@import "variables";
+// 1. Settings – used with preprocessors and contain font,
+//    colors definitions, etc.
+@import "settings/colors";
+@import "settings/typography";
+@import "settings/forms";
+@import "settings/global";
+@import "settings/chess";
+@import "settings/board";
 
-@import "utilities";
+// 2. Tools – globally used mixins and functions.
+//    It’s important not to output any CSS in the first 2 layers.
 
-@import "tables";
-@import "headings";
-@import "forms";
+// 3. Generic – reset and/or normalize styles, box-sizing definition, etc.
+//    This is the first layer which generates actual CSS.
+@import "generic/typography";
+@import "generic/layout";
 
-@import "layout";
-@import "nav";
+// 4. Elements – styling for bare HTML elements (like H1, A, etc.).
+//    These come with default styling from the browser so we can redefine
+//    them here.
+@import "elements/main";
+@import "elements/headings";
+@import "elements/paragraphs";
+@import "elements/links";
+@import "elements/lists";
+@import "elements/tables";
+@import "elements/forms";
+@import "elements/buttons";
 
-@import "game_list";
-@import "board";
-@import "move_list";
-@import "game_info";
-@import "game_grid";
+// 5. Objects – class-based selectors which define undecorated design patterns,
+//    for example media object known from OOCSS
+@import "objects/container";
+@import "objects/form";
+@import "objects/form-group";
+@import "objects/tables";
+
+// 6. Components – specific UI components.
+//    This is where majority of our work takes place and our UI components
+//    are often composed of Objects and Components
+@import "components/nav";
+@import "components/board";
+@import "components/square";
+@import "components/game-list";
+@import "components/game-grid";
+@import "components/game-info";
+@import "components/move-list";
+@import "components/game-state";
+
+// 7. Utilities – utilities and helper classes with ability to override
+//    anything which goes before in the triangle, eg. hide helper class
+@import "utilities/visually-hidden";
+@import "utilities/text-right";
diff --git a/assets/css/base/_base.scss b/assets/css/base/_base.scss
deleted file mode 100644
index e20da52..0000000
--- a/assets/css/base/_base.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// Bitters 1.8.0
-// http://bitters.bourbon.io
-// Copyright 2013-2017 thoughtbot, inc.
-// MIT License
-
-@import "variables";
-
-@import "buttons";
-@import "forms";
-@import "layout";
-@import "lists";
-@import "media";
-@import "tables";
-@import "typography";
diff --git a/assets/css/base/_media.scss b/assets/css/base/_media.scss
deleted file mode 100644
index dfa22ea..0000000
--- a/assets/css/base/_media.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-figure {
-  margin: 0;
-}
-
-img,
-picture {
-  margin: 0;
-  max-width: 100%;
-}
diff --git a/assets/css/base/_typography.scss b/assets/css/base/_typography.scss
deleted file mode 100644
index 6521f8f..0000000
--- a/assets/css/base/_typography.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-html {
-  color: $base-font-color;
-  font-family: $base-font-family;
-  font-size: 100%;
-  line-height: $base-line-height;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: $heading-font-family;
-  font-size: modular-scale(1);
-  line-height: $heading-line-height;
-  margin: 0 0 $small-spacing;
-}
-
-p {
-  margin: $small-spacing 0 $small-spacing;
-}
-
-a {
-  color: $action-color;
-  text-decoration-skip: ink;
-  transition: color $base-duration $base-timing;
-
-  &:hover {
-    color: shade($action-color, 25%);
-  }
-
-  &:focus {
-    outline: $focus-outline;
-    outline-offset: $focus-outline-offset;
-  }
-}
-
-hr {
-  border-bottom: $base-border;
-  border-left: 0;
-  border-right: 0;
-  border-top: 0;
-  margin: $base-spacing 0;
-}
diff --git a/assets/css/base/_variables.scss b/assets/css/base/_variables.scss
deleted file mode 100644
index e19b906..0000000
--- a/assets/css/base/_variables.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-// Typography
-$base-font-family: $font-stack-system;
-$heading-font-family: $base-font-family;
-
-// Line height
-$base-line-height: 1.5;
-$heading-line-height: 1.2;
-
-// Other Sizes
-$base-border-radius: 0.5rem;
-$base-spacing: 2em;
-$small-spacing: $base-spacing / 2;
-$x-small-spacing: $small-spacing / 2;
-$base-z-index: 0;
-
-// Colors
-$blue: #1565c0;
-$dark-gray: #333;
-$medium-gray: #999;
-$light-gray: #ddd;
-
-// Font Colors
-$base-font-color: $light-gray;
-$action-color: $light-gray;
-
-// Border
-$base-border-color: $light-gray;
-$base-border: 1px solid $base-border-color;
-
-// Background Colors
-$viewport-background-color: #fff;
-
-// Focus
-$focus-outline-color: transparentize($action-color, 0.4);
-$focus-outline-width: 3px;
-$focus-outline: $focus-outline-width solid $focus-outline-color;
-$focus-outline-offset: 2px;
-
-// Animations
-$base-duration: 150ms;
-$base-timing: ease;
diff --git a/assets/css/components/_board.scss b/assets/css/components/_board.scss
new file mode 100644
index 0000000..b1469c0
--- /dev/null
+++ b/assets/css/components/_board.scss
@@ -0,0 +1,139 @@
+@mixin move-indicator {
+  border-radius: 50%;
+  content: "";
+  display: block;
+  height: 1.5%;
+  position: absolute;
+  right: 3%;
+  width: 1.5%;
+}
+
+.board {
+  background: $background-color;
+  border-collapse: unset;
+  border-radius: 2.8%;
+  border-spacing: 1px;
+  color: $foreground-color;
+  grid-area: board;
+  height: var(--board-size);
+  padding: calc(var(--board-size) / 20);
+  position: relative;
+  width: var(--board-size);
+}
+
+.board--white-to-move,
+.board--black-to-move {
+  &::before {
+    @include move-indicator;
+    background: $foreground-color;
+  }
+}
+
+.board--player-is-white.board--white-to-move,
+.board--player-is-black.board--black-to-move {
+  &::before {
+    bottom: 3%;
+  }
+}
+
+.board--player-is-white.board--black-to-move,
+.board--player-is-black.board--white-to-move {
+  &::before {
+    top: 3%;
+  }
+}
+
+.board__rank-labels,
+.board__file-labels {
+  display: none;
+}
+
+.board--player-is-white {
+  .board__rank-labels {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  .board__file-labels {
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+.board--player-is-black {
+  .board__rank-labels {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .board__file-labels {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+}
+
+.board__body {
+  background: $background-color;
+  border: 0.25rem solid $foreground-color;
+  border-radius: calc(var(--board-size) / 100);
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: repeat(8, 1fr);
+  height: 100%;
+  padding: 1%;
+  width: 100%;
+}
+
+.board__rank-labels {
+  display: flex;
+  height: 90%;
+  left: 0;
+  position: absolute;
+  width: 5%;
+}
+
+.board__file-labels {
+  display: flex;
+  height: 5%;
+  position: absolute;
+  top: 0;
+  width: 90%;
+}
+
+.board__label {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  font-size: calc(0.25rem + (var(--board-size) / 50));
+  justify-content: center;
+}
+
+@media (max-aspect-ratio: 9/11) and (max-width: 640px),
+       (max-aspect-ratio: 9/11) and (max-height: 640px),
+       (min-aspect-ratio: 9/11) and (max-width: 720px),
+       (min-aspect-ratio: 9/11) and (max-height: 720px) {
+  .board__body {
+    border-width: 0.1875rem;
+  }
+}
+
+@media (max-aspect-ratio: 9/11) and (max-width: 480px),
+       (max-aspect-ratio: 9/11) and (max-height: 480px),
+       (min-aspect-ratio: 9/11) and (max-width: 560px),
+       (min-aspect-ratio: 9/11) and (max-height: 560px) {
+  .board__body {
+    border-width: 0.125rem;
+  }
+}
+
+@media (min-width: 480px) {
+  .board__body {
+    grid-gap: 1px;
+  }
+}
+
+@media (min-width: 768px) {
+  .board__body {
+    grid-gap: 2px;
+  }
+}
diff --git a/assets/css/_game_grid.scss b/assets/css/components/_game-grid.scss
similarity index 74%
rename from assets/css/_game_grid.scss
rename to assets/css/components/_game-grid.scss
index 13e65ef..2440c07 100644
--- a/assets/css/_game_grid.scss
+++ b/assets/css/components/_game-grid.scss
@@ -26,15 +26,3 @@
     grid-template-rows: min-content min-content min-content;
   }
 }
-
-@media (max-height: 960px), (max-width: 768px) {
-  html {
-    font-size: 0.9em;
-  }
-}
-
-@media (max-height: 480px), (max-width: 400px) {
-  html {
-    font-size: 0.8em;
-  }
-}
diff --git a/assets/css/components/_game-info.scss b/assets/css/components/_game-info.scss
new file mode 100644
index 0000000..c9a2bce
--- /dev/null
+++ b/assets/css/components/_game-info.scss
@@ -0,0 +1,8 @@
+.game-info {
+  grid-area: game-info;
+}
+
+.game-info__opponent-status {
+  height: 1rem;
+  vertical-align: middle;
+}
diff --git a/assets/css/components/_game-list.scss b/assets/css/components/_game-list.scss
new file mode 100644
index 0000000..4e0f36c
--- /dev/null
+++ b/assets/css/components/_game-list.scss
@@ -0,0 +1,11 @@
+.games-list__player-indicator {
+  img {
+    height: 1.5em;
+    vertical-align: middle;
+  }
+}
+
+.games-list__your-turn {
+  background-color: $background-color;
+  font-weight: $heavy-font-weight;
+}
diff --git a/assets/css/components/_game-state.scss b/assets/css/components/_game-state.scss
new file mode 100644
index 0000000..6725b22
--- /dev/null
+++ b/assets/css/components/_game-state.scss
@@ -0,0 +1,31 @@
+.game-state {
+  align-items: center;
+  background-color: $foreground-color;
+  border-radius: calc(var(--board-size) / 100);
+  bottom: -2.5%;
+  box-shadow: 0 0 0 0.2rem $background-color;
+  color: $background-color;
+  display: none;
+  font-size: calc(var(--board-size) / 40);
+  height: 6%;
+  justify-content: center;
+  left: 5%;
+  position: absolute;
+  width: 15%;
+}
+
+&.game-state--check,
+&.game-state--checkmate,
+&.game-state--stalemate {
+  display: block; // So PhantomJS will display it.
+  display: flex;
+}
+
+&.game-state--checkmate,
+&.game-state--stalemate {
+  font-size: calc(var(--board-size) / 30);
+  height: 7.5%;
+  left: calc(50% - 15%);
+  top: calc(50% - 3.5%);
+  width: 30%;
+}
diff --git a/assets/css/_move_list.scss b/assets/css/components/_move-list.scss
similarity index 83%
rename from assets/css/_move_list.scss
rename to assets/css/components/_move-list.scss
index a1ccc1c..97830f7 100644
--- a/assets/css/_move_list.scss
+++ b/assets/css/components/_move-list.scss
@@ -4,7 +4,7 @@
 }
 
 .move-list__line-number {
-  color: mix($background-color, $foreground-color);
+  color: $foreground-color;
   font-feature-settings: "tnum";
   font-variant-numeric: tabular-nums;
 }
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
new file mode 100644
index 0000000..c070185
--- /dev/null
+++ b/assets/css/components/_nav.scss
@@ -0,0 +1,38 @@
+.header {
+  background: $nav-background-color;
+  color: $nav-foreground-color;
+  margin-bottom: $small-spacing;
+  padding: $x-small-spacing 0;
+
+  .container {
+    align-items: flex-end;
+    display: flex;
+  }
+
+  a {
+    color: $nav-foreground-color;
+    text-decoration: underline dashed;
+
+    &:hover {
+      color: $nav-foreground-color;
+      text-decoration: underline;
+    }
+  }
+}
+
+.header__title {
+  flex: 0;
+
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline dashed;
+    }
+  }
+}
+
+.header__user-nav {
+  flex: 1;
+  text-align: right;
+}
diff --git a/assets/css/components/_square.scss b/assets/css/components/_square.scss
new file mode 100644
index 0000000..95b734a
--- /dev/null
+++ b/assets/css/components/_square.scss
@@ -0,0 +1,178 @@
+%square--black {
+  background: repeating-linear-gradient(
+    45deg,
+    $background-color,
+    $background-color ($diagonal-pixel * 5),
+    $foreground-color ($diagonal-pixel * 5),
+    $foreground-color ($diagonal-pixel * 8)
+  );
+
+  &.square--selected {
+    box-shadow: inset 0 0 0 0.2rem $foreground-color,
+                inset 0 0 0 0.4rem $background-color;
+  }
+
+  &.square--available {
+    &::after {
+      border-radius: 50%;
+      bottom: 20%;
+      box-shadow: 0 0 0 0.2rem $foreground-color,
+                  0 0 0 0.4rem $background-color,
+                  inset 0 0 0 0.2rem $background-color;
+      content: "";
+      display: block;
+      left: 20%;
+      position: absolute;
+      right: 20%;
+      top: 20%;
+    }
+  }
+}
+
+%square--white {
+  background-color: $background-color;
+
+  &.square--selected {
+    box-shadow: inset 0 0 0 0.2rem $foreground-color;
+  }
+
+  &.square--available {
+    &::after {
+      border-radius: 50%;
+      bottom: 20%;
+      box-shadow: 0 0 0 0.2rem $foreground-color,
+                  0 0 0 0.4rem $background-color,
+                  inset 0 0 0 0.2rem $background-color;
+      content: "";
+      display: block;
+      left: 20%;
+      position: absolute;
+      right: 20%;
+      top: 20%;
+    }
+  }
+}
+
+.square {
+  border-radius: 4%;
+  margin: 0.5px;
+  position: relative;
+
+  // This is to ensure the squares can be clicked on in PhantomJS
+  // TODO: Figure out why we need this
+  min-height: 20px;
+  min-width: 20px;
+
+  @include odd-between(1, 8) { @extend %square--white; }
+  @include even-between(1, 8) { @extend %square--black; }
+
+  @include odd-between(9, 16) { @extend %square--black; }
+  @include even-between(9, 16) { @extend %square--white; }
+
+  @include odd-between(17, 24) { @extend %square--white; }
+  @include even-between(17, 24) { @extend %square--black; }
+
+  @include odd-between(25, 32) { @extend %square--black; }
+  @include even-between(25, 32) { @extend %square--white; }
+
+  @include odd-between(33, 40) { @extend %square--white; }
+  @include even-between(33, 40) { @extend %square--black; }
+
+  @include odd-between(41, 48) { @extend %square--black; }
+  @include even-between(41, 48) { @extend %square--white; }
+
+  @include odd-between(49, 56) { @extend %square--white; }
+  @include even-between(49, 56) { @extend %square--black; }
+
+  @include odd-between(57, 64) { @extend %square--black; }
+  @include even-between(57, 64) { @extend %square--white; }
+
+  &::before {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  @each $colour in $colours {
+    @each $piece in $pieces {
+      &.square--#{$colour}.square--#{$piece}::before {
+        background-image: url("/images/#{$piece}_#{$colour}.svg");
+      }
+    }
+  }
+}
+
+@media (max-aspect-ratio: 9/11) and (max-width: 640px),
+       (max-aspect-ratio: 9/11) and (max-height: 640px),
+       (min-aspect-ratio: 9/11) and (max-width: 720px),
+       (min-aspect-ratio: 9/11) and (max-height: 720px) {
+  %square--black {
+    background: repeating-linear-gradient(
+      45deg,
+      $background-color,
+      $background-color ($diagonal-pixel * 3),
+      $foreground-color ($diagonal-pixel * 3),
+      $foreground-color ($diagonal-pixel * 5)
+    );
+
+    &.square--selected {
+      box-shadow: inset 0 0 0 0.15rem $foreground-color,
+                  inset 0 0 0 0.3rem $background-color;
+    }
+
+    &.square--available::after {
+      box-shadow: 0 0 0 0.15rem $foreground-color,
+                  0 0 0 0.3rem $background-color,
+                  inset 0 0 0 0.15rem $background-color;
+    }
+  }
+
+  %square--white {
+    &.square--selected {
+      box-shadow: inset 0 0 0 0.15rem $foreground-color;
+    }
+
+    &.square--available::after {
+      box-shadow: 0 0 0 0.15rem $foreground-color,
+                  0 0 0 0.3rem $background-color,
+                  inset 0 0 0 0.15rem $background-color;
+    }
+  }
+}
+
+@media (max-aspect-ratio: 9/11) and (max-width: 480px),
+       (max-aspect-ratio: 9/11) and (max-height: 480px),
+       (min-aspect-ratio: 9/11) and (max-width: 560px),
+       (min-aspect-ratio: 9/11) and (max-height: 560px) {
+  %square--black {
+    &.square--selected {
+      box-shadow: inset 0 0 0 0.1rem $foreground-color,
+                  inset 0 0 0 0.2rem $background-color;
+    }
+
+    &.square--available::after {
+      box-shadow: 0 0 0 0.1rem $foreground-color,
+                  0 0 0 0.2rem $background-color,
+                  inset 0 0 0 0.1rem $background-color;
+    }
+  }
+
+  %square--white {
+    &.square--selected {
+      box-shadow: inset 0 0 0 0.1rem $foreground-color;
+    }
+
+    &.available::after {
+      box-shadow: 0 0 0 0.1rem $foreground-color,
+                  0 0 0 0.2rem $background-color,
+                  inset 0 0 0 0.1rem $background-color;
+    }
+  }
+}
diff --git a/assets/css/base/_buttons.scss b/assets/css/elements/_buttons.scss
similarity index 72%
rename from assets/css/base/_buttons.scss
rename to assets/css/elements/_buttons.scss
index d576aa6..ee23988 100644
--- a/assets/css/base/_buttons.scss
+++ b/assets/css/elements/_buttons.scss
@@ -1,6 +1,6 @@
-$_button-border-color: $action-color;
-$_button-background-color: rgba(0, 0, 0, 0);
-$_button-background-color-hover: $action-color;
+$_button-border-color: $foreground-color;
+$_button-background-color: $foreground-color;
+$_button-background-color-hover: $background-color;
 
 #{$all-buttons} {
   appearance: none;
@@ -11,9 +11,8 @@ $_button-background-color-hover: $action-color;
   cursor: pointer;
   display: inline-block;
   font-family: $base-font-family;
-  font-size: 16px;
-  -webkit-font-smoothing: antialiased;
-  font-weight: 600;
+  font-size: inherit;
+  font-weight: $base-font-weight;
   line-height: 1;
   padding: $small-spacing $base-spacing;
   text-align: center;
@@ -29,8 +28,8 @@ $_button-background-color-hover: $action-color;
   }
 
   &:focus {
-    outline: $focus-outline;
-    outline-offset: $focus-outline-offset;
+    background-color: $_button-background-color-hover;
+    color: contrast-switch($_button-background-color-hover);
   }
 
   &:disabled {
diff --git a/assets/css/base/_forms.scss b/assets/css/elements/_forms.scss
similarity index 57%
rename from assets/css/base/_forms.scss
rename to assets/css/elements/_forms.scss
index 36c7731..71fdaa6 100644
--- a/assets/css/base/_forms.scss
+++ b/assets/css/elements/_forms.scss
@@ -1,6 +1,4 @@
-$_form-background-color: #fff;
-$_form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
-$_form-box-shadow-focus: $_form-box-shadow, 0 0 5px rgba($action-color, 0.7);
+$_form-background-color: $background-color;
 
 fieldset {
   background-color: transparent;
@@ -10,14 +8,14 @@ fieldset {
 }
 
 legend {
-  font-weight: 600;
+  font-weight: $heavy-font-weight;
   margin-bottom: $small-spacing / 2;
   padding: 0;
 }
 
 label {
   display: block;
-  font-weight: 600;
+  font-weight: $heavy-font-weight;
   margin-bottom: $small-spacing / 2;
 }
 
@@ -26,7 +24,7 @@ select,
 textarea {
   display: block;
   font-family: $base-font-family;
-  font-size: 16px;
+  font-size: inherit;
 }
 
 #{$all-text-inputs} {
@@ -34,35 +32,25 @@ textarea {
   background-color: $_form-background-color;
   border: $base-border;
   border-radius: $base-border-radius;
-  box-shadow: $_form-box-shadow;
   box-sizing: border-box;
+  color: $foreground-color;
   margin-bottom: $small-spacing;
   padding: $base-spacing / 3;
   transition: border-color $base-duration $base-timing;
   width: 100%;
 
-  &:hover {
-    border-color: shade($base-border-color, 20%);
-  }
-
   &:focus {
-    border-color: $action-color;
-    box-shadow: $_form-box-shadow-focus;
+    border: 1px solid $base-border-color;
     outline: none;
   }
 
   &:disabled {
-    background-color: shade($_form-background-color, 5%);
     cursor: not-allowed;
 
     &:hover {
       border: $base-border;
     }
   }
-
-  &::placeholder {
-    color: tint($base-font-color, 40%);
-  }
 }
 
 textarea {
@@ -72,7 +60,7 @@ textarea {
 [type="checkbox"],
 [type="radio"] {
   display: inline;
-  margin-right: $small-spacing / 2;
+  margin-right: $x-small-spacing;
 }
 
 [type="file"] {
@@ -84,13 +72,3 @@ select {
   margin-bottom: $small-spacing;
   width: 100%;
 }
-
-[type="checkbox"],
-[type="radio"],
-[type="file"],
-select {
-  &:focus {
-    outline: $focus-outline;
-    outline-offset: $focus-outline-offset;
-  }
-}
diff --git a/assets/css/elements/_headings.scss b/assets/css/elements/_headings.scss
new file mode 100644
index 0000000..6a59ac3
--- /dev/null
+++ b/assets/css/elements/_headings.scss
@@ -0,0 +1,24 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $heading-font-family;
+  font-size: modular-scale(1);
+  line-height: $heading-line-height;
+  margin: 0 0 $small-spacing;
+}
+
+h1 {
+  font-size: modular-scale(2);
+  font-weight: $base-font-weight;
+  margin: 0;
+}
+
+.heading {
+  font-family: $heading-font-family;
+  font-size: modular-scale(1);
+  line-height: $heading-line-height;
+  margin: 0 0 $small-spacing;
+}
diff --git a/assets/css/elements/_links.scss b/assets/css/elements/_links.scss
new file mode 100644
index 0000000..399eeae
--- /dev/null
+++ b/assets/css/elements/_links.scss
@@ -0,0 +1,3 @@
+a {
+  color: $foreground-color;
+}
diff --git a/assets/css/base/_lists.scss b/assets/css/elements/_lists.scss
similarity index 78%
rename from assets/css/base/_lists.scss
rename to assets/css/elements/_lists.scss
index 06a7c0a..d63e399 100644
--- a/assets/css/base/_lists.scss
+++ b/assets/css/elements/_lists.scss
@@ -10,7 +10,7 @@ dl {
 }
 
 dt {
-  font-weight: 600;
+  font-weight: $heavy-font-weight;
   margin: 0;
 }
 
diff --git a/assets/css/elements/_main.scss b/assets/css/elements/_main.scss
new file mode 100644
index 0000000..98533d9
--- /dev/null
+++ b/assets/css/elements/_main.scss
@@ -0,0 +1,3 @@
+main {
+  margin-top: 5vmin;
+}
diff --git a/assets/css/elements/_paragraphs.scss b/assets/css/elements/_paragraphs.scss
new file mode 100644
index 0000000..0edd2ce
--- /dev/null
+++ b/assets/css/elements/_paragraphs.scss
@@ -0,0 +1,3 @@
+p {
+  margin: $small-spacing 0;
+}
diff --git a/assets/css/base/_tables.scss b/assets/css/elements/_tables.scss
similarity index 89%
rename from assets/css/base/_tables.scss
rename to assets/css/elements/_tables.scss
index cdec0e9..7d725ef 100644
--- a/assets/css/base/_tables.scss
+++ b/assets/css/elements/_tables.scss
@@ -19,10 +19,11 @@ tr {
 }
 
 th {
-  font-weight: 600;
+  font-weight: $heavy-font-weight;
 }
 
 th,
 td {
   padding: $x-small-spacing;
 }
+
diff --git a/assets/css/base/_layout.scss b/assets/css/generic/_layout.scss
similarity index 59%
rename from assets/css/base/_layout.scss
rename to assets/css/generic/_layout.scss
index 4f4001e..dd127cb 100644
--- a/assets/css/base/_layout.scss
+++ b/assets/css/generic/_layout.scss
@@ -1,6 +1,8 @@
 html {
-  background-color: $viewport-background-color;
+  background: $background-color;
   box-sizing: border-box;
+  color: $foreground-color;
+  font-weight: $base-font-weight;
 }
 
 *,
@@ -9,11 +11,11 @@ html {
   box-sizing: inherit;
 }
 
+body {
+  margin: 0;
+}
+
 html,
 body {
   height: 100%;
 }
-
-body {
-  margin: 0;
-}
diff --git a/assets/css/generic/_typography.scss b/assets/css/generic/_typography.scss
new file mode 100644
index 0000000..e733641
--- /dev/null
+++ b/assets/css/generic/_typography.scss
@@ -0,0 +1,18 @@
+html {
+  color: $base-font-color;
+  font-family: $base-font-family;
+  font-size: $large-font-size;
+  line-height: $base-line-height;
+}
+
+@media (max-height: 960px), (max-width: 1024px) {
+  html {
+    font-size: $base-font-size;
+  }
+}
+
+@media (max-height: 480px), (max-width: 768px) {
+  html {
+    font-size: $small-font-size;
+  }
+}
diff --git a/assets/css/objects/_container.scss b/assets/css/objects/_container.scss
new file mode 100644
index 0000000..9f4499c
--- /dev/null
+++ b/assets/css/objects/_container.scss
@@ -0,0 +1,4 @@
+.container {
+  margin: 0 auto;
+  width: $container-width;
+}
diff --git a/assets/css/objects/_form-group.scss b/assets/css/objects/_form-group.scss
new file mode 100644
index 0000000..3b8db91
--- /dev/null
+++ b/assets/css/objects/_form-group.scss
@@ -0,0 +1,3 @@
+.form-group {
+  margin-top: $base-spacing;
+}
diff --git a/assets/css/objects/_form.scss b/assets/css/objects/_form.scss
new file mode 100644
index 0000000..97b3554
--- /dev/null
+++ b/assets/css/objects/_form.scss
@@ -0,0 +1,15 @@
+.form {
+  h2 {
+    margin: 0 auto;
+    max-width: $base-form-width;
+    padding: $base-spacing;
+  }
+
+  form {
+    border: $base-solid-border;
+    border-radius: $base-border-radius;
+    margin: 0 auto;
+    max-width: $base-form-width;
+    padding: 0 $base-spacing $base-spacing;
+  }
+}
diff --git a/assets/css/_tables.scss b/assets/css/objects/_tables.scss
similarity index 77%
rename from assets/css/_tables.scss
rename to assets/css/objects/_tables.scss
index d561a29..834b48a 100644
--- a/assets/css/_tables.scss
+++ b/assets/css/objects/_tables.scss
@@ -11,6 +11,6 @@
 
   th,
   td {
-    padding: 0 $base-spacing 0 0;
+    padding: 0 $small-spacing 0 0;
   }
 }
diff --git a/assets/css/settings/_board.scss b/assets/css/settings/_board.scss
new file mode 100644
index 0000000..4564216
--- /dev/null
+++ b/assets/css/settings/_board.scss
@@ -0,0 +1,17 @@
+:root {
+  --board-size: 64vw;
+}
+
+@media (min-aspect-ratio: 14/11) {
+  :root {
+    --board-size: 80vmin;
+  }
+}
+
+@media (max-aspect-ratio: 9/11) {
+  :root {
+    --board-size: 90vmin;
+  }
+}
+
+$diagonal-pixel: 0.7071067812px;
diff --git a/assets/css/settings/_chess.scss b/assets/css/settings/_chess.scss
new file mode 100644
index 0000000..1e44d4b
--- /dev/null
+++ b/assets/css/settings/_chess.scss
@@ -0,0 +1,2 @@
+$colours: "black" "white";
+$pieces: king queen bishop knight rook pawn;
diff --git a/assets/css/settings/_colors.scss b/assets/css/settings/_colors.scss
new file mode 100644
index 0000000..8126268
--- /dev/null
+++ b/assets/css/settings/_colors.scss
@@ -0,0 +1,18 @@
+$black: #000;
+$white: #fff;
+
+// Background Colors
+$background-color: $white;
+$foreground-color: $black;
+
+$nav-background-color: $black;
+$nav-foreground-color: $white;
+
+$link-color: $black;
+
+// Font Colors
+$base-font-color: $black;
+$action-color: $black;
+
+// Border
+$base-border-color: $black;
diff --git a/assets/css/settings/_forms.scss b/assets/css/settings/_forms.scss
new file mode 100644
index 0000000..66cb573
--- /dev/null
+++ b/assets/css/settings/_forms.scss
@@ -0,0 +1 @@
+$base-form-width: 40rem;
diff --git a/assets/css/settings/_global.scss b/assets/css/settings/_global.scss
new file mode 100644
index 0000000..fe53f63
--- /dev/null
+++ b/assets/css/settings/_global.scss
@@ -0,0 +1,16 @@
+$base-border-radius: 0.5rem;
+$base-spacing: 2rem;
+$small-spacing: $base-spacing / 2;
+$x-small-spacing: $small-spacing / 2;
+$base-z-index: 0;
+
+$container-width: 90%;
+
+// Border
+$base-border-color: $black;
+$base-border: 1px dashed $base-border-color;
+$base-solid-border: 0.25rem solid $base-border-color;
+
+// Animations
+$base-duration: 150ms;
+$base-timing: ease;
diff --git a/assets/css/settings/_typography.scss b/assets/css/settings/_typography.scss
new file mode 100644
index 0000000..feba04d
--- /dev/null
+++ b/assets/css/settings/_typography.scss
@@ -0,0 +1,19 @@
+$base-font-family: "Enriqueta", serif;
+$base-font-size: 1em;
+$heading-font-family: $base-font-family;
+
+$small-font-size: 0.8em;
+$large-font-size: 1.2em;
+
+// Line height
+$base-line-height: 1.5;
+$heading-line-height: 1.2;
+
+// Font weights
+$base-font-weight: 400;
+$heavy-font-weight: 700;
+
+// Modular scale
+$bourbon: (
+  "modular-scale-ratio": $major-third,
+);
diff --git a/assets/css/utilities/_text-right.scss b/assets/css/utilities/_text-right.scss
new file mode 100644
index 0000000..c230b75
--- /dev/null
+++ b/assets/css/utilities/_text-right.scss
@@ -0,0 +1,3 @@
+.text-right {
+  text-align: right;
+}
diff --git a/assets/css/_utilities.scss b/assets/css/utilities/_visually-hidden.scss
similarity index 100%
rename from assets/css/_utilities.scss
rename to assets/css/utilities/_visually-hidden.scss
diff --git a/assets/css/bourbon/_bourbon.scss b/assets/css/vendor/bourbon/_bourbon.scss
similarity index 100%
rename from assets/css/bourbon/_bourbon.scss
rename to assets/css/vendor/bourbon/_bourbon.scss
diff --git a/assets/css/bourbon/bourbon/helpers/_buttons-list.scss b/assets/css/vendor/bourbon/bourbon/helpers/_buttons-list.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/helpers/_buttons-list.scss
rename to assets/css/vendor/bourbon/bourbon/helpers/_buttons-list.scss
diff --git a/assets/css/bourbon/bourbon/helpers/_scales.scss b/assets/css/vendor/bourbon/bourbon/helpers/_scales.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/helpers/_scales.scss
rename to assets/css/vendor/bourbon/bourbon/helpers/_scales.scss
diff --git a/assets/css/bourbon/bourbon/helpers/_text-inputs-list.scss b/assets/css/vendor/bourbon/bourbon/helpers/_text-inputs-list.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/helpers/_text-inputs-list.scss
rename to assets/css/vendor/bourbon/bourbon/helpers/_text-inputs-list.scss
diff --git a/assets/css/bourbon/bourbon/library/_border-color.scss b/assets/css/vendor/bourbon/bourbon/library/_border-color.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_border-color.scss
rename to assets/css/vendor/bourbon/bourbon/library/_border-color.scss
diff --git a/assets/css/bourbon/bourbon/library/_border-radius.scss b/assets/css/vendor/bourbon/bourbon/library/_border-radius.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_border-radius.scss
rename to assets/css/vendor/bourbon/bourbon/library/_border-radius.scss
diff --git a/assets/css/bourbon/bourbon/library/_border-style.scss b/assets/css/vendor/bourbon/bourbon/library/_border-style.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_border-style.scss
rename to assets/css/vendor/bourbon/bourbon/library/_border-style.scss
diff --git a/assets/css/bourbon/bourbon/library/_border-width.scss b/assets/css/vendor/bourbon/bourbon/library/_border-width.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_border-width.scss
rename to assets/css/vendor/bourbon/bourbon/library/_border-width.scss
diff --git a/assets/css/bourbon/bourbon/library/_buttons.scss b/assets/css/vendor/bourbon/bourbon/library/_buttons.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_buttons.scss
rename to assets/css/vendor/bourbon/bourbon/library/_buttons.scss
diff --git a/assets/css/bourbon/bourbon/library/_clearfix.scss b/assets/css/vendor/bourbon/bourbon/library/_clearfix.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_clearfix.scss
rename to assets/css/vendor/bourbon/bourbon/library/_clearfix.scss
diff --git a/assets/css/bourbon/bourbon/library/_contrast-switch.scss b/assets/css/vendor/bourbon/bourbon/library/_contrast-switch.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_contrast-switch.scss
rename to assets/css/vendor/bourbon/bourbon/library/_contrast-switch.scss
diff --git a/assets/css/bourbon/bourbon/library/_ellipsis.scss b/assets/css/vendor/bourbon/bourbon/library/_ellipsis.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_ellipsis.scss
rename to assets/css/vendor/bourbon/bourbon/library/_ellipsis.scss
diff --git a/assets/css/bourbon/bourbon/library/_font-face.scss b/assets/css/vendor/bourbon/bourbon/library/_font-face.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_font-face.scss
rename to assets/css/vendor/bourbon/bourbon/library/_font-face.scss
diff --git a/assets/css/bourbon/bourbon/library/_font-stacks.scss b/assets/css/vendor/bourbon/bourbon/library/_font-stacks.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_font-stacks.scss
rename to assets/css/vendor/bourbon/bourbon/library/_font-stacks.scss
diff --git a/assets/css/bourbon/bourbon/library/_hide-text.scss b/assets/css/vendor/bourbon/bourbon/library/_hide-text.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_hide-text.scss
rename to assets/css/vendor/bourbon/bourbon/library/_hide-text.scss
diff --git a/assets/css/bourbon/bourbon/library/_hide-visually.scss b/assets/css/vendor/bourbon/bourbon/library/_hide-visually.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_hide-visually.scss
rename to assets/css/vendor/bourbon/bourbon/library/_hide-visually.scss
diff --git a/assets/css/bourbon/bourbon/library/_margin.scss b/assets/css/vendor/bourbon/bourbon/library/_margin.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_margin.scss
rename to assets/css/vendor/bourbon/bourbon/library/_margin.scss
diff --git a/assets/css/bourbon/bourbon/library/_modular-scale.scss b/assets/css/vendor/bourbon/bourbon/library/_modular-scale.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_modular-scale.scss
rename to assets/css/vendor/bourbon/bourbon/library/_modular-scale.scss
diff --git a/assets/css/bourbon/bourbon/library/_overflow-wrap.scss b/assets/css/vendor/bourbon/bourbon/library/_overflow-wrap.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_overflow-wrap.scss
rename to assets/css/vendor/bourbon/bourbon/library/_overflow-wrap.scss
diff --git a/assets/css/bourbon/bourbon/library/_padding.scss b/assets/css/vendor/bourbon/bourbon/library/_padding.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_padding.scss
rename to assets/css/vendor/bourbon/bourbon/library/_padding.scss
diff --git a/assets/css/bourbon/bourbon/library/_position.scss b/assets/css/vendor/bourbon/bourbon/library/_position.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_position.scss
rename to assets/css/vendor/bourbon/bourbon/library/_position.scss
diff --git a/assets/css/bourbon/bourbon/library/_prefixer.scss b/assets/css/vendor/bourbon/bourbon/library/_prefixer.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_prefixer.scss
rename to assets/css/vendor/bourbon/bourbon/library/_prefixer.scss
diff --git a/assets/css/bourbon/bourbon/library/_shade.scss b/assets/css/vendor/bourbon/bourbon/library/_shade.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_shade.scss
rename to assets/css/vendor/bourbon/bourbon/library/_shade.scss
diff --git a/assets/css/bourbon/bourbon/library/_size.scss b/assets/css/vendor/bourbon/bourbon/library/_size.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_size.scss
rename to assets/css/vendor/bourbon/bourbon/library/_size.scss
diff --git a/assets/css/bourbon/bourbon/library/_strip-unit.scss b/assets/css/vendor/bourbon/bourbon/library/_strip-unit.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_strip-unit.scss
rename to assets/css/vendor/bourbon/bourbon/library/_strip-unit.scss
diff --git a/assets/css/bourbon/bourbon/library/_text-inputs.scss b/assets/css/vendor/bourbon/bourbon/library/_text-inputs.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_text-inputs.scss
rename to assets/css/vendor/bourbon/bourbon/library/_text-inputs.scss
diff --git a/assets/css/bourbon/bourbon/library/_timing-functions.scss b/assets/css/vendor/bourbon/bourbon/library/_timing-functions.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_timing-functions.scss
rename to assets/css/vendor/bourbon/bourbon/library/_timing-functions.scss
diff --git a/assets/css/bourbon/bourbon/library/_tint.scss b/assets/css/vendor/bourbon/bourbon/library/_tint.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_tint.scss
rename to assets/css/vendor/bourbon/bourbon/library/_tint.scss
diff --git a/assets/css/bourbon/bourbon/library/_triangle.scss b/assets/css/vendor/bourbon/bourbon/library/_triangle.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_triangle.scss
rename to assets/css/vendor/bourbon/bourbon/library/_triangle.scss
diff --git a/assets/css/bourbon/bourbon/library/_value-prefixer.scss b/assets/css/vendor/bourbon/bourbon/library/_value-prefixer.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/library/_value-prefixer.scss
rename to assets/css/vendor/bourbon/bourbon/library/_value-prefixer.scss
diff --git a/assets/css/bourbon/bourbon/settings/_settings.scss b/assets/css/vendor/bourbon/bourbon/settings/_settings.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/settings/_settings.scss
rename to assets/css/vendor/bourbon/bourbon/settings/_settings.scss
diff --git a/assets/css/bourbon/bourbon/utilities/_assign-inputs.scss b/assets/css/vendor/bourbon/bourbon/utilities/_assign-inputs.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/utilities/_assign-inputs.scss
rename to assets/css/vendor/bourbon/bourbon/utilities/_assign-inputs.scss
diff --git a/assets/css/bourbon/bourbon/utilities/_compact-shorthand.scss b/assets/css/vendor/bourbon/bourbon/utilities/_compact-shorthand.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/utilities/_compact-shorthand.scss
rename to assets/css/vendor/bourbon/bourbon/utilities/_compact-shorthand.scss
diff --git a/assets/css/bourbon/bourbon/utilities/_contrast-ratio.scss b/assets/css/vendor/bourbon/bourbon/utilities/_contrast-ratio.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/utilities/_contrast-ratio.scss
rename to assets/css/vendor/bourbon/bourbon/utilities/_contrast-ratio.scss
diff --git a/assets/css/bourbon/bourbon/utilities/_directional-property.scss b/assets/css/vendor/bourbon/bourbon/utilities/_directional-property.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/utilities/_directional-property.scss
rename to assets/css/vendor/bourbon/bourbon/utilities/_directional-property.scss
diff --git a/assets/css/bourbon/bourbon/utilities/_fetch-bourbon-setting.scss b/assets/css/vendor/bourbon/bourbon/utilities/_fetch-bourbon-setting.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/utilities/_fetch-bourbon-setting.scss
rename to assets/css/vendor/bourbon/bourbon/utilities/_fetch-bourbon-setting.scss
diff --git a/assets/css/bourbon/bourbon/utilities/_font-source-declaration.scss b/assets/css/vendor/bourbon/bourbon/utilities/_font-source-declaration.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/utilities/_font-source-declaration.scss
rename to assets/css/vendor/bourbon/bourbon/utilities/_font-source-declaration.scss
diff --git a/assets/css/bourbon/bourbon/utilities/_gamma.scss b/assets/css/vendor/bourbon/bourbon/utilities/_gamma.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/utilities/_gamma.scss
rename to assets/css/vendor/bourbon/bourbon/utilities/_gamma.scss
diff --git a/assets/css/bourbon/bourbon/utilities/_lightness.scss b/assets/css/vendor/bourbon/bourbon/utilities/_lightness.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/utilities/_lightness.scss
rename to assets/css/vendor/bourbon/bourbon/utilities/_lightness.scss
diff --git a/assets/css/bourbon/bourbon/utilities/_unpack-shorthand.scss b/assets/css/vendor/bourbon/bourbon/utilities/_unpack-shorthand.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/utilities/_unpack-shorthand.scss
rename to assets/css/vendor/bourbon/bourbon/utilities/_unpack-shorthand.scss
diff --git a/assets/css/bourbon/bourbon/validators/_contains-falsy.scss b/assets/css/vendor/bourbon/bourbon/validators/_contains-falsy.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/validators/_contains-falsy.scss
rename to assets/css/vendor/bourbon/bourbon/validators/_contains-falsy.scss
diff --git a/assets/css/bourbon/bourbon/validators/_contains.scss b/assets/css/vendor/bourbon/bourbon/validators/_contains.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/validators/_contains.scss
rename to assets/css/vendor/bourbon/bourbon/validators/_contains.scss
diff --git a/assets/css/bourbon/bourbon/validators/_is-color.scss b/assets/css/vendor/bourbon/bourbon/validators/_is-color.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/validators/_is-color.scss
rename to assets/css/vendor/bourbon/bourbon/validators/_is-color.scss
diff --git a/assets/css/bourbon/bourbon/validators/_is-length.scss b/assets/css/vendor/bourbon/bourbon/validators/_is-length.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/validators/_is-length.scss
rename to assets/css/vendor/bourbon/bourbon/validators/_is-length.scss
diff --git a/assets/css/bourbon/bourbon/validators/_is-number.scss b/assets/css/vendor/bourbon/bourbon/validators/_is-number.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/validators/_is-number.scss
rename to assets/css/vendor/bourbon/bourbon/validators/_is-number.scss
diff --git a/assets/css/bourbon/bourbon/validators/_is-size.scss b/assets/css/vendor/bourbon/bourbon/validators/_is-size.scss
similarity index 100%
rename from assets/css/bourbon/bourbon/validators/_is-size.scss
rename to assets/css/vendor/bourbon/bourbon/validators/_is-size.scss
diff --git a/assets/js/components/chess-board-square.js b/assets/js/components/chess-board-square.js
index 57ad6a5..661f056 100644
--- a/assets/js/components/chess-board-square.js
+++ b/assets/js/components/chess-board-square.js
@@ -22,16 +22,16 @@ class ChessBoardSquare extends React.Component {
   get squareClass() {
     if (this.props.piece == undefined) {
       return classNames(
-        "board-square",
-        { "available": this.isAvailableSquare() }
+        "square",
+        { "square--available": this.isAvailableSquare() }
       );
     } else {
       return classNames(
-        "board-square",
-        this.props.piece.type,
-        this.props.piece.colour,
-        { "selected": this.isSelectedSquare() },
-        { "available": this.isAvailableSquare() }
+        "square",
+        `square--${this.props.piece.type}`,
+        `square--${this.props.piece.colour}`,
+        { "square--selected": this.isSelectedSquare() },
+        { "square--available": this.isAvailableSquare() }
       );
     }
   }
diff --git a/assets/js/components/chess-board.js b/assets/js/components/chess-board.js
index 9dfb603..b5b1d8c 100644
--- a/assets/js/components/chess-board.js
+++ b/assets/js/components/chess-board.js
@@ -81,7 +81,11 @@ class ChessBoard extends React.Component {
     const turn = this.turn;
     const player = this.player;
 
-    return classNames("board", turn + "-to-move", "player-is-" + player);
+    return classNames(
+      "board",
+      `board--${turn}-to-move`,
+      `board--player-is-${player}`
+    );
   }
 
   render() {
@@ -90,7 +94,7 @@ class ChessBoard extends React.Component {
         <RankLabels />
         <FileLabels />
 
-        <div className="board-body">
+        <div className="board__body">
           {this.renderSquares()}
         </div>
 
diff --git a/assets/js/components/file-labels.js b/assets/js/components/file-labels.js
index 3769527..0f89ca7 100644
--- a/assets/js/components/file-labels.js
+++ b/assets/js/components/file-labels.js
@@ -6,14 +6,14 @@ const FILE_LABELS = ["a", "b", "c", "d", "e", "f", "g", "h"];
 const renderFileLabels = () => {
   return _.map(FILE_LABELS, (fileLabel) => {
     return (
-      <div key={fileLabel} className="board-label">{fileLabel}</div>
+      <div key={fileLabel} className="board__label">{fileLabel}</div>
     );
   });
 };
 
 const FileLabels = () => {
   return (
-    <div className="board-file-labels">
+    <div className="board__file-labels">
       {renderFileLabels()}
     </div>
   );
diff --git a/assets/js/components/game-info.js b/assets/js/components/game-info.js
index c83da11..a153d1b 100644
--- a/assets/js/components/game-info.js
+++ b/assets/js/components/game-info.js
@@ -1,19 +1,37 @@
 import React from "react";
 import { connect } from "react-redux";
 
-const GameInfo = (props) => {
+const renderStatus = status => {
+  if (status == "viewing") {
+    return (
+      <img
+        className="game-info__opponent-status"
+        src="/images/eye-open.svg"
+        alt="viewing"
+      />
+    );
+  } else {
+    return (
+      <img
+        className="game-info__opponent-status"
+        src="/images/eye-closed.svg"
+        alt="offline"
+      />
+    );
+  }
+};
+
+const GameInfo = props => {
   return (
     <div className="game-info">
       <p>
-        Playing {props.opponent} - <span className={props.opponentStatus}>
-          {props.opponentStatus}
-        </span>
+        Playing {props.opponent} {renderStatus(props.opponentStatus)}
       </p>
     </div>
   );
 };
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
   return {
     opponent: state.opponent,
     opponentStatus: state.opponentStatus,
diff --git a/assets/js/components/game-state.js b/assets/js/components/game-state.js
index f27562f..cf62f01 100644
--- a/assets/js/components/game-state.js
+++ b/assets/js/components/game-state.js
@@ -15,7 +15,7 @@ const friendlyGameState = (state) => {
 };
 
 const gameStateClass = (state) => {
-  return classNames("board-game-state", state);
+  return classNames("game-state", `game-state--${state}`);
 };
 
 const GameState = (props) => {
diff --git a/assets/js/components/move-list.js b/assets/js/components/move-list.js
index c6bc734..b1b2c9a 100644
--- a/assets/js/components/move-list.js
+++ b/assets/js/components/move-list.js
@@ -50,8 +50,6 @@ const MoveList = (props) => {
   return (
     <div className="move-list">
       <table className="table table--condensed">
-        <caption className="heading">Moves</caption>
-
         <thead>
           <tr>
             <th className="move-list__line-number">
diff --git a/assets/js/components/rank-labels.js b/assets/js/components/rank-labels.js
index 3ef4919..c8abc97 100644
--- a/assets/js/components/rank-labels.js
+++ b/assets/js/components/rank-labels.js
@@ -6,14 +6,14 @@ const RANK_LABELS = [1, 2, 3, 4, 5, 6, 7, 8];
 const renderRankLabels = () => {
   return _.map(RANK_LABELS, (rankLabel) => {
     return (
-      <div key={rankLabel} className="board-label">{rankLabel}</div>
+      <div key={rankLabel} className="board__label">{rankLabel}</div>
     );
   });
 };
 
 const RankLabels = () => {
   return (
-    <div className="board-rank-labels">
+    <div className="board__rank-labels">
       {renderRankLabels()}
     </div>
   );
diff --git a/assets/static/images/eye-closed.svg b/assets/static/images/eye-closed.svg
new file mode 100644
index 0000000..29168de
--- /dev/null
+++ b/assets/static/images/eye-closed.svg
@@ -0,0 +1 @@
+<svg height="356" viewBox="0 0 460 356" width="460" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#000" stroke-linecap="round" stroke-width="25" transform="matrix(1 0 0 -1 19 311)"><path d="m1.0000057 154.5c45.9861739-66.7467696 122.9511533-110.5 210.1352473-110.5s164.149074 43.7532304 210.135248 110.5c-45.986168 66.746766-122.95115 110.5-210.135248 110.5-87.184097 0-164.1490797-43.753234-210.135253-110.500008z" stroke-linejoin="round"/><path d="m211.25 43.5v-43"/><path d="m282.942315 52.7633091v-42.99999997" transform="matrix(.96592583 .25881905 -.25881905 .96592583 17.725751 -72.113825)"/><path d="m349.243301 80.5775589v-43" transform="matrix(.8660254 .5 -.5 .8660254 76.301715 -166.606758)"/><path d="m138.942315 53.7633091v-43" transform="matrix(.96592583 -.25881905 .25881905 .96592583 -3.622829 37.008499)"/><path d="m72.2433013 80.5775589v-43" transform="matrix(.8660254 -.5 .5 .8660254 -19.886807 43.936543)"/><path d="m15.7917045 125.091705v-43.0000005" transform="matrix(.70710678 -.70710678 .70710678 .70710678 -68.683692 41.366308)"/><path d="m406.791705 124.091705v-43.0000005" transform="matrix(.70710678 .70710678 -.70710678 .70710678 191.631244 -257.455337)"/></g></svg>
\ No newline at end of file
diff --git a/assets/static/images/eye-open.svg b/assets/static/images/eye-open.svg
new file mode 100644
index 0000000..6a7a0d3
--- /dev/null
+++ b/assets/static/images/eye-open.svg
@@ -0,0 +1 @@
+<svg height="356" viewBox="0 0 460 356" width="460" xmlns="http://www.w3.org/2000/svg"><g fill="none" transform="translate(19 26)"><g stroke="#000" stroke-linecap="round" stroke-width="25"><path d="m1.0000057 154.5c45.9861739-66.7467696 122.9511533-110.5 210.1352473-110.5s164.149074 43.7532304 210.135248 110.5c-45.986168 66.746766-122.95115 110.5-210.135248 110.5-87.184097 0-164.1490797-43.753234-210.135253-110.500008z" stroke-linejoin="round"/><path d="m211.25 43.5v-43"/><path d="m282.942315 52.7633091v-42.99999997" transform="matrix(.96592583 .25881905 -.25881905 .96592583 17.725751 -72.113825)"/><path d="m349.243301 80.5775589v-43" transform="matrix(.8660254 .5 -.5 .8660254 76.301715 -166.606758)"/><path d="m138.942315 53.7633091v-43" transform="matrix(.96592583 -.25881905 .25881905 .96592583 -3.622829 37.008499)"/><path d="m72.2433013 80.5775589v-43" transform="matrix(.8660254 -.5 .5 .8660254 -19.886807 43.936543)"/><path d="m15.7917045 125.091705v-43.0000005" transform="matrix(.70710678 -.70710678 .70710678 .70710678 -68.683692 41.366308)"/><path d="m406.791705 124.091705v-43.0000005" transform="matrix(.70710678 .70710678 -.70710678 .70710678 191.631244 -257.455337)"/><ellipse cx="211.13525" cy="154.122536" rx="108.223972" ry="106.122536" stroke-linejoin="round"/></g><path d="m155.227975 113.387908c-.109847.900709-.16637 1.817568-.16637 2.747427 0 12.592957 10.366882 22.801566 23.155079 22.801566s23.155079-10.208609 23.155079-22.801566c0-11.860297-9.195679-21.6056177-20.949172-22.699441 8.892571-4.1279809 18.82795-6.435894 29.310728-6.435894 38.009363 0 68.82204 30.342255 68.82204 67.771322 0 37.429068-30.812677 67.771323-68.82204 67.771323s-68.822041-30.342255-68.822041-67.771323c0-15.582002 5.340206-29.935775 14.316697-41.383414z" fill="#000"/></g></svg>
\ No newline at end of file
diff --git a/lib/chess_web/templates/game/index.html.eex b/lib/chess_web/templates/game/index.html.eex
index be86140..fe3c7cb 100644
--- a/lib/chess_web/templates/game/index.html.eex
+++ b/lib/chess_web/templates/game/index.html.eex
@@ -1,11 +1,11 @@
 <h2><%= gettext "Listing games" %></h2>
 
-<table class="table table--games-list">
+<table class="games-list">
   <tbody>
     <%= for game <- @games do %>
       <tr class="<%= turn_class(@conn, game) %>">
         <td>
-          <span class="player-indicator">
+          <span class="games-list__player-indicator">
             <img src="images/pawn_<%= player_colour(@conn, game) %>.svg">
           </span>
           <%= link gettext(
@@ -25,8 +25,7 @@
           <%= link gettext("Delete"),
                 to: game_path(@conn, :delete, game),
                 method: :delete,
-                data: [confirm: gettext("Are you sure?")],
-                class: "btn btn-danger btn-xs" %>
+                data: [confirm: gettext("Are you sure?")] %>
         </td>
       </tr>
     <% end %>
diff --git a/lib/chess_web/templates/layout/_alerts.html.eex b/lib/chess_web/templates/layout/_alerts.html.eex
new file mode 100644
index 0000000..db02eb6
--- /dev/null
+++ b/lib/chess_web/templates/layout/_alerts.html.eex
@@ -0,0 +1,8 @@
+<div class="container alerts">
+  <p class="alert alert--info" role="alert">
+    <%= get_flash(@conn, :info) %>
+  </p>
+  <p class="alert alert--danger" role="alert">
+    <%= get_flash(@conn, :error) %>
+  </p>
+</div>
diff --git a/lib/chess_web/templates/layout/_head.html.eex b/lib/chess_web/templates/layout/_head.html.eex
new file mode 100644
index 0000000..ca18082
--- /dev/null
+++ b/lib/chess_web/templates/layout/_head.html.eex
@@ -0,0 +1,11 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title><%= gettext "64squares" %></title>
+  <link href="https://fonts.googleapis.com/css?family=Enriqueta:400,700" rel="stylesheet">
+  <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
+</head>
diff --git a/lib/chess_web/templates/layout/_header.html.eex b/lib/chess_web/templates/layout/_header.html.eex
new file mode 100644
index 0000000..54f58b0
--- /dev/null
+++ b/lib/chess_web/templates/layout/_header.html.eex
@@ -0,0 +1,22 @@
+<header class="header" role="banner">
+  <div class="container">
+    <h1 class="header__title">
+      <%= link gettext("64squares"), to: page_path(@conn, :index) %>
+    </h1>
+
+    <nav class="header__user-nav" role="user">
+      <%= if current_user(@conn) do %>
+        <%= link(current_user(@conn).name, to: profile_path(@conn, :edit)) %>
+        (<%= current_user(@conn).email %>)
+        |
+        <%= link gettext("Log out"),
+                 to: session_path(@conn, :delete),
+                 method: :delete %>
+      <% else %>
+        <%= link gettext("Register"), to: registration_path(@conn, :new) %>
+        |
+        <%= link gettext("Log in"), to: session_path(@conn, :new) %>
+      <% end %>
+    </nav>
+  </div>
+</header>
diff --git a/lib/chess_web/templates/layout/_scripts.html.eex b/lib/chess_web/templates/layout/_scripts.html.eex
new file mode 100644
index 0000000..02735d8
--- /dev/null
+++ b/lib/chess_web/templates/layout/_scripts.html.eex
@@ -0,0 +1,3 @@
+<script>window.userToken = "<%= @token %>";</script>
+<script src="<%= static_path(@conn, "/js/vendor.js") %>"></script>
+<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
diff --git a/lib/chess_web/templates/layout/app.html.eex b/lib/chess_web/templates/layout/app.html.eex
index 7255282..0880b49 100644
--- a/lib/chess_web/templates/layout/app.html.eex
+++ b/lib/chess_web/templates/layout/app.html.eex
@@ -1,46 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="">
-    <meta name="author" content="">
-
-    <title><%= gettext "Shall We Play a Game?" %></title>
-    <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
-  </head>
+  <%= render "_head.html", conn: @conn %>
 
   <body>
-    <header role="banner">
-      <div class="container">
-        <h1><%= link gettext("64squares"), to: page_path(@conn, :index) %></h1>
-
-        <nav class="user-nav" role="user">
-          <%= if current_user(@conn) do %>
-            <%= link(current_user(@conn).name, to: profile_path(@conn, :edit)) %>
-            (<%= current_user(@conn).email %>)
-            |
-            <%= link gettext("Log out"),
-                  to: session_path(@conn, :delete),
-                  method: :delete %>
-          <% else %>
-            <%= link gettext("Register"), to: registration_path(@conn, :new) %>
-            |
-            <%= link gettext("Log in"), to: session_path(@conn, :new) %>
-          <% end %>
-        </nav>
-      </div>
-    </header>
-
-    <div class="container alerts">
-      <p class="alert alert-info" role="alert">
-        <%= get_flash(@conn, :info) %>
-      </p>
-      <p class="alert alert-danger" role="alert">
-        <%= get_flash(@conn, :error) %>
-      </p>
-    </div>
+    <%= render "_header.html", conn: @conn %>
+    <%= render "_alerts.html", conn: @conn %>
 
     <main role="main">
       <div class="container">
@@ -48,8 +12,6 @@
       </div>
     </main>
 
-    <script>window.userToken = "<%= assigns[:user_token] %>";</script>
-    <script src="<%= static_path(@conn, "/js/vendor.js") %>"></script>
-    <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
+    <%= render "_scripts.html", conn: @conn, token: assigns[:user_token] %>
   </body>
 </html>
diff --git a/lib/chess_web/views/game_view.ex b/lib/chess_web/views/game_view.ex
index 01532c4..28d6b8a 100644
--- a/lib/chess_web/views/game_view.ex
+++ b/lib/chess_web/views/game_view.ex
@@ -29,7 +29,7 @@ defmodule ChessWeb.GameView do
 
   def turn_class(conn, game) do
     if your_turn?(conn, game) && !GameState.game_over?(game) do
-      "your-turn"
+      "games-list__your-turn"
     end
   end
 
diff --git a/test/features/games_test.exs b/test/features/games_test.exs
index 3d48ee7..807f374 100644
--- a/test/features/games_test.exs
+++ b/test/features/games_test.exs
@@ -67,7 +67,7 @@ defmodule Chess.Features.GamesTest do
     |> click(link("64squares"))
 
     session
-    |> assert_has(css(".table tr", count: 1))
+    |> assert_has(css(".games-list tr", count: 1))
     |> assert_has(link("Game with Urbosa"))
   end
 
@@ -88,7 +88,7 @@ defmodule Chess.Features.GamesTest do
     |> login("urbosa@gerudo.town", "gerudoqueen")
 
     session
-    |> assert_has(css(".table tr", count: 1))
+    |> assert_has(css(".games-list tr", count: 1))
     |> assert_has(link("Game with Zelda"))
 
     session
diff --git a/test/features/moves_test.exs b/test/features/moves_test.exs
index c90e867..f3c1efd 100644
--- a/test/features/moves_test.exs
+++ b/test/features/moves_test.exs
@@ -25,11 +25,11 @@ defmodule Chess.Features.MovesTest do
 
     |> click(css("#f4-r1"))
     |> assert_has(square_selected("f4-r1"))
-    |> assert_has(square_containing("f4-r1", "white.pawn"))
+    |> assert_has(square_containing("f4-r1", %{type: "pawn", colour: "white"}))
 
     |> click(css("#f4-r3"))
-    |> assert_has(square_containing("f4-r3", "white.pawn"))
-    |> refute_has(square_containing("f4-r1", "white.pawn"))
+    |> assert_has(square_containing("f4-r3", %{type: "pawn", colour: "white"}))
+    |> refute_has(square_containing("f4-r1", %{type: "pawn", colour: "white"}))
   end
 
   test "opponents recieves an email on move", %{session: session} do
@@ -140,9 +140,9 @@ defmodule Chess.Features.MovesTest do
     |> click(css("#f4-r3"))
 
     session2
-    |> assert_has(css(".board.black-to-move"))
-    |> refute_has(square_containing("f4-r1", "white.pawn"))
-    |> assert_has(square_containing("f4-r3", "white.pawn"))
+    |> assert_has(css(".board--black-to-move"))
+    |> refute_has(square_containing("f4-r1", %{type: "pawn", colour: "white"}))
+    |> assert_has(square_containing("f4-r3", %{type: "pawn", colour: "white"}))
   end
 
   test "cannot move the king into a position that would result in check",
@@ -176,8 +176,8 @@ defmodule Chess.Features.MovesTest do
     session
     |> click(css("#f4-r0"))
     |> click(css("#f3-r0"))
-    |> refute_has(square_containing("f3-r0", "white.king"))
-    |> assert_has(square_containing("f4-r0", "white.king"))
+    |> refute_has(square_containing("f3-r0", %{type: "king", colour: "white"}))
+    |> assert_has(square_containing("f4-r0", %{type: "king", colour: "white"}))
   end
 
   test "cannot make a move that would place the king in check",
@@ -212,8 +212,8 @@ defmodule Chess.Features.MovesTest do
     session
     |> click(css("#f4-r1"))
     |> click(css("#f2-r1"))
-    |> refute_has(square_containing("f2-r1", "white.rook"))
-    |> assert_has(square_containing("f4-r1", "white.rook"))
+    |> refute_has(square_containing("f2-r1", %{type: "rook", colour: "white"}))
+    |> assert_has(square_containing("f4-r1", %{type: "rook", colour: "white"}))
   end
 
   test "user is informed when the game is in check", %{session: session} do
@@ -246,16 +246,16 @@ defmodule Chess.Features.MovesTest do
     session
     |> click(css("#f3-r7"))
     |> click(css("#f4-r7"))
-    |> assert_has(square_containing("f4-r7", "black.queen"))
+    |> assert_has(square_containing("f4-r7", %{type: "queen", colour: "black"}))
 
     assert session |> has_text?("Check")
   end
 
   defp square_selected(square) do
-    css("##{square}.selected")
+    css("##{square}.square--selected")
   end
 
   defp square_containing(square, piece) do
-    css("##{square}.#{piece}")
+    css("##{square}.square--#{piece.type}.square--#{piece.colour}")
   end
 end
diff --git a/test/features/registration_test.exs b/test/features/registration_test.exs
index 732d60b..5fba2b2 100644
--- a/test/features/registration_test.exs
+++ b/test/features/registration_test.exs
@@ -6,7 +6,7 @@ defmodule Chess.Features.RegistrationTest do
   test "user can register", %{session: session} do
     session
     |> visit("/")
-    |> click(css(".user-nav a", text: "Register"))
+    |> click(css(".header__user-nav a", text: "Register"))
     |> fill_in(text_field("Name"), with: "Link")
     |> fill_in(text_field("Email"), with: "link@example.com")
     |> fill_in(text_field("Password"), with: "ilovezelda")
@@ -18,7 +18,7 @@ defmodule Chess.Features.RegistrationTest do
   test "user cannot register without a name", %{session: session} do
     session
     |> visit("/")
-    |> click(css(".user-nav a", text: "Register"))
+    |> click(css(".header__user-nav a", text: "Register"))
     |> fill_in(text_field("Email"), with: "link@example.com")
     |> fill_in(text_field("Password"), with: "ilovezelda")
     |> click(button("Register"))
@@ -32,7 +32,7 @@ defmodule Chess.Features.RegistrationTest do
   test "user cannot register without an email", %{session: session} do
     session
     |> visit("/")
-    |> click(css(".user-nav a", text: "Register"))
+    |> click(css(".header__user-nav a", text: "Register"))
     |> fill_in(text_field("Name"), with: "Link")
     |> fill_in(text_field("Password"), with: "ilovezelda")
     |> click(button("Register"))
@@ -46,7 +46,7 @@ defmodule Chess.Features.RegistrationTest do
   test "user cannot register without a password", %{session: session} do
     session
     |> visit("/")
-    |> click(css(".user-nav a", text: "Register"))
+    |> click(css(".header__user-nav a", text: "Register"))
     |> fill_in(text_field("Name"), with: "Link")
     |> fill_in(text_field("Email"), with: "link@example.com")
     |> click(button("Register"))
diff --git a/test/features/session_test.exs b/test/features/session_test.exs
index 9efaf65..398014c 100644
--- a/test/features/session_test.exs
+++ b/test/features/session_test.exs
@@ -9,7 +9,7 @@ defmodule Chess.Features.SessionTest do
 
     session
     |> visit("/")
-    |> click(css(".user-nav a", text: "Log in"))
+    |> click(css(".header__user-nav a", text: "Log in"))
     |> fill_in(text_field("Email"), with: "link@example.com")
     |> fill_in(text_field("Password"), with: "ilovezelda")
     |> click(button("Log in"))
@@ -22,7 +22,7 @@ defmodule Chess.Features.SessionTest do
 
     session
     |> visit("/")
-    |> click(css(".user-nav a", text: "Log in"))
+    |> click(css(".header__user-nav a", text: "Log in"))
     |> fill_in(text_field("Email"), with: "link@hyrule.kingdom")
     |> fill_in(text_field("Password"), with: "calamityganon")
     |> click(button("Log in"))
@@ -35,7 +35,7 @@ defmodule Chess.Features.SessionTest do
 
     session
     |> visit("/")
-    |> click(css(".user-nav a", text: "Log in"))
+    |> click(css(".header__user-nav a", text: "Log in"))
     |> fill_in(text_field("Email"), with: "link@hyrule.kingdom")
     |> fill_in(text_field("Password"), with: "ilovezelda")
     |> click(button("Log in"))
@@ -50,7 +50,7 @@ defmodule Chess.Features.SessionTest do
 
     session
     |> visit("/")
-    |> click(css(".user-nav a", text: "Log in"))
+    |> click(css(".header__user-nav a", text: "Log in"))
     |> fill_in(text_field("Email"), with: "link@hyrule.kingdom")
     |> fill_in(text_field("Password"), with: "ilovezelda")
     |> click(button("Log in"))