paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit 60cabf53788c4bb16d59624e2bb6ff3e4fab3be8
parent bfe591e744be2dd45f1e75c77982f181205e19bb
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Fri, 31 Jan 2020 18:05:00 -0500

Make initiative roller accessible

Diffstat:
Mpages/projects/dnd/initiative.md | 4++--
Mpages/projects/dnd/roll.md | 2+-
Mstyle/initiative.css | 86+++++++++++++++++++++----------------------------------------------------------
3 files changed, 26 insertions(+), 66 deletions(-)

diff --git a/pages/projects/dnd/initiative.md b/pages/projects/dnd/initiative.md @@ -23,8 +23,8 @@ lowest initiative value.</p> <div id="add-char"> <form> - <input id="char-name" type="text" placeholder="Character Name"/> - <input id="init-val" type="number" placeholder="0"/> + <input id="char-name" type="text" placeholder="Character Name" arial-label="Character Name"/> + <input id="init-val" type="number" placeholder="0" aria-label="Initiative Value"/> </form> <button onClick=addChar()>Add Character</button> </div> diff --git a/pages/projects/dnd/roll.md b/pages/projects/dnd/roll.md @@ -2,7 +2,7 @@ [//]: # "A super simple dice roller for Dungeons and Dragons with every die from the d4 to the d20 to the dX." -[//]: # "main.min.css roll.css" +[//]: # "main.min.css roll.min.css" [//]: # diff --git a/style/initiative.css b/style/initiative.css @@ -1,13 +1,12 @@ .initiative-list { - width: 60%; + width: 100%; padding: 1em 0 1em 0; } .initiative-div { border-radius: 20px; - background-color: #585858; - margin-top: 10px; - padding-bottom: 3px; + background-color: var(--input-bg); + margin-bottom: 0.5em; } .initiative-div > * { @@ -17,91 +16,52 @@ .in-name { font-weight: bold; width: 50%; - margin-right: 5px; + padding-left: 1em; } .in-val { - margin-right: 15px; + margin-right: 1em; text-align: center; font-weight: bold; - position: relative; - float: right; - left: -200px; - width: 40px; + width: 10%; } .in-rem-btn, .in-edit-btn { border-radius: 30px; - position: relative; - float: right; -} - -.in-rem-btn { - left: 110px; - top: 15px; -} - -.in-edit-btn { - left: -70px; - top: 15px; + margin-right: 2em; } .red-x { - color: darkred; + color: var(--unvis-link); } .green-pencil { - color: green; + color: var(--vis-link); } #add-char > * { display: inline-block; } -/* Ensure proper scaling with differently-sized displays */ -@media all and (max-width: 900px) { - .initiative-list { - width: 90%; - } - .in-name { - width: 100%; - text-align: center; - } - .in-edit-btn, .in-rem-btn { - height: 40px; - } - .in-rem-btn { - left: 50px; - top: 0px; - width: 110px; +@media all and (prefers-color-scheme: light) { + .initiative-div { + background-color: var(--input-bg-light); } - .in-edit-btn { - left: -140px; - top: 0px; - width: 70px; - } - .in-val { - left: 20px; - bottom: 7px; - width: 10%; - float: none; - text-decoration: underline; + + .red-x { + color: var(--unvis-link-light); } - #add-char>button, #add-char>*>* { - height: 30px; + + .green-pencil { + color: var(--vis-link-light); } } -@media all and (max-width: 550px) { - #add-char>button, #add-char>*>* { - margin-top: 0.5em; - margin-left: 20%; - } - #add-char>button { - height: 40px; - margin-left: 30%; +@media only screen and (max-width: 750px) { + .in-edit-btn { + margin: 1em 1em 1em 4em; } - #init-val { - margin-left: 22%; + .in-rem-btn { + margin: 1em; } }