Fixed it on PC view, mobile view is a WIP

ArushYadlapati · Aug 20, 2024 · d920e88 · d920e88
1 parent bf29267
commit d920e88
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 25 deletions.
diff --git a/app/components/helper/glow-card.jsx b/app/components/helper/glow-card.jsx
@@ -5,7 +5,6 @@ const GlowCard = ({ children , identifier}) => {
   useEffect(() => {
     const CONTAINER = document.querySelector(`.glow-container-${identifier}`);
     const CARDS = document.querySelectorAll(`.glow-card-${identifier}`);
-    const WRAPPER = document.querySelector(`.wrapper-${identifier}`);
 
     const CONFIG = {
       proximity: 40,
@@ -47,32 +46,33 @@ const GlowCard = ({ children , identifier}) => {
       }
     };
 
-    WRAPPER.addEventListener('pointermove', UPDATE);
+    document.body.addEventListener('pointermove', UPDATE);
 
     const RESTYLE = () => {
-      if (CONTAINER) {
-        CONTAINER.style.setProperty('--gap', CONFIG.gap);
-        CONTAINER.style.setProperty('--blur', CONFIG.blur);
-        CONTAINER.style.setProperty('--spread', CONFIG.spread);
-        CONTAINER.style.setProperty(
-            '--direction',
-            CONFIG.vertical ? 'column' : 'row'
-        );
-      }
+      CONTAINER.style.setProperty('--gap', CONFIG.gap);
+      CONTAINER.style.setProperty('--blur', CONFIG.blur);
+      CONTAINER.style.setProperty('--spread', CONFIG.spread);
+      CONTAINER.style.setProperty(
+          '--direction',
+          CONFIG.vertical ? 'column' : 'row'
+      );
     };
 
     RESTYLE();
     UPDATE();
 
     // Cleanup event listener
     return () => {
-      WRAPPER.removeEventListener('pointermove', UPDATE);
+      document.body.removeEventListener('pointermove', UPDATE);
     };
   }, [identifier]);
 
   return (
-      <div className={`wrapper-${identifier}`}>
-        {children}
+      <div className={`glow-container-${identifier} glow-container`}>
+        <article className={`glow-card glow-card-${identifier} h-fit cursor-pointer border border-[#2a2e5a] transition-all duration-300 relative bg-[#101123] text-gray-200 rounded-xl hover:border-transparent w-full`}>
+          <div className="glows"></div>
+          {children}
+        </article>
       </div>
   );
 };

diff --git a/app/css/globals.css b/app/css/globals.css
@@ -13,9 +13,8 @@
 body {
   color: rgb(var(--foreground-rgb));
   background-color: #0d1224;
-  overflow-x: hidden;
-  width: 100%;
   position: relative;
+  width: 100%;
 }
 #sticky-card-1 {
   --index: 1;
@@ -34,14 +33,5 @@ body {
 }
 
 html {
-  overflow-x: hidden;
-  width: 100%;
-}
-
-/* Add this CSS for the wrapper element */
-.wrapper {
-  position: relative;
   width: 100%;
-  height: 100%;
-  overflow-x: visible;
 }