refactor: Move shared preloaded js and css into web-shared

3 files changed, 4 insertions, 145 deletions

diff --git a/apps/projects/src/_assets/preload.css b/apps/projects/src/_assets/preload.css
new file mode 120000
index 0000000..e248c5b
--- /dev/null
+++ b/apps/projects/src/_assets/preload.css
@@ -0,0 +1 @@
+/Users/ivarlovlie/i2r/greatoffice/apps/web-shared/src/assets/preload.css
\ No newline at end of file
diff --git a/apps/projects/src/_assets/preload.js b/apps/projects/src/_assets/preload.js
new file mode 120000
index 0000000..3fa1cc7
--- /dev/null
+++ b/apps/projects/src/_assets/preload.js
@@ -0,0 +1 @@
+/Users/ivarlovlie/i2r/greatoffice/apps/web-shared/src/assets/preload.js
\ No newline at end of file
diff --git a/apps/projects/src/index.html b/apps/projects/src/index.html
index f3d1e0b..80eab63 100644
--- a/apps/projects/src/index.html
+++ b/apps/projects/src/index.html
@@ -25,151 +25,8 @@
           content="#da532c">
     <link rel="icon"
           href="./_assets/pwa/favicon.svg">
-    <script>
-		const value = `; ${document.cookie}`;
-		const parts = value.split(`; go_theme=`);
-		let currentTheme = "system";
-		if (parts.length === 2) {
-			currentTheme = parts.pop().split(";").shift();
-		}
-		if (currentTheme === "light") {
-			document.querySelector("html").dataset.theme = "light";
-		} else if (currentTheme === "dark") {
-			document.querySelector("html").dataset.theme = "dark";
-		} else {
-			document.querySelector("html").dataset.theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-		}
-    </script>
-    <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>
+    <link rel="stylesheet" href="./_assets/preload.css">
+    <script src="./_assets/preload.js"></script>
     <title>Projects - Greatoffice</title>
 </head>