diff options
| author | David Vazgenovich Shakaryan <dvshakaryan@gmail.com> | 2022-05-11 00:49:19 -0700 |
|---|---|---|
| committer | David Vazgenovich Shakaryan <dvshakaryan@gmail.com> | 2022-05-11 00:49:19 -0700 |
| commit | d0a2eaecd6c1ef61fbb841d726c183923b903f0c (patch) | |
| tree | bfb0c820b6485bee11bab6cabc23907226c63ce6 /web/static | |
| parent | 1980400a619104bdd15b49fcca42ebd0da0da7be (diff) | |
| download | dartboat-d0a2eaecd6c1ef61fbb841d726c183923b903f0c.tar.gz dartboat-d0a2eaecd6c1ef61fbb841d726c183923b903f0c.tar.xz | |
web: add prettier icons
The icons come from the lovely people at Bootstrap, who've shared them
under a permissive licence. To avoid loading a large file consisting
almost entirely of icons we'll never display, I've generated the icon
font myself, limiting it to only the glyphs we use.
Diffstat (limited to 'web/static')
| -rw-r--r-- | web/static/dartboat.js | 2 | ||||
| -rw-r--r-- | web/static/icons.woff2 | bin | 0 -> 1124 bytes | |||
| -rw-r--r-- | web/static/index.html | 4 | ||||
| -rw-r--r-- | web/static/style.css | 18 |
4 files changed, 19 insertions, 5 deletions
diff --git a/web/static/dartboat.js b/web/static/dartboat.js index ace2900..f2593f7 100644 --- a/web/static/dartboat.js +++ b/web/static/dartboat.js @@ -144,7 +144,7 @@ function boatAfloat() { function flipControls(store_opt = true) { const enabled = $('#main').classList.toggle('controls-on-right'); - $('#flip-controls-button').textContent = enabled ? '\u2190' : '\u2192'; + $('#flip-controls-button').textContent = enabled ? '\uf1c2' : '\uf1c3'; if (store_opt) localStorage.setItem('dartboat_controls_on_right', enabled); } diff --git a/web/static/icons.woff2 b/web/static/icons.woff2 Binary files differnew file mode 100644 index 0000000..5dd9215 --- /dev/null +++ b/web/static/icons.woff2 diff --git a/web/static/index.html b/web/static/index.html index 1e5b9a5..7aa2b73 100644 --- a/web/static/index.html +++ b/web/static/index.html @@ -14,8 +14,8 @@ <div>dartboat™</div> <div class="input first"><span>delay</span><input id="delay" data-opt="delay" maxlength="4" value=""></div> <div class="input"><span>stdev</span><input id="stdev" data-opt="stdev" maxlength="4" value=""></div> - <div class="button" id="flip-controls-button">→</div> - <div class="button" data-modal="help-modal">?</div> + <div class="button icon" id="flip-controls-button"></div> + <div class="button icon" data-modal="help-modal"></div> </div> <div id="info"> <div id="oi">oi!</div> diff --git a/web/static/style.css b/web/static/style.css index f501429..cec45ba 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -1,5 +1,10 @@ @import url('https://fonts.googleapis.com/css2?family=Inter&family=Lato:wght@400;700&family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400&display=swap'); +@font-face { + font-family: 'icons'; + src: url('icons.woff2') format('woff2'); +} + html { height: 100vh; } @@ -48,6 +53,10 @@ body { } } +.icon { + font-family: icons; +} + /* titlebar */ #titlebar { @@ -97,7 +106,11 @@ body { background-color: #3d2466; font-weight: 700; - padding: 0 0.4em; + height: 100%; + padding: 0em 0.2em; + + display: flex; + align-items: center; } @media (hover: hover) and (pointer: fine) { @@ -430,7 +443,8 @@ body { #visits .p100 { color: #78c018; } #visits .p140 { color: #20e018; } #visits .p180 { color: #20e018; font-weight: bold; } -#visits .throws-first { color: #aaa; } +#visits .throws-first { color: #999; } +#visits .throws-first:before { content: '\f151'; font-size: 0.75em; } #visits .visit-p1-name { grid-column: 1 / span 2; } #visits .visit-p2-name { grid-column: 4 / span 2; } #visits .visit-p1-pts { grid-column: 1; } |