diff options
Diffstat (limited to 'apps/frontpage')
| -rw-r--r-- | apps/frontpage/src/app.html | 132 | ||||
| -rw-r--r-- | apps/frontpage/static/pre.css | 128 |
2 files changed, 130 insertions, 130 deletions
diff --git a/apps/frontpage/src/app.html b/apps/frontpage/src/app.html index e46fbe3..1c46682 100644 --- a/apps/frontpage/src/app.html +++ b/apps/frontpage/src/app.html @@ -4,8 +4,136 @@ <meta charset="utf-8"/> <link rel="icon" href="%sveltekit.assets%/favicon.png"/> - <link rel="stylesheet" - href="%sveltekit.assets%/pre.css"/> + <style> + :root { + --loader-primary: hsl(250, 84%, 54%); + --loader-accent: hsl(342, 89%, 48%); + --loader-contrast: hsl(180, 1%, 84%); + --loader-easing: cubic-bezier(0.645, 0.045, 0.355, 1); + } + + [data-theme="dark"] :root { + --loader-primary: hsl(250, 93%, 65%); + --loader-accent: hsl(342, 92%, 54%); + --loader-contrast: hsl(208, 12%, 24%); + --loader-easing: cubic-bezier(0.645, 0.045, 0.355, 1); + } + + [data-theme="dark"] { + background-color: hsl(203, 24%, 13%); + } + + .fill-loader { + position: relative; + overflow: hidden; + display: inline-block; + margin: 3rem; + } + + .fill-loader__fill { + position: absolute; + } + + @supports (-webkit-animation-name: this) or (animation-name: this) { + .fill-loader__label { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + } + } + + @supports (-webkit-animation-name: this) or (animation-name: this) { + .fill-loader--v4 { + width: 90%; + max-width: 300px; + } + + .fill-loader--v4 .fill-loader__base { + height: 4px; + background-color: var(--loader-contrast); + } + + .fill-loader--v4 .fill-loader__fill { + top: 0; + left: 0; + right: 0; + height: 100%; + background-color: var(--loader-primary); + -webkit-animation: fill-loader-4 1.6s infinite var(--loader-easing); + animation: fill-loader-4 1.6s infinite var(--loader-easing); + will-change: left, right; + } + } + + @-webkit-keyframes fill-loader-4 { + 0% { + left: 0; + right: 100%; + background-color: var(--loader-primary); + } + + 10%, + 60% { + left: 0; + } + + 40%, + 90% { + right: 0; + } + + 50% { + left: 100%; + background-color: var(--loader-primary); + } + + 51% { + left: 0; + right: 100%; + background-color: var(--loader-accent); + } + + 100% { + left: 100%; + background-color: var(--loader-accent); + } + } + + @keyframes fill-loader-4 { + 0% { + left: 0; + right: 100%; + background-color: var(--loader-primary); + } + + 10%, + 60% { + left: 0; + } + + 40%, + 90% { + right: 0; + } + + 50% { + left: 100%; + background-color: var(--loader-primary); + } + + 51% { + left: 0; + right: 100%; + background-color: var(--loader-accent); + } + + 100% { + left: 100%; + background-color: var(--loader-accent); + } + } + </style> <script> const value = `; ${document.cookie}`; const parts = value.split(`; go_theme=`); diff --git a/apps/frontpage/static/pre.css b/apps/frontpage/static/pre.css deleted file mode 100644 index 9c9446e..0000000 --- a/apps/frontpage/static/pre.css +++ /dev/null @@ -1,128 +0,0 @@ -:root { - --loader-primary: hsl(250, 84%, 54%); - --loader-accent: hsl(342, 89%, 48%); - --loader-contrast: hsl(180, 1%, 84%); - --loader-easing: cubic-bezier(0.645, 0.045, 0.355, 1); -} - -[data-theme="dark"] :root { - --loader-primary: hsl(250, 93%, 65%); - --loader-accent: hsl(342, 92%, 54%); - --loader-contrast: hsl(208, 12%, 24%); - --loader-easing: cubic-bezier(0.645, 0.045, 0.355, 1); -} - -[data-theme="dark"] { - background-color: hsl(203, 24%, 13%); -} - -.fill-loader { - position: relative; - overflow: hidden; - display: inline-block; - margin: 3rem; -} - -.fill-loader__fill { - position: absolute; -} - -@supports (-webkit-animation-name: this) or (animation-name: this) { - .fill-loader__label { - position: absolute; - clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); - } -} - -@supports (-webkit-animation-name: this) or (animation-name: this) { - .fill-loader--v4 { - width: 90%; - max-width: 300px; - } - - .fill-loader--v4 .fill-loader__base { - height: 4px; - background-color: var(--loader-contrast); - } - - .fill-loader--v4 .fill-loader__fill { - top: 0; - left: 0; - right: 0; - height: 100%; - background-color: var(--loader-primary); - -webkit-animation: fill-loader-4 1.6s infinite var(--loader-easing); - animation: fill-loader-4 1.6s infinite var(--loader-easing); - will-change: left, right; - } -} - -@-webkit-keyframes fill-loader-4 { - 0% { - left: 0; - right: 100%; - background-color: var(--loader-primary); - } - - 10%, - 60% { - left: 0; - } - - 40%, - 90% { - right: 0; - } - - 50% { - left: 100%; - background-color: var(--loader-primary); - } - - 51% { - left: 0; - right: 100%; - background-color: var(--loader-accent); - } - - 100% { - left: 100%; - background-color: var(--loader-accent); - } -} - -@keyframes fill-loader-4 { - 0% { - left: 0; - right: 100%; - background-color: var(--loader-primary); - } - - 10%, - 60% { - left: 0; - } - - 40%, - 90% { - right: 0; - } - - 50% { - left: 100%; - background-color: var(--loader-primary); - } - - 51% { - left: 0; - right: 100%; - background-color: var(--loader-accent); - } - - 100% { - left: 100%; - background-color: var(--loader-accent); - } -} |