From c479ef350b7ae5b3b9fd587698550f86bc2636cc Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
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/src/app.html | 132 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 130 insertions(+), 2 deletions(-)

(limited to 'apps/frontpage/src/app.html')

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=`);
-- 
cgit v1.3