diff --git a/css/style.css b/css/style.css index 0b83a89..3d5827d 100644 --- a/css/style.css +++ b/css/style.css @@ -1,13 +1,137 @@ -@media (prefers-color-scheme: dark) { - body { - background: rgb(18, 18, 18); - color: rgb(240, 240, 240); +@media (prefers-color-scheme: light) { + :root { + --bg: #f0f0f0; + --font-color: #121212; } } -@media (prefers-color-scheme: light) { - body { - background: rgb(240, 240, 240); - color: rgb(18, 18, 18); +@media (prefers-color-scheme: dark) { + :root { + --bg: #121212; + --font-color: #f0f0f0; + } +} + +body { + background: var(--bg); + color: var(--font-color); +} + +/* Center */ +h1, +p { + text-align: center; + font-family: Arial, Helvetica, sans-serif; +} + +#center { + display: flex; + justify-content: center; + height: 50vh; +} + +/* Loading spinner */ +#load { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} + +#load div { + animation: roll 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + transform-origin: 40px 40px; +} + +#load div:after { + content: " "; + display: block; + position: absolute; + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--font-color); + margin: -4px 0 0 -4px; +} + +#load div:nth-child(1) { + animation-delay: -0.036s; +} + +#load div:nth-child(1):after { + top: 63px; + left: 63px; +} + +#load div:nth-child(2) { + animation-delay: -0.072s; +} + +#load div:nth-child(2):after { + top: 68px; + left: 56px; +} + +#load div:nth-child(3) { + animation-delay: -0.108s; +} + +#load div:nth-child(3):after { + top: 71px; + left: 48px; +} + +#load div:nth-child(4) { + animation-delay: -0.144s; +} + +#load div:nth-child(4):after { + top: 72px; + left: 40px; +} + +#load div:nth-child(5) { + animation-delay: -0.18s; +} + +#load div:nth-child(5):after { + top: 71px; + left: 32px; +} + +#load div:nth-child(6) { + animation-delay: -0.216s; +} + +#load div:nth-child(6):after { + top: 68px; + left: 24px; +} + +#load div:nth-child(7) { + animation-delay: -0.252s; +} + +#load div:nth-child(7):after { + top: 63px; + left: 17px; +} + +#load div:nth-child(8) { + animation-delay: -0.288s; +} + +#load div:nth-child(8):after { + top: 56px; + left: 12px; +} + +@keyframes roll { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); } } diff --git a/pages/index.html b/pages/index.html index 86064a8..90793c0 100644 --- a/pages/index.html +++ b/pages/index.html @@ -18,6 +18,20 @@