add additional styling to menu, begin making layout responsive

This commit is contained in:
Sorrel Bri 2019-08-06 11:51:01 -07:00
parent dcc21638e8
commit da8d360a5f
2 changed files with 42 additions and 13 deletions

View file

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css?family=La+Belle+Aurore|Raleway:300&display=swap'); @import url('https://fonts.googleapis.com/css?family=La+Belle+Aurore|Raleway:300,600');
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -22,20 +22,21 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
visibility: hidden; visibility: hidden;
overflow-y: scroll;
} }
#menu { #menu {
background-color: rgb(250, 2250, 255, 0.9); background-color: rgb(250, 2250, 255, 0.9);
padding: 1vmin; padding: 1vmin;
display: grid; display: grid;
grid-template-columns: 60vw; grid-template-columns: 80vw;
grid-template-rows: auto auto 60vw auto; grid-template-rows: auto auto 80vw auto;
grid-template-areas: grid-template-areas:
"meta" "meta"
"player" "player"
"record" "record"
"submit"; "submit";
font: 18px 'La Belle Aurore', cursive; font: 14px 'La Belle Aurore', cursive;
} }
#menu .menu-subblock { #menu .menu-subblock {
@ -52,27 +53,39 @@ body {
.menu-heading, content, #instructions, div[data-player-meta] label { .menu-heading, content, #instructions, div[data-player-meta] label {
font-family: 'Raleway', sans-serif; font-family: 'Raleway', sans-serif;
font-weight: 300;
}
h4.menu-heading {
font-weight: 600;
margin: 1em .25em 0 .25em;
font-size: 110%;
} }
#player-meta { #player-meta {
grid-area: player; grid-area: player;
display: flex; display: flex;
justify-items: stretch; justify-items: stretch;
flex-direction: column;
} }
div[data-player-meta] { div[data-player-meta] {
width: 30vw;
justify-self: stretch;
}
div[data-player-meta] input[type="text"] {
width: 100%; width: 100%;
justify-self: stretch; justify-self: stretch;
} }
div[data-player-meta] input[type="text"] {
width: 90%;
justify-self: stretch;
}
div[data-player-meta] input {
margin: 1vmin;
}
div[data-player-meta] label { div[data-player-meta] label {
margin: .25em; margin: .25em;
font-size: 14px; font-size: 100%;
} }
#game-record-space { #game-record-space {
@ -108,7 +121,7 @@ height: 100%
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-inner-spin-button,
input[type=number]:focus input[type=number]:focus
{ {
width: 15%;
} }
.rank-tick { .rank-tick {
@ -325,3 +338,16 @@ td .dot .seki {
} }
@media only screen and (min-width: 560px) {
#player-meta {
flex-direction: row;
}
div[data-player-meta] {
width: 50%;
}
#menu {
grid-template-columns: 60vw;
grid-template-rows: auto auto 60vw auto;
font-size: 14px;
}
}

View file

@ -76,7 +76,7 @@
<div data-player-meta="white"> <div data-player-meta="white">
<h4 class="menu-heading">White</h4> <h4 class="menu-heading">White</h4>
<span class="menu-heading">Name:</span><input type="text" name="white-name"> <span class="menu-heading">Name:</span><input type="text" name="white-name">
<span class="menu-heading">Rank:</span><input type="text" name="white-rank"> <span class="menu-heading">Rank:</span><input type="number" name="white-rank">
<input type="checkbox" name="white-rank-certain"><label for="white-rank-certain">Rank Certainty</label> <input type="checkbox" name="white-rank-certain"><label for="white-rank-certain">Rank Certainty</label>
</div> </div>
</div> </div>
@ -84,7 +84,10 @@
<p id="instructions">Welcome to Browser Go!<br><br>If this is your first time playing Go, please see <p id="instructions">Welcome to Browser Go!<br><br>If this is your first time playing Go, please see
<a href="https://www.youtube.com/watch?v=gECcsSeRcNo" target="_blank">this great tutorial video.</a><br><br> <a href="https://www.youtube.com/watch?v=gECcsSeRcNo" target="_blank">this great tutorial video.</a><br><br>
To begin a game enter player names and ranks above, then click "Suggest Komi" Browser Go will calculate the appropriate komi based on AGA guidelines. To begin a game enter player names and ranks above, then click "Suggest Komi" Browser Go will calculate the appropriate komi based on AGA guidelines.
To override Browser Go's suggestion, use the sliders above. Be sure to check the 'rank certainty' box if you're club-rated.<br><br>For now, Browser Go only supports games on a small board. To override Browser Go's suggestion, use the sliders above. Be sure to check the 'rank certainty' box if you're club-rated.<br><br>
When the game begins, click on a legal point on the board to make a move. The active player's bowl will be highlighted. To pass, click on your bowl.
This will only be possible on your turn. To resign click on your capture tray. To view the game record or adjust player settings, click the kifu on black's side.<br><br>
For now, Browser Go only supports games on a small board.
I've got great things planned for the future, though! Lookout for new releases on <a href="https://github.com/sorrelbri/browser-go">the GitHub page!</a></p> I've got great things planned for the future, though! Lookout for new releases on <a href="https://github.com/sorrelbri/browser-go">the GitHub page!</a></p>
<p id="game-record"></p> <p id="game-record"></p>
</div> </div>