From b7bdbbdc125c66127e3fcd1f6849e58d49664bef Mon Sep 17 00:00:00 2001 From: Danila Fedorin Date: Tue, 12 Jun 2018 20:50:07 -0700 Subject: [PATCH] Fix small mistakes, properly center GO. --- public/css/main.css | 201 +++++++----------- .../Go/views => public/images}/go-example.jpg | Bin {src/Go/views => public/images}/grid.jpg | Bin public/scss/css/main.css | 158 -------------- public/scss/main.scss | 17 +- src/Go/views/base.ecr | 4 +- src/Go/views/index.ecr | 2 +- 7 files changed, 90 insertions(+), 292 deletions(-) rename {src/Go/views => public/images}/go-example.jpg (100%) rename {src/Go/views => public/images}/grid.jpg (100%) delete mode 100644 public/scss/css/main.css diff --git a/public/css/main.css b/public/css/main.css index e805303..c7569c9 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -1,28 +1,26 @@ h1, h2, h3, h4, h5, h6 { font-family: "Comfortaa", serif; - text-align: center; -} + text-align: center; } h1 { font-family: "Bangers", serif; font-size: 7em; color: darkred; display: inline; - margin: 0px 45%; + margin: 0px; + margin-top: 10px; + margin-bottom: 10px; background: white; padding: 2px 17px 2px 8px; - border-radius: 15px; -} + border-radius: 15px; } body { font-family: "Comfortaa", sans-serif; margin: 0px; - background-color: #f4f4f4; -} + background-color: #f4f4f4; } .rules-body { - background-image: url(../../src/Go/views/grid.jpg); -} + background-image: url(/images/grid.jpg); } .rules-title { font-family: "Bangers", serif; @@ -33,85 +31,57 @@ body { line-height: 115px; padding: 10px; background-color: white; - margin-left: 35%; -} + 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; -} + margin: 0px 25px; } li.rule { padding: 3px; - font-size: 18px; -} + font-size: 18px; } ul.game-instructions { display: flex; -} + padding: 0px; } li#welcome { padding: 0px 10px 0px 5px; border-left: solid tomato; text-align: center; - list-style: none; -} + list-style: none; } + li#welcome:last-child { + border-right: solid tomato; } div.top-bar { - background-image: url(../../src/Go/views/grid.jpg); + background-image: url(/images/grid.jpg); line-height: 135px; -} + display: flex; + justify-content: center; } .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; -<<<<<<< HEAD - 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%; -} -======= - padding: 5.5555555556%; } + padding: 5.55556%; } .board-cell .overlay { position: absolute; box-sizing: border-box; @@ -122,30 +92,24 @@ div.top-bar { border-radius: 50%; transition: background-color .25s; } .board-cell.small { - padding: 5.5555555556%; } + padding: 5.55556%; } .board-cell.medium { - padding: 3.8461538462%; } + padding: 3.84615%; } .board-cell.large { - padding: 2.6315789474%; } ->>>>>>> 733c32748eb734f126d45e84e3609b04d4f1f023 + padding: 2.63158%; } .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; @@ -153,66 +117,53 @@ div.top-bar { border: solid tomato 1px; border-radius: 22px; background-color: white; - margin: 0px 10px; -} + 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 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 */ + 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; } diff --git a/src/Go/views/go-example.jpg b/public/images/go-example.jpg similarity index 100% rename from src/Go/views/go-example.jpg rename to public/images/go-example.jpg diff --git a/src/Go/views/grid.jpg b/public/images/grid.jpg similarity index 100% rename from src/Go/views/grid.jpg rename to public/images/grid.jpg diff --git a/public/scss/css/main.css b/public/scss/css/main.css deleted file mode 100644 index 7bfce3c..0000000 --- a/public/scss/css/main.css +++ /dev/null @@ -1,158 +0,0 @@ -h1, h2, h3, h4, h5, h6 { - font-family: "Comfortaa", serif; - text-align: center; -} - -h1 { - font-size: 5em; - margin: 0px; -} - -body { - font-family: "Comfortaa", sans-serif; - margin: 0px; - background-color: #f4f4f4; -} - -.content-wrapper { - max-width: 750px; - margin: auto; -} - -li { - list-style: none; -} - -ul.game-instructions { - display: flex; -} - -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; -} - -.black-player .board-cell:hover .overlay { - background-color: black; -} - -.white-player .board-cell:hover .overlay { - background-color: white; -} - -.board-cell { - display: inline-block; - position: relative; - 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; -} - -.white-cell .overlay { - background-color: white; -} - -.split-wrapper { - display: flex; - width: 100%; -} -@media screen and (max-width: 640px) { - .split-wrapper { - flex-direction: column; - } -} - -.split-item { - flex-grow: 1; - box-sizing: border-box; -} - -.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 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; -} -.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=css/main.css.map */ diff --git a/public/scss/main.scss b/public/scss/main.scss index 0fe764e..8911a84 100644 --- a/public/scss/main.scss +++ b/public/scss/main.scss @@ -14,14 +14,14 @@ h1 { font-size: 7em; color:darkred; display:inline; - margin: 0px 45%; + margin: 0px; + margin-top: 10px; + margin-bottom: 10px; background: white; padding: 2px 17px 2px 8px; border-radius: 15px; } - - body { font-family: "Comfortaa", sans-serif; margin: 0px; @@ -29,7 +29,7 @@ body { } .rules-body { - background-image: url(../../src/Go/views/grid.jpg); + background-image: url(/images/grid.jpg); } .rules-title { @@ -63,6 +63,7 @@ li.rule { ul.game-instructions { display: flex; + padding: 0px; } @@ -71,11 +72,17 @@ li#welcome { border-left: solid tomato; text-align: center; list-style: none; + + &:last-child { + border-right: solid tomato; + } } div.top-bar { - background-image: url(../../src/Go/views/grid.jpg); + background-image: url(/images/grid.jpg); line-height: 135px; + display: flex; + justify-content: center; } .board { diff --git a/src/Go/views/base.ecr b/src/Go/views/base.ecr index 743ed69..2785c15 100644 --- a/src/Go/views/base.ecr +++ b/src/Go/views/base.ecr @@ -7,9 +7,7 @@
-
-

GO

<%= content %>
diff --git a/src/Go/views/index.ecr b/src/Go/views/index.ecr index 020edb5..f5feab0 100644 --- a/src/Go/views/index.ecr +++ b/src/Go/views/index.ecr @@ -4,7 +4,7 @@
  • "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.
    • +
  • Additional rules are found here.