From 511759156790ee737022d1da0bd09c81531fc128 Mon Sep 17 00:00:00 2001 From: Josh Creek Date: Tue, 25 Oct 2022 18:11:19 +0100 Subject: [PATCH] feat(#25): Improve max wheel size on smaller viewports --- .eslintrc.json | 3 +- src/index.ts | 2 + src/styles/buttons.scss | 82 +++++++++++++++++++ src/styles/main.scss | 177 ++-------------------------------------- src/styles/spinner.scss | 92 +++++++++++++++++++++ 5 files changed, 187 insertions(+), 169 deletions(-) create mode 100644 src/styles/buttons.scss create mode 100644 src/styles/spinner.scss diff --git a/.eslintrc.json b/.eslintrc.json index 41155d1..f81e888 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -27,6 +27,7 @@ "ts": "never", "tsx": "never" } - ] + ], + "quotes": [2, "single", { "avoidEscape": true }] } } diff --git a/src/index.ts b/src/index.ts index 6969978..cf8cf78 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,7 +12,9 @@ require('./assets/apple-touch-icon.png'); require('./assets/favicon-16x16.png'); require('./assets/favicon-32x32.png'); require('./styles/main.scss'); +require('./styles/buttons.scss'); require('./styles/modal.scss'); +require('./styles/spinner.scss'); const wheelSpinningSound = new Audio(spinnerMp3); const tadaSound = new Audio(tadaMp3); diff --git a/src/styles/buttons.scss b/src/styles/buttons.scss new file mode 100644 index 0000000..f32202d --- /dev/null +++ b/src/styles/buttons.scss @@ -0,0 +1,82 @@ +.button { + appearance: none; + border: 1px solid rgba(27, 31, 35, 0.15); + border-radius: 6px; + box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: inline-block; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, + sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + font-size: 14px; + font-weight: 600; + line-height: 20px; + padding: 6px 16px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: middle; + white-space: nowrap; +} + +.button:focus:not(:focus-visible):not(.focus-visible) { + box-shadow: none; + outline: none; +} + +.button:disabled { + border-color: rgba(27, 31, 35, 0.1); + color: rgba(255, 255, 255, 0.8); + cursor: default; +} + +.button:focus { + outline: none; +} + +.button-green { + background-color: #2ea44f; +} + +.button-green:hover { + background-color: #2c974b; +} + +.button-green:focus { + box-shadow: rgba(46, 164, 79, 0.4) 0 0 0 3px; + outline: none; +} + +.button-green:disabled { + background-color: #94d3a2; +} + +.button-green:active { + background-color: #298e46; + box-shadow: rgba(20, 70, 32, 0.2) 0 1px 0 inset; +} + +.button-black { + background-color: #423e37; +} + +.button-black:hover { + background-color: #2e2b26; +} + +.button-blue { + background-color: #388697; +} + +.button-blue:hover { + background-color: #275d69; +} + +.button-white { + background-color: #ffffff; + color: black; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 7cbfa32..a10540b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,4 +1,4 @@ -body { +body { margin: 0; font-family: Arial, sans-serif; } @@ -17,7 +17,7 @@ body { .topbar-container h1 { color: white; - font-family: 'Fuzzy Bubbles', cursive; + font-family: "Fuzzy Bubbles", cursive; font-weight: 700; margin-block-start: 0.2em; margin-block-end: 0.2em; @@ -81,70 +81,6 @@ body { order: 0; } -#input-lines { - max-width: 100%; -} - -#start-over { - position: absolute; - top: 100px; - left: auto; -} - -#mute { - position: absolute; - top: 140px; - left: auto; -} - -#spinner-container { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: flex-start; - align-content: center; -} - -.spinner-items:nth-child(1) { - display: block; - flex-grow: 0; - flex-shrink: 1; - flex-basis: 800px; - align-self: auto; - order: 0; -} - -.spinner-items:nth-child(2) { - display: block; - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - align-self: auto; - order: 0; - width: 100%; -} - -text{ - font-family: Arial, sans-serif; - font-size:35px; - pointer-events:none; -} -#chart{ - max-width:800px; - margin-left: auto; - margin-right: auto; -} - -#selection h1{ - font-size: 50px; - font-weight: bold; - font-family: Arial, sans-serif; - -webkit-transform:translate(0,-50%); - transform:translate(0,-50%); - text-align: center; -} - #install-app-btn-container { display: none; } @@ -155,23 +91,25 @@ text{ bottom: 0; width: 100%; text-align: center; - color: #423E37; + color: #423e37; padding-bottom: 10px; background-color: white; } .footer-container hr { max-width: 500px; - border-top: 0.5px solid #423E37; + border-top: 0.5px solid #423e37; margin-left: auto; margin-right: auto; } -.footer-container a, #privacy-container a { - color: #423E37; +.footer-container a, +#privacy-container a { + color: #423e37; } -.footer-container a:hover, #privacy-container a:hover { +.footer-container a:hover, +#privacy-container a:hover { color: #81796c; } @@ -181,100 +119,3 @@ text{ max-width: 800px; margin-bottom: 50px; } - -#fireworks-container { - display: none; - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; -} - -#image{ - width: 100%; -} - -/* Buttons */ - -.button { - appearance: none; - border: 1px solid rgba(27, 31, 35, .15); - border-radius: 6px; - box-shadow: rgba(27, 31, 35, .1) 0 1px 0; - box-sizing: border-box; - color: #fff; - cursor: pointer; - display: inline-block; - font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; - font-size: 14px; - font-weight: 600; - line-height: 20px; - padding: 6px 16px; - position: relative; - text-align: center; - text-decoration: none; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; - vertical-align: middle; - white-space: nowrap; -} - -.button:focus:not(:focus-visible):not(.focus-visible) { - box-shadow: none; - outline: none; -} - -.button:disabled { - border-color: rgba(27, 31, 35, .1); - color: rgba(255, 255, 255, .8); - cursor: default; -} - -.button:focus { - outline: none; -} - -.button-green { - background-color: #2ea44f; -} - -.button-green:hover { - background-color: #2c974b; -} - -.button-green:focus { - box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px; - outline: none; -} - -.button-green:disabled { - background-color: #94d3a2; -} - -.button-green:active { - background-color: #298e46; - box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset; -} - -.button-black { - background-color: #423E37; -} - -.button-black:hover { - background-color: #2e2b26; -} - -.button-blue { - background-color: #388697; -} - -.button-blue:hover { - background-color: #275d69; -} - -.button-white { - background-color: #FFFFFF; - color: black; -} \ No newline at end of file diff --git a/src/styles/spinner.scss b/src/styles/spinner.scss new file mode 100644 index 0000000..bfccf93 --- /dev/null +++ b/src/styles/spinner.scss @@ -0,0 +1,92 @@ +#input-lines { + max-width: 100%; +} + +#start-over { + position: absolute; + top: 100px; + left: auto; +} + +#mute { + position: absolute; + top: 140px; + left: auto; +} + +#spinner-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; + align-content: center; +} + +.spinner-items:nth-child(1) { + display: block; + flex-grow: 0; + flex-shrink: 1; + flex-basis: 800px; + align-self: auto; + order: 0; +} + +@media screen and ( max-height: 920px ) +{ + .spinner-items:nth-child(1){ + flex-basis: 650px; + flex-grow: 0; + } +} + +.spinner-items:nth-child(2) { + display: block; + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + align-self: auto; + order: 0; + width: 100%; +} + +text { + font-family: Arial, sans-serif; + font-size: 35px; + pointer-events: none; +} + +#chart { + max-width: calc(50%); + margin-left: auto; + margin-right: auto; +} + +@media screen and ( min-width: 800px ) and ( max-height: 800px ) +{ + #chart{ + max-width: 650px; + } +} + +#selection h1 { + font-size: 50px; + font-weight: bold; + font-family: Arial, sans-serif; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); + text-align: center; +} + +#fireworks-container { + display: none; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; +} + +#image { + width: 100%; +}