From 7eab8eb71e0b66bdc0c18f777146dafd2e2ebf1d Mon Sep 17 00:00:00 2001 From: clairecahill <32204534+clairecahill@users.noreply.github.com> Date: Mon, 11 Jun 2018 19:56:25 -0700 Subject: [PATCH] Claire's changes, add styling, backgrounds, and rules page --- public/css/main.css | 238 ++++++++++++++++++++++++------------ public/scss/main.scss | 65 +++++++++- src/Go/views/base.ecr | 5 +- src/Go/views/go-example.jpg | Bin 0 -> 18876 bytes src/Go/views/grid.jpg | Bin 0 -> 55834 bytes src/Go/views/index.ecr | 62 ++++++---- src/Go/views/rules.html | 24 ++++ 7 files changed, 285 insertions(+), 109 deletions(-) create mode 100644 src/Go/views/go-example.jpg create mode 100644 src/Go/views/grid.jpg create mode 100644 src/Go/views/rules.html diff --git a/public/css/main.css b/public/css/main.css index 8f29cab..4dfa801 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -1,115 +1,199 @@ h1, h2, h3, h4, h5, h6 { - font-family: "Indie Flower", serif; - text-align: center; } + font-family: "Comfortaa", serif; + text-align: center; +} h1 { - font-size: 5em; - margin: 0px; } + font-family: "Bangers", serif; + font-size: 7em; + color: darkred; + display: inline; + margin: 0px 45%; + background: white; + padding: 2px 17px 2px 8px; + border-radius: 15px; +} body { - font-family: "Raleway", sans-serif; + font-family: "Comfortaa", sans-serif; margin: 0px; - background-color: #f4f4f4; } + background-color: #f4f4f4; +} + +.rules-body { + background-image: url(../../src/Go/views/grid.jpg); +} + +.rules-title { + font-family: "Bangers", serif; + font-size: 66px; + color: darkred; + display: inline; + border-radius: 20px; + line-height: 115px; + padding: 10px; + background-color: white; + margin-left: 35%; +} .content-wrapper { max-width: 750px; - margin: auto; } + margin: auto; +} + +ul.rules-list { + background-color: #f4f4f4; + padding: 26px; + border-radius: 15px; + margin: 0px 25px; +} + +li.rule { + padding: 3px; + font-size: 18px; +} + +ul.game-instructions { + display: flex; +} + +li#welcome { + padding: 0px 10px 0px 5px; + border-left: solid tomato; + text-align: center; + list-style: none; +} + +div.top-bar { + background-image: url(../../src/Go/views/grid.jpg); + line-height: 135px; +} .board { background-color: tomato; padding: 20px; max-width: 500px; margin: auto; - border-radius: 10px; } + border-radius: 10px; +} .black-player .board-cell:hover .overlay { - background-color: black; } + background-color: black; +} .white-player .board-cell:hover .overlay { - background-color: white; } + 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%; } + padding: 5.5555555556%; +} +.board-cell .overlay { + position: absolute; + box-sizing: border-box; + top: 10%; + left: 10%; + width: 80%; + height: 80%; + border-radius: 50%; + transition: background-color 0.25s; +} +.board-cell.small { + padding: 5.5555555556%; +} +.board-cell.medium { + padding: 3.8461538462%; +} +.board-cell.large { + padding: 2.6315789474%; +} .black-cell .overlay { - background-color: black; } + background-color: black; +} .white-cell .overlay { - background-color: white; } + background-color: white; +} .split-wrapper { display: flex; - width: 100%; } - @media screen and (max-width: 640px) { - .split-wrapper { - flex-direction: column; } } + width: 100%; +} +@media screen and (max-width: 640px) { + .split-wrapper { + flex-direction: column; + } +} .split-item { flex-grow: 1; - box-sizing: border-box; } + box-sizing: border-box; + border: solid tomato 1px; + border-radius: 22px; + background-color: white; + margin: 0px 10px; +} .split-wrapper form { display: flex; flex-direction: column; align-items: center; - padding: 10px; } - .split-wrapper form input { - margin-top: 20px; - padding: 5px; - padding-left: 10px; - padding-right: 10px; - border: none; - outline: none; - width: 100%; - max-width: 300px; } - .split-wrapper form input[type="radio"] { - opacity: 0; - width: 0px; - height: 0px; } - .split-wrapper form input[type="radio"]:checked ~ label { - color: tomato; - transition: color .25s; } - .split-wrapper form input[type="submit"] { - padding: 10px; - background-color: tomato; - color: white; } - .split-wrapper form input[type="submit"]:focus, .split-wrapper form input[type="submit"]:hover { - background-color: inherit; - color: tomato; - transition: background-color .25s, color .25s; } - .split-wrapper form input[type="text"] { - background-color: inherit; - border-bottom: solid tomato; - border-width: 2px; - height: 3em; - box-sizing: border-box; - display: block; } - .split-wrapper form input[type="text"]:focus { - border-width: 3px; - transition: background-color .25s, border-width .25s; } - .split-wrapper form .radio-parent { - display: flex; - margin-top: 20px; - width: 100%; - max-width: 300px; } - .split-wrapper form .radio-wrapper { - flex-grow: 1; - display: inline-block; - text-align: center; } + padding: 10px; +} +.split-wrapper form input { + margin-top: 20px; + padding: 5px; + padding-left: 10px; + padding-right: 10px; + border: none; + outline: none; + width: 100%; + max-width: 300px; +} +.split-wrapper form input[type=radio] { + opacity: 0; + width: 0px; + height: 0px; +} +.split-wrapper form input[type=radio]:checked ~ label { + color: tomato; + transition: color 0.25s; +} +.split-wrapper form input[type=submit] { + padding: 10px; + background-color: tomato; + color: white; +} +.split-wrapper form input[type=submit]:focus, .split-wrapper form input[type=submit]:hover { + background-color: inherit; + color: tomato; + transition: background-color 0.25s, color 0.25s scale 1.3; +} +.split-wrapper form input[type=text] { + background-color: inherit; + border-bottom: solid tomato; + border-width: 2px; + height: 3em; + box-sizing: border-box; + display: block; +} +.split-wrapper form input[type=text]:focus { + border-width: 3px; + transition: background-color 0.25s, border-width 0.25s; +} +.split-wrapper form .radio-parent { + display: flex; + margin-top: 20px; + width: 100%; + max-width: 300px; +} +.split-wrapper form .radio-wrapper { + flex-grow: 1; + display: inline-block; + text-align: center; +} + +/*# sourceMappingURL=public/css/main.css.map */ diff --git a/public/scss/main.scss b/public/scss/main.scss index 7ed5231..0fe764e 100644 --- a/public/scss/main.scss +++ b/public/scss/main.scss @@ -5,26 +5,79 @@ $background-grey: #f4f4f4; } h1, h2, h3, h4, h5, h6 { - font-family: "Indie Flower", serif; + font-family: "Comfortaa", serif; text-align: center; } h1 { - font-size: 5em; - margin: 0px; + font-family: "Bangers", serif; + font-size: 7em; + color:darkred; + display:inline; + margin: 0px 45%; + background: white; + padding: 2px 17px 2px 8px; + border-radius: 15px; } + + body { - font-family: "Raleway", sans-serif; + font-family: "Comfortaa", sans-serif; margin: 0px; background-color: $background-grey; } +.rules-body { + background-image: url(../../src/Go/views/grid.jpg); +} + +.rules-title { + font-family: "Bangers", serif; + font-size: 66px; + color: darkred; + display: inline; + border-radius: 20px; + line-height: 115px; + padding: 10px; + background-color: white; + margin-left: 35%; + } + .content-wrapper { max-width: 750px; margin: auto; } +ul.rules-list { + background-color: $background-grey; + padding: 26px; + border-radius: 15px; + margin: 0px 25px; + } + +li.rule { + padding: 3px; + font-size: 18px; +} + +ul.game-instructions { + display: flex; +} + + +li#welcome { + padding: 0px 10px 0px 5px; + border-left: solid tomato; + text-align: center; + list-style: none; +} + +div.top-bar { + background-image: url(../../src/Go/views/grid.jpg); + line-height: 135px; +} + .board { background-color: tomato; padding: 20px; @@ -97,6 +150,10 @@ body { .split-item { flex-grow: 1; box-sizing: border-box; + border: solid tomato 1px; + border-radius: 22px; + background-color: white; + margin: 0px 10px; } .split-wrapper form { diff --git a/src/Go/views/base.ecr b/src/Go/views/base.ecr index e1c7898..743ed69 100644 --- a/src/Go/views/base.ecr +++ b/src/Go/views/base.ecr @@ -3,10 +3,13 @@ +
-

Go

+
+

+
  • Welcome to our simulation of Go!
  • +
  • Defeat your opponent by earning more territory.
  • +
  • "Capture" dots of the opposite color by surrounding them.
  • +
  • Create a game by filling out the fields below, giving the next player a password in "Their password."
  • +
  • Join a game by entering the corresponding session name and password.
  • +
  • Additional rules are found here.
  • +
    -
    -

    Create Game

    -
    - - - -
    -
    - - -
    -
    - - -
    -
    - -
    -
    -
    -

    Join Game

    -
    - - - -
    -
    +
    +

    Create Game

    +
    + + + +
    +
    + + +
    +
    + + +
    +
    + +
    +
    +
    +

    Join Game

    +
    + + + +
    +
    diff --git a/src/Go/views/rules.html b/src/Go/views/rules.html new file mode 100644 index 0000000..38ebb14 --- /dev/null +++ b/src/Go/views/rules.html @@ -0,0 +1,24 @@ + + + + + + +

    Rules of Go

    + + +