From c479ef350b7ae5b3b9fd587698550f86bc2636cc Mon Sep 17 00:00:00 2001 From: ivarlovlie Date: Mon, 6 Jun 2022 16:28:59 +0200 Subject: refactor: Put pre.css inside of style tags so that we dont have to wait for the second request on pre.css to show the loader and theme --- apps/frontpage/static/pre.css | 128 ------------------------------------------ 1 file changed, 128 deletions(-) delete mode 100644 apps/frontpage/static/pre.css (limited to 'apps/frontpage/static') 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); - } -} -- cgit v1.3