diff --git a/index.html b/index.html index a48af6a..9cb2796 100644 --- a/index.html +++ b/index.html @@ -124,12 +124,51 @@ } } + * { + scrollbar-width: thin; + scrollbar-color: var(--background-hover) transparent; + } + + *::-webkit-scrollbar { + width: 1.2rem; + } + + *::-webkit-scrollbar-track { + background: transparent; + } + + *::-webkit-scrollbar-thumb { + background-color: var(--background-light); + border-radius: 2rem; + transition: background 1s ease-in; + } + + *:hover::-webkit-scrollbar-thumb { + background-color: var(--background-hover); + } + + *::-webkit-scrollbar-button { + display: none; + } + html, body { background-color: var(--background-dark); height: 100%; width: 100%; margin: 0; padding: 0; + overscroll-behavior: none; + } + + html { + font-size: 62.5%; + } + + body { + font-family: Raleway, sans-serif; + color: var(--text-base); + text-shadow: 0.1rem 0.1rem #000000; + letter-spacing: 0.02rem; } noscript { diff --git a/src/scss/style.scss b/src/scss/style.scss index 40020d7..01a6f01 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -30,16 +30,6 @@ } } -@keyframes fade { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} - @font-face { font-family: 'Raleway'; font-style: normal; @@ -49,50 +39,6 @@ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } -* { - scrollbar-width: thin; - scrollbar-color: var(--background-hover) transparent; -} - -*::-webkit-scrollbar { - width: 1.2rem; -} - -*::-webkit-scrollbar-track { - background: transparent; -} - -*::-webkit-scrollbar-thumb { - background-color: var(--background-light); - border-radius: 2rem; - transition: background 1s ease-in; -} - -*:hover::-webkit-scrollbar-thumb { - background-color: var(--background-hover); -} - -*::-webkit-scrollbar-button { - display: none; -} - -html { - font-size: 62.5%; -} - -body { - font-family: Raleway, sans-serif; - color: var(--text-base); - text-shadow: 0.1rem 0.1rem #000000; - letter-spacing: 0.02rem; -} - -html, body { - background-color: var(--background-dark); - height: 100%; - overscroll-behavior: none; -} - h1, h2, h3, h4, h5, h6 { font-weight: normal; margin-top: 0; @@ -193,10 +139,6 @@ input { } } -#app { - height: 100%; -} - #app .map .tile img, img { image-rendering: pixelated; }