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/projects/src/index.html | 136 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 132 insertions(+), 4 deletions(-)

(limited to 'apps/projects/src/index.html')

diff --git a/apps/projects/src/index.html b/apps/projects/src/index.html
index 22dba4f..f3d1e0b 100644
--- a/apps/projects/src/index.html
+++ b/apps/projects/src/index.html
@@ -40,9 +40,137 @@
 			document.querySelector("html").dataset.theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 		}
     </script>
-    <link rel="stylesheet"
-          href="./_assets/pre.css">
-    <title>Time Tracker</title>
+    <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>
+    <title>Projects - Greatoffice</title>
 </head>
 
 <body>
@@ -54,7 +182,7 @@
 <div class="fill-loader fill-loader--v4"
      id="loader"
      role="alert">
-    <p class="fill-loader__label">Loading Time Tracker...</p>
+    <p class="fill-loader__label">Loading Projects...</p>
     <div aria-hidden="true">
         <div class="fill-loader__base"></div>
         <div class="fill-loader__fill"></div>
-- 
cgit v1.3