Modify Elm HTML output and create stylesheet.

Makefile

@@ -1,2 +1,4 @@
 generate-elm :
 	cd external/GoUI && elm make Go.elm --output ../../public/js/Go.js
+generate-css :
+	scss public/scss/main.scss > public/css/main.css

external/GoUI

@@ -1 +1 @@
-Subproject commit 4acfc0911a8864c517cb23712c76cddcbc561e69
+Subproject commit 54d1229c9f12ee0edf65774a3335bff70ff78a84

public/css/main.css

@@ -0,0 +1,55 @@
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Indie Flower", serif; }
+
+h1 {
+  font-size: 5em;
+  margin: 0px;
+  text-align: center; }
+
+body {
+  font-family: "Raleway", sans-serif;
+  margin: 0px;
+  background-color: #f4f4f4; }
+
+.content-wrapper {
+  max-width: 750px;
+  margin: auto; }
+
+.board {
+  background-color: tomato;
+  padding: 20px;
+  max-width: 500px;
+  margin: auto;
+  border-radius: 10px; }
+
+.black-player .overlay:hover {
+  background-color: black; }
+
+.white-player .overlay:hover {
+  background-color: white; }
+
+.board-cell {
+  display: inline-block;
+  position: relative;
+  padding: 5.55556%; }
+  .board-cell .overlay {
+    position: absolute;
+    box-sizing: border-box;
+    top: 10%;
+    left: 10%;
+    width: 80%;
+    height: 80%;
+    border-radius: 50%;
+    transition: background-color .25s; }
+  .board-cell.small {
+    padding: 5.55556%; }
+  .board-cell.medium {
+    padding: 3.84615%; }
+  .board-cell.large {
+    padding: 2.63158%; }
+
+.black-cell .overlay {
+  background-color: black; }
+
+.white-cell .overlay {
+  background-color: white; }

public/js/Go.js

@@ -9504,7 +9504,18 @@ var _user$project$Go_View$renderIndex = function (_p0) {
 				_1: {ctor: '[]'}
 			}
 		},
-		{ctor: '[]'});
+		{
+			ctor: '::',
+			_0: A2(
+				_elm_lang$html$Html$div,
+				{
+					ctor: '::',
+					_0: _elm_lang$html$Html_Attributes$class('overlay'),
+					_1: {ctor: '[]'}
+				},
+				{ctor: '[]'}),
+			_1: {ctor: '[]'}
+		});
 };
 var _user$project$Go_View$renderBoard = F2(
 	function (size, board) {

public/scss/main.scss

@@ -0,0 +1,87 @@
+$background-grey: #f4f4f4;
+
+@mixin board-cell($size) {
+    padding: 100%/$size/2;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: "Indie Flower", serif;
+}
+
+h1 {
+    font-size: 5em;
+    margin: 0px;
+    text-align: center;
+}
+
+body {
+    font-family: "Raleway", sans-serif;
+    margin: 0px;
+    background-color: $background-grey;
+}
+
+.content-wrapper {
+    max-width: 750px;
+    margin: auto;
+}
+
+.board {
+    background-color: tomato;
+    padding: 20px;
+    max-width: 500px;
+    margin: auto;
+    border-radius: 10px;
+}
+
+.black-player .overlay {
+    &:hover {
+        background-color: black;
+    }
+}
+
+.white-player .overlay {
+    &:hover {
+        background-color: white;
+    }
+}
+
+.board-cell {
+    display: inline-block;
+    position: relative;
+    @include board-cell(9);
+
+    .overlay {
+        position: absolute;
+        box-sizing: border-box;
+        top: 10%;
+        left: 10%;
+        width: 80%;
+        height: 80%;
+        border-radius: 50%;
+        transition: background-color .25s;
+    }
+
+    &.small {
+        @include board-cell(9);
+    }
+
+    &.medium {
+        @include board-cell(13);
+    }
+
+    &.large {
+        @include board-cell(19);
+    }
+}
+
+.black-cell {
+    .overlay {
+        background-color: black;
+    }
+}
+
+.white-cell {
+    .overlay {
+        background-color: white;
+    }
+}

src/Go/views/game.ecr

@@ -1,4 +1,4 @@
-<div id="elm-root"></div>
+<div id="elm-root" class="<%= black ? "black" : "white" %>-player"></div>
 <script src="/js/Go.js"></script>
 <script>
     var node = document.getElementById('elm-root')