Fix CSS

assets/css/components/_square.scss

@@ -64,6 +64,30 @@
   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;
@@ -80,7 +104,7 @@
   @each $colour in $colours {
     @each $piece in $pieces {
       &.square--#{$colour}.square--#{$piece}::before {
-        background-image: url("../static/images/#{$piece}_#{$colour}.svg");
+        background-image: url("/images/#{$piece}_#{$colour}.svg");
       }
     }
   }

config/dev.exs

@@ -1,21 +1,18 @@
 import Config
 
-# For development, we disable any cache and enable
-# debugging and code reloading.
-#
-# The watchers configuration can be used to run external
-# watchers to your application. For example, we use it
-# with brunch.io to recompile .js and .css sources.
 config :chess, ChessWeb.Endpoint,
   http: [port: 4000],
   debug_errors: true,
   code_reloader: true,
   check_origin: false,
   watchers: [
-    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}
+    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline
+      --watch)]},
+    sass:
+      {DartSass, :install_and_run,
+       [:default, ~w(--embed-source-map --source-map-urls=absolute --watch)]}
   ]
 
-# Watch static and templates for browser reloading.
 config :chess, ChessWeb.Endpoint,
   live_reload: [
     patterns: [
@@ -26,11 +23,8 @@ config :chess, ChessWeb.Endpoint,
     ]
   ]
 
-# Do not include metadata nor timestamps in development logs
 config :logger, :console, format: "[$level] $message\n"
 
-# Set a higher stacktrace during development. Avoid configuring such
-# in production as building large stacktraces may be expensive.
 config :phoenix, :stacktrace_depth, 20
 
 config :chess, Chess.Mailer, adapter: Bamboo.LocalAdapter

mix.exs

@@ -39,7 +39,7 @@ defmodule Chess.Mixfile do
       {:comeonin, "~> 5.0"},
       {:cowboy, "~> 2.0"},
       {:credo, "~> 1.0", only: [:dev, :test]},
-      {:dart_sass, "~> 0.5", runtime: Mix.env() == :dev},
+      {:dart_sass, "~> 0.7", runtime: Mix.env() == :dev},
       {:ecto_sql, "~> 3.0"},
       {:floki, "~> 0.34", only: :test},
       {:esbuild, "~> 0.7", runtime: Mix.env() == :dev},