Merge pull request #28 from UR-dandyhacks/feature/nav-menu-improvements

Improve navigation menu and responsiveness
UR-dandyhacks · Oct 15, 2023 · e8dd37b · e8dd37b
2 parents f11eda0 + 2e079de
commit e8dd37b
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 58 deletions.
diff --git a/index.html b/index.html
@@ -9,13 +9,13 @@
 </head>
 
 <body class="font-sans text-lavender bg-deep-purple">
-  <nav class="fixed z-30 flex flex-row items-center justify-between flex-none w-full px-5 py-5 transition-transform lg:px-12 bg-deep-purple translate-y-0">
-    <h3 class="text-2xl">DandyHacks &OpenCurlyQuote;23</h3>
+  <nav class="fixed z-30 flex flex-row items-center justify-between flex-none w-full px-5 py-5 transition-transform md:px-12 bg-deep-purple translate-y-0">
+    <h3 class="text-2xl"><a href="#hero">DandyHacks &OpenCurlyQuote;23</a></h3>
     <div>
-      <input class="absolute w-8 h-8 opacity-0 peer lg:hidden" type="checkbox" />
-      <div class="fixed top-0 left-0 w-screen h-screen bg-black opacity-0 pointer-events-none transition-opacity peer-checked:opacity-50 lg:hidden"></div>
-      <img class="lg:hidden" src="img/icons/hamburger.png" />
-      <ul class="fixed top-0 right-0 z-30 flex flex-col justify-end h-screen py-16 text-3xl font-bold transition-transform gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-16 lg:transition-none">
+      <input class="absolute w-8 h-8 opacity-0 peer md:hidden" type="checkbox" />
+      <div class="fixed top-0 left-0 w-screen h-screen bg-black opacity-0 pointer-events-none peer-checked:pointer-events-auto transition-opacity peer-checked:opacity-50 md:hidden"></div>
+      <img class="md:hidden" src="img/icons/hamburger.png" />
+      <ul class="fixed top-0 right-0 z-30 flex flex-col justify-end h-screen py-16 text-3xl font-bold transition-transform gap-8 md:flex-row md:text-xl px-9 md:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 md:bg-deep-purple md:translate-x-0 md:w-fit md:h-fit md:relative md:gap-16 md:transition-none">
         <li class="text-right"><a href="#about">About</a></li>
         <li class="text-right"><a href="#faq">FAQ</a></li>
         <li class="hidden text-right lg:block"><a href="#sponsoring">Sponsoring</a></li>
@@ -36,16 +36,16 @@ <h3 class="text-2xl">DandyHacks &OpenCurlyQuote;23</h3>
         src="https://s3.amazonaws.com/logged-assets/trust-badge/2024/mlh-trust-badge-2024-white.svg"
         alt="Major League Hacking 2024 Hackathon Season" style="width: 100%" /></a>
   </nav>
-  <div class="flex flex-col items-center justify-center h-screen bg-no-repeat bg-cover bg-enchanted-forest bg-center-bottom">
-    <div class="flex flex-col gap-6 lg:gap-0">
-      <div class="flex flex-col lg:flex-row items-center gap-6 lg:gap-2.5">
-        <img src="img/logo.png" alt="The logo of DandyHacks 2023" />
-        <div class="flex flex-col items-center lg:items-start gap-4">
+  <div id="hero" class="flex flex-col items-center justify-center h-screen bg-no-repeat bg-cover bg-enchanted-forest bg-center-bottom">
+    <div class="flex flex-col gap-6 md:gap-0">
+      <div class="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-2.5">
+        <img class="md:max-lg:h-1/2" src="img/logo.png" alt="The logo of DandyHacks 2023" />
+        <div class="flex flex-col items-center md:items-start gap-4">
           <h1 class="text-4xl lg:text-6xl">DandyHacks &OpenCurlyQuote;23</h1>
           <h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
         </div>
       </div>
-      <div class="flex flex-col items-center justify-center font-bold lg:flex-row gap-7">
+      <div class="flex flex-col items-center justify-center font-bold md:flex-row gap-7 md:max-lg:relative md:max-lg:bottom-14">
         <a class="flex items-center justify-center px-6 py-4 text-xl rounded-full lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-lavender" href="https://docs.google.com/forms/d/e/1FAIpQLSf0fuT8o8gTrG9d8flxtpRD1JkOzHu8tEXG-wXM3KiNzhHRyw/viewform?usp=sf_link" target="_blank">Register</a>
         <a class="flex items-center justify-center px-6 py-4 text-xl rounded-full lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-purple" href="https://discord.gg/SbNBkUK6Cr" target="_blank">Join Discord</a>
       </div>

diff --git a/script.js b/script.js
@@ -11,8 +11,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     navigationLinks.forEach(navigationLink => {
       navigationLink.addEventListener('click', () => {
-        document.body.classList.remove('overflow-hidden');
-        hamburgerCheckbox.checked = false;
+          closeNavigationMenu();
       });
     });
 
@@ -43,6 +42,19 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
+    // Close navigation menu when the dark overlay is clicked on
+
+    const darkOverlay = navBar.querySelector('.bg-black');
+
+    darkOverlay.addEventListener('click', () => {
+        closeNavigationMenu();
+    });
+
+    function closeNavigationMenu() {
+        document.body.classList.remove('overflow-hidden');
+        hamburgerCheckbox.checked = false;
+    }
+
     // particles.js
 
     particlesJS.load('faq', 'assets/particlesjs-config.json');

diff --git a/styles.css b/styles.css
@@ -2730,6 +2730,10 @@ canvas {
   text-align: center;
 }
 
+.peer:checked ~ .peer-checked\:pointer-events-auto {
+  pointer-events: auto;
+}
+
 .peer:checked ~ .peer-checked\:translate-x-0 {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2745,6 +2749,96 @@ canvas {
   }
 }
 
+@media (min-width: 768px) {
+  .md\:relative {
+    position: relative;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:h-fit {
+    height: -moz-fit-content;
+    height: fit-content;
+  }
+
+  .md\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
+  .md\:translate-x-0 {
+    --tw-translate-x: 0px;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:items-start {
+    align-items: flex-start;
+  }
+
+  .md\:gap-0 {
+    gap: 0px;
+  }
+
+  .md\:gap-16 {
+    gap: 4rem;
+  }
+
+  .md\:gap-2 {
+    gap: 0.5rem;
+  }
+
+  .md\:gap-2\.5 {
+    gap: 0.625rem;
+  }
+
+  .md\:bg-deep-purple {
+    --tw-bg-opacity: 1;
+    background-color: rgb(27 0 44 / var(--tw-bg-opacity));
+  }
+
+  .md\:p-0 {
+    padding: 0px;
+  }
+
+  .md\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .md\:transition-none {
+    transition-property: none;
+  }
+
+  @media not all and (min-width: 1024px) {
+    .md\:max-lg\:relative {
+      position: relative;
+    }
+
+    .md\:max-lg\:bottom-14 {
+      bottom: 3.5rem;
+    }
+
+    .md\:max-lg\:h-1\/2 {
+      height: 50%;
+    }
+
+    .md\:max-lg\:gap-8 {
+      gap: 2rem;
+    }
+  }
+}
+
 @media (min-width: 1024px) {
   .lg\:relative {
     position: relative;
@@ -2774,37 +2868,14 @@ canvas {
     display: flex;
   }
 
-  .lg\:hidden {
-    display: none;
-  }
-
-  .lg\:h-fit {
-    height: -moz-fit-content;
-    height: fit-content;
-  }
-
-  .lg\:w-fit {
-    width: -moz-fit-content;
-    width: fit-content;
-  }
-
   .lg\:flex-\[0_0_454px\] {
     flex: 0 0 454px;
   }
 
-  .lg\:translate-x-0 {
-    --tw-translate-x: 0px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
   .lg\:flex-row {
     flex-direction: row;
   }
 
-  .lg\:items-start {
-    align-items: flex-start;
-  }
-
   .lg\:gap-0 {
     gap: 0px;
   }
@@ -2813,29 +2884,16 @@ canvas {
     gap: 3.5rem;
   }
 
-  .lg\:gap-16 {
-    gap: 4rem;
-  }
-
-  .lg\:gap-2 {
-    gap: 0.5rem;
-  }
-
-  .lg\:gap-2\.5 {
-    gap: 0.625rem;
-  }
-
   .lg\:gap-20 {
     gap: 5rem;
   }
 
-  .lg\:self-start {
-    align-self: flex-start;
+  .lg\:gap-16 {
+    gap: 4rem;
   }
 
-  .lg\:bg-deep-purple {
-    --tw-bg-opacity: 1;
-    background-color: rgb(27 0 44 / var(--tw-bg-opacity));
+  .lg\:self-start {
+    align-self: flex-start;
   }
 
   .lg\:bg-groundboi {
@@ -2917,10 +2975,6 @@ canvas {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
-
-  .lg\:transition-none {
-    transition-property: none;
-  }
 }
 
 @media (prefers-color-scheme: dark) {