diff --git a/Makefile b/Makefile index 0f10866..75cd6eb 100644 --- a/Makefile +++ b/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 diff --git a/external/GoUI b/external/GoUI index 4acfc09..54d1229 160000 --- a/external/GoUI +++ b/external/GoUI @@ -1 +1 @@ -Subproject commit 4acfc0911a8864c517cb23712c76cddcbc561e69 +Subproject commit 54d1229c9f12ee0edf65774a3335bff70ff78a84 diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 0000000..c46bd58 --- /dev/null +++ b/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; } diff --git a/public/js/Go.js b/public/js/Go.js index a33d625..867caba 100644 --- a/public/js/Go.js +++ b/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) { diff --git a/public/scss/main.scss b/public/scss/main.scss new file mode 100644 index 0000000..b37a2e0 --- /dev/null +++ b/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; + } +} diff --git a/src/Go/views/game.ecr b/src/Go/views/game.ecr index 08eb053..816e39e 100644 --- a/src/Go/views/game.ecr +++ b/src/Go/views/game.ecr @@ -1,4 +1,4 @@ -
+
-player">