From 9d98e02b29f7459134e14dfe51b48fb62924cacd Mon Sep 17 00:00:00 2001
From: Owen Ryan <owen@owenryan.us>
Date: Wed, 25 Sep 2024 02:21:56 +0100
Subject: [PATCH] Replace landingpage.js with raw css

---
 source/_sass/style.sass      | 15 +++++++++++++++
 source/assets/landingpage.js | 13 -------------
 source/assets/landingpage.ts | 15 ---------------
 3 files changed, 15 insertions(+), 28 deletions(-)
 delete mode 100644 source/assets/landingpage.js
 delete mode 100644 source/assets/landingpage.ts

diff --git a/source/_sass/style.sass b/source/_sass/style.sass
index 20c3d60..c765c3c 100644
--- a/source/_sass/style.sass
+++ b/source/_sass/style.sass
@@ -25,3 +25,18 @@
   list-style-type: none
   padding-left: 2em
   text-indent: -1.25em
+
+
+#rotating-gradient
+  background: linear-gradient(15deg, #1E1F46, #404040)
+  animation: 5s linear infinite gradient
+  position: relative
+  background-size: 200% 200%
+
+@keyframes gradient
+  0%
+    background-position: 0 50%
+  50%
+    background-position: 100% 50%
+  100%
+    background-position: 0 50%
\ No newline at end of file
diff --git a/source/assets/landingpage.js b/source/assets/landingpage.js
deleted file mode 100644
index 7436fe5..0000000
--- a/source/assets/landingpage.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// JS Code that rotates the gradient on the content box on the front page
-document.addEventListener("DOMContentLoaded", function () {
-    var mainBox = document.querySelector("#rotating-gradient");
-    var angle = 0;
-    // Rotate the gradient 1 degree every 100ms
-    setInterval(function () {
-        mainBox.style.background = "linear-gradient(".concat(angle, "deg, #1E1F46, #404040)");
-        angle += 1;
-        if (angle >= 360) {
-            angle = 0;
-        }
-    }, 100);
-});
diff --git a/source/assets/landingpage.ts b/source/assets/landingpage.ts
deleted file mode 100644
index b37ffe6..0000000
--- a/source/assets/landingpage.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// JS Code that rotates the gradient on the content box on the front page
-
-document.addEventListener("DOMContentLoaded", (): void => {
-    const mainBox: HTMLDivElement = document.querySelector("#rotating-gradient");
-    let angle: number = 0;
-
-    // Rotate the gradient 1 degree every 100ms
-    setInterval((): void => {
-        mainBox.style.background = `linear-gradient(${angle}deg, #1E1F46, #404040)`;
-        angle += 1;
-        if (angle >= 360) {
-            angle = 0
-        }
-    }, 100);
-});
\ No newline at end of file