drawful

commit

3b0c265a6b8ab08cc5719836476379c574b17ebb

parent

7d01291708841c0405a066957b13964ecbbc7574

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2020-12-17 21:02

distinctive styling for options

Diffstat

2 files changed, 24 insertions, 2 deletions

diff --git a/index.html b/index.html

@@ -48,14 +48,14 @@
   48    48 	<form id="pick" hidden>
   49    49 		<img/>
   50    50 		<p>Which of the following words was the original?</p>
   51    -1 		<ul id="options"></ul>
   -1    51 		<ul id="options" class="options"></ul>
   52    52 		<button>Submit</button>
   53    53 		<p class="only-disabled">Waiting for other players to pick their answers.</p>
   54    54 	</form>
   55    55 
   56    56 	<form id="pick-host" hidden>
   57    57 		<p>The available answers for this image are:</p>
   58    -1 		<ul id="options-host"></ul>
   -1    58 		<ul id="options-host" class="list-inline"></ul>
   59    59 		<img/>
   60    60 		<p>Waiting for players to pick their answers.</p>
   61    61 		<p>You can click "continue" when everyone is done (or you don't want to wait any longer).</p>

diff --git a/style.css b/style.css

@@ -55,3 +55,25 @@ canvas {
   55    55 form.disabled .only-disabled {
   56    56 	display: block;
   57    57 }
   -1    58 
   -1    59 .options label {
   -1    60 	display: block;
   -1    61 	padding: 0.4em;
   -1    62 	border-radius: 0.3em;
   -1    63 	border: 1px solid silver;
   -1    64 	background: #eee;
   -1    65 	margin: 0 0 0.2em;
   -1    66 }
   -1    67 
   -1    68 .list-inline li {
   -1    69 	display: inline;
   -1    70 }
   -1    71 .list-inline li:not(:last-child)::after {
   -1    72 	content: ", "
   -1    73 }
   -1    74 
   -1    75 @media (min-width: 40em) {
   -1    76 	.options {
   -1    77 		columns: 2;
   -1    78 	}
   -1    79 }