made blob colors and gradients truly dynamic/random

3 files changed, 52 insertions, 20 deletions

diff --git a/src/css/style.css b/src/css/style.css
index e4d813c2..e65debe5 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -3,6 +3,11 @@
     --neon-bg-color: #05010d
 }
 
+html {
+    /* hanging-punctuation: first last; */
+    color-scheme: dark;
+}
+
 @font-face {
     font-family: hacked;
     src: url(/fonts/Hacked-KerX.ttf);
@@ -181,6 +186,19 @@ body::-webkit-scrollbar {
     }
 }
 
+@keyframes rotate {
+    from {
+        rotate: 0deg;
+    }
+    
+    50% {
+        scale: 1 1.25;
+    }
+    
+    to {
+        rotate: 360deg;
+    }
+}
 
 
 /* animation: name duration timing-function delay iteration-count direction fill-mode; */
@@ -292,6 +310,13 @@ body::-webkit-scrollbar {
     transition: all 0.3s; 
 } */
 
+@media (prefers-reduced-motion: no-preference) {
+    :has(:target) {
+        scroll-behavior: smooth;
+        scroll-padding-top: var(--topBarHeight);
+    }
+}
+
 
 .js-tilt-glare {
     border-radius: 18px;
@@ -307,7 +332,7 @@ header {
     width: 100%;
     height: 3em;
     justify-content: space-between;
-    align-items:center;
+    align-items: center;
     /* background: color(0, 0, 0, .1); */
     z-index: 1000;
     background: rgba(0, 0, 0, 0.2);
@@ -438,6 +463,11 @@ a:hover {
     /* color: #F4E8C1; */
 }
 
+.sep {
+    width: 5vh;
+    height: 5vh;
+}
+
 .blob {
     min-height: 75%;
     min-width: 75%;
@@ -460,24 +490,6 @@ a:hover {
     animation-fill-mode: forwards;
 }
 
-@keyframes rotate {
-    from {
-        rotate: 0deg;
-    }
-    
-    50% {
-        scale: 1 1.25;
-    }
-    
-    to {
-        rotate: 360deg;
-    }
-}
-
-.sep {
-    width: 5vh;
-    height: 5vh;
-}
 
 .sblob {
     background-color: white;
@@ -495,4 +507,4 @@ a:hover {
     filter: blur(7vmax);
     -webkit-filter: blur(7vmax);
     z-index: -1;
-}
+}
\ No newline at end of file
diff --git a/src/js/dynamicBlob.js b/src/js/dynamicBlob.js
index 067b4de7..2530e946 100644
--- a/src/js/dynamicBlob.js
+++ b/src/js/dynamicBlob.js
@@ -7,7 +7,26 @@ function loadScript(src) {
     document.body.appendChild(script);
 }
 
+function getRandomColor() {
+    var letters = '0123456789ABCDEF';
+    var color = '#';
+    for (var i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+}
+
+function generateGradient() {
+    var gradient = 'linear-gradient(to right';
+    var colorCount = Math.floor(Math.random() * 5) + 2;
+    for (var i = 0; i < colorCount; i++) {
+        gradient += ', ' + getRandomColor();
+    }
+    gradient += ')';
+    return gradient;
+}
 
+blob.style.background = generateGradient();
 
 
 var blobItem;
diff --git a/src/js/mouseblob.js b/src/js/mouseblob.js
index 37aec6f2..4823618c 100644
--- a/src/js/mouseblob.js
+++ b/src/js/mouseblob.js
@@ -27,6 +27,7 @@
 //     }, { duration: 1000, fill: "forwards" });
 // }
 
+
 window.onpointermove = event => {
         const { pageX, pageY } = event;