actually fix for mobile

saumilthecode · Nov 9, 2024 · f2ffd40 · f2ffd40
1 parent 4f1daa7
commit f2ffd40
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 42 deletions.
diff --git a/src/components/Team.astro b/src/components/Team.astro
@@ -4,7 +4,7 @@ const teamMembers = [
     name: "Saumil",
     role: "Founder",
     image: "https://cloud-k1zq3nx08-hack-club-bot.vercel.app/0saumil.jpeg",
-    description: "Experienced iOS dev. Decent photographer.",
+    description: "Experienced iOS dev, decent photographer.",
     github: "https://github.com/saumilthecode",
     linkedin: "https://www.linkedin.com/in/saumil707/",
     youtube: ""
@@ -22,7 +22,7 @@ const teamMembers = [
     name: "Daivik",
     role: "Co-Founder",
     image: "https://cloud-dq52iggbr-hack-club-bot.vercel.app/0bigfatass.jpeg",
-    description: "iOS dev. YouTuber.",
+    description: "iOS dev, YouTuber.",
     github: "https://github.com/gz56",
     linkedin: "",
     youtube: "https://www.youtube.com/@realgz56yt2"
@@ -44,9 +44,10 @@ const teamMembers = [
 <!-- Team Section -->
 <section class="team">
     <div class="tem">
-        <h1 style="font-size:10vw">Our Team</h1>
+        <h1 style="font-size:10vw; margin-bottom: 20px;">Our Team</h1>
+
     </div>
-    <h6 style="font-size:1.5vw">we think we know what we're doing</h6>
+    <h6 style="font-size:smaller; margin-top: 20px;">we think we know what we're doing</h6>
     <div class="team-grid">
         {teamMembers.map((member) => (
             <div class="team-member">
@@ -95,7 +96,7 @@ const teamMembers = [
     }
     .team-member {
         max-width: 200px;
-        padding: 1rem;
+        padding: 0.4rem;
         border-radius: 8px;
         box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
         text-align: center;
@@ -133,16 +134,25 @@ const teamMembers = [
     .youtube { background-color: #ff0000; } */
 
     /* Responsive adjustments */
-    @media (max-width: 768px) {
+        @media (max-width: 768px) {
+        .team {
+            padding: 1rem; /* Reduce side padding */
+        }
+
         .team-grid {
-            gap: 1rem;
+            gap: 0.5rem; /* Adjust grid gap for a tighter layout */
         }
+
         .team-member {
             max-width: 150px;
         }
+
         .description {
             font-size: 0.8rem;
+            max-width: 125px;
+            line-height: 1.5em;
         }
+
         .social-btn {
             font-size: 1rem;
             padding: 0.4rem;

diff --git a/src/components/core/navmenue.astro b/src/components/core/navmenue.astro
@@ -5,28 +5,27 @@ import { MenuIcon, X } from "lucide-react";
 ---
 
 <style>
-  .menu-overlay {
-    display: none;
-    position: fixed;
-    inset: 0;
-    background-color: rgb(255, 255, 255);
-    z-index: 9999;
-    overflow-y: auto;
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
-  }
+.menu-overlay {
+  visibility: hidden;
+  opacity: 0;
+  position: fixed;
+  inset: 0;
+  background-color: rgb(255, 255, 255);
+  z-index: 9999;
+  overflow-y: auto;
+  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+}
 
-  @media (prefers-color-scheme: dark) {
-    .menu-overlay {
-      background-color: rgb(9, 9, 11);
-    }
+@media (prefers-color-scheme: dark) {
+  .menu-overlay {
+    background-color: rgb(9, 9, 11);
   }
+}
 
-  .menu-overlay.active {
-    display: flex;
-    flex-direction: column;
-    opacity: 1;
-  }
+.menu-overlay.active {
+  visibility: visible;
+  opacity: 1;
+}
 
   .menu-content {
     padding: 2rem;
@@ -118,27 +117,43 @@ import { MenuIcon, X } from "lucide-react";
 </div>
 
 <script is:inline>
-  function toggleMenu() {
+  function initializeMenuToggle() {
+    const menuToggleButton = document.querySelector("#menu-toggle button");
+    const closeMenuButton = document.getElementById('close-menu');
     const menuOverlay = document.querySelector('.menu-overlay');
-    if (menuOverlay) {
-      menuOverlay.classList.toggle('active');
-      document.body.style.overflow = menuOverlay.classList.contains('active') ? 'hidden' : '';
+
+    function toggleMenu() {
+      if (menuOverlay) {
+        menuOverlay.classList.toggle('active');
+        document.body.style.overflow = menuOverlay.classList.contains('active') ? 'hidden' : 'auto';
+      }
     }
-  }
 
-  document.getElementById('menu-toggle')?.addEventListener('click', toggleMenu);
-  document.getElementById('close-menu')?.addEventListener('click', toggleMenu);
+    if (menuToggleButton) {
+      menuToggleButton.addEventListener('click', toggleMenu);
+    }
+    if (closeMenuButton) {
+      closeMenuButton.addEventListener('click', toggleMenu);
+    }
 
-  document.querySelectorAll('.menu-overlay a').forEach(link => {
-    link.addEventListener('click', toggleMenu);
-  });
+    document.querySelectorAll('.menu-overlay a').forEach(link => {
+      link.addEventListener('click', () => {
+        if (menuOverlay.classList.contains('active')) {
+          toggleMenu();
+        }
+      });
+    });
 
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
-      const menuOverlay = document.querySelector('.menu-overlay');
-      if (menuOverlay?.classList.contains('active')) {
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && menuOverlay.classList.contains('active')) {
         toggleMenu();
       }
-    }
-  });
+    });
+  }
+
+  // Initialize on initial page load
+  document.addEventListener("DOMContentLoaded", initializeMenuToggle);
+
+  // Re-initialize on page navigation using Astro's after-swap event
+  document.addEventListener("astro:after-swap", initializeMenuToggle);
 </script>