updates

5 files changed, 80 insertions, 14 deletions

diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
index 9b1ac666..0134281d 100644
--- a/src/css/ghrepo.css
+++ b/src/css/ghrepo.css
@@ -11,7 +11,7 @@
 /* @media (prefers-color-scheme: dark) { */
 :root {
     --text: #e5e5e5;
-    --accent: #1688f0;
+    --accent: rgba(22,136,240,0.4);
     --bg-main: #000;
     --bg-repo: #0f0f1a;
     --bg-user: #0a0a0f;
@@ -22,7 +22,7 @@
     --pale-yellow: rgb(255, 255, 153);
     --lemon-yellow: rgb(255, 250, 205);
     --gold-color: #F4E8C1;
-    --box-shadow: rgba(255, 238, 16,.7);
+    --box-shadow: rgba(255, 238, 16,.4);
     --neon-red: #f83a3a;
     --neon-pink: #f13dd4;
     --neon-purple: #7000ff;
@@ -41,7 +41,7 @@ span,p,div,a {
 
 body {
     margin: 0;
-    font-family: 'Open Sans', sans-serif;
+    font-family: inter, 'Open Sans', sans-serif;
 }
 
 main {
@@ -252,6 +252,14 @@ input:active,
     backdrop-filter: blur(200px);
 }
 
+.repo > * {
+    animation-name: scroll;
+    animation-fill-mode: forwards;
+    animation-timing-function: linear;
+    animation-timeline: view();
+    font-family: inter;
+}
+
 .repos {
     display: flex;
     flex-wrap: wrap;
@@ -282,6 +290,11 @@ input:active,
     font-weight: bold;
     text-align: center;
     color: var(--accent);
+    font-family: liga;
+}
+
+.rdescriptiontext {
+  font-family: inter;
 }
 
 .repo-list {
@@ -328,13 +341,6 @@ input:active,
     transition: background 0.5s, transform 1s, boarder 1.5s, all 0.3s
 }
 
-.repo > * {
-    animation-name: scroll;
-    animation-fill-mode: forwards;
-    animation-timing-function: linear;
-    animation-timeline: view();
-}
-
 .repo-list:hover:has(li:hover) li:not(:hover,.hide) {
     background: rgba(0, 0, 0, 0.3);
     -webkit-backdrop-filter: blur(80px);
diff --git a/src/css/index.css b/src/css/index.css
index db1bb50a..19caf0da 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -47,6 +47,9 @@
     justify-content: center;
     align-items: center;
     z-index: 999;
+    -webkit-backdrop-filter: blur(512px);
+    backdrop-filter: blur(512px);
+    box-shadow: 0 0 100px rgba(5,1,13,.4);
 }
 
 /* .window:after { */
@@ -82,7 +85,7 @@
     border-radius: 1em;
     -webkit-backdrop-filter: blur(16px);
     backdrop-filter: blur(16px);
-    box-shadow: 0 0 10mm rgba(0,0,0,1);
+    /* box-shadow: 0 0 10mm rgba(0,0,0,1); */
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/src/css/style.css b/src/css/style.css
index 48af01c5..976678fe 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -39,6 +39,11 @@ html {
     font-family: audiowide;
     src: url(/fonts/audiowide.ttf);
 }
+
+@font-face {
+    font-family: inter;
+    src: url(/fonts/Inter.ttf)
+}
 /* page setup ============================================= */
 
 * {
@@ -505,7 +510,7 @@ a:active {
     -webkit-filter: blur(7vmax);
     height: 15vmax;
     left: 50%;
-    opacity: .8;
+    opacity: .4;
     position: absolute;
     top: 50%;
     translate: -50% -50%;
@@ -531,5 +536,4 @@ a:active {
     filter: blur(7vmax);
     -webkit-filter: blur(7vmax);
     z-index: -1;
-    
 }
diff --git a/src/js/2dtilt.js b/src/js/2dtilt.js
new file mode 100644
index 00000000..c37dd64d
--- /dev/null
+++ b/src/js/2dtilt.js
@@ -0,0 +1,53 @@
+//check if mobile
+if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) || window.orientation > 1) {
+} else {
+    window.onload = function() {
+
+        let target = document.getElementsByClassName("tilt")[0];
+        let content = target.getElementsByClassName("content")[0];
+        let isMouseOver = false;
+        let centerX;
+        let centerY;
+        let mouseX;
+        let mouseY;
+
+        function resetStyle() {
+            target.style.transform = "";
+            target.style.height = "0px";
+        }
+
+        function sizeControl() {
+            var contentWidth = content.clientWidth;
+            var contentHeight = content.clientHeight;
+            target.style.width = `${contentWidth}px`;
+            target.style.height = `${contentHeight}px`;
+            window.requestAnimationFrame(sizeControl);
+        }
+        window.requestAnimationFrame(sizeControl);
+
+        // tile effect
+
+        function tiltEffect() {
+            const deltaScale = 50.0;
+            isMouseOver = true;
+            var rect = target.getBoundingClientRect();
+            centerX = rect.left + rect.width / 2;
+            centerY = rect.top + rect.height / 2;
+            target.style.transform = `translate(${ ( mouseX - centerX ) / deltaScale }px, ${ ( mouseY - centerY ) / deltaScale }px)`;
+            requestAnimationFrame(tiltEffect);
+        }
+
+        target.addEventListener("mouseleave", () => {
+            isMouseOver = false;
+            target.style.transform = "";
+        });
+
+        document.addEventListener("mousemove", function(event) {
+            mouseX = event.clientX;
+            mouseY = event.clientY;
+        });
+
+        requestAnimationFrame(tiltEffect);
+
+    };
+}
\ No newline at end of file
diff --git a/src/js/dynamicBlob.js b/src/js/dynamicBlob.js
index adad6ec3..e6573330 100644
--- a/src/js/dynamicBlob.js
+++ b/src/js/dynamicBlob.js
@@ -56,4 +56,4 @@ if (blobItem == "mouse") {
     loadScript('/js/randomblob.js')
 } else {
     throw new Error("Unknown blob type")
-}
\ No newline at end of file
+}