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

Navigation menu improvements
UR-dandyhacks · Oct 15, 2023 · f11eda0 · f11eda0
2 parents 82c72b9 + 60bc24f
commit f11eda0
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -9,12 +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 ease-in-out lg:px-12 bg-deep-purple translate-y-0">
+  <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>
     <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 h-screen pt-16 text-3xl font-bold transition-transform ease-in-out 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">
+      <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">
         <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>

diff --git a/script.js b/script.js
@@ -3,6 +3,10 @@ document.addEventListener('DOMContentLoaded', () => {
     const navigationLinks = navBar.querySelectorAll('li');
     const hamburgerCheckbox = navBar.querySelector('.peer');
 
+    if (hamburgerCheckbox.checked) {
+        document.body.classList.add('overflow-hidden');
+    }
+
     // Hamburger navigation
 
     navigationLinks.forEach(navigationLink => {

diff --git a/styles.css b/styles.css
@@ -16,7 +16,7 @@
   /* 2 */
   border-style: solid;
   /* 2 */
-  border-color: currentColor;
+  border-color: #e5e7eb;
   /* 2 */
 }
 
@@ -647,6 +647,10 @@ h1, h2, h3, h4, h5, h6 {
   inset-inline-end: 0.25rem;
 }
 
+.left-0 {
+  left: 0px;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -663,22 +667,10 @@ h1, h2, h3, h4, h5, h6 {
   isolation: auto;
 }
 
-.z-10 {
-  z-index: 10;
-}
-
-.z-20 {
-  z-index: 20;
-}
-
 .z-30 {
   z-index: 30;
 }
 
-.z-40 {
-  z-index: 40;
-}
-
 .float-right {
   float: right;
 }
@@ -850,6 +842,10 @@ h1, h2, h3, h4, h5, h6 {
   width: 100%;
 }
 
+.w-screen {
+  width: 100vw;
+}
+
 .flex-none {
   flex: none;
 }
@@ -1866,6 +1862,11 @@ h1, h2, h3, h4, h5, h6 {
   background-color: rgb(255 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-deep-purple {
   --tw-bg-opacity: 1;
   background-color: rgb(27 0 44 / var(--tw-bg-opacity));
@@ -2032,6 +2033,11 @@ h1, h2, h3, h4, h5, h6 {
   padding-right: 2.25rem;
 }
 
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
 .py-24 {
   padding-top: 6rem;
   padding-bottom: 6rem;
@@ -2051,10 +2057,6 @@ h1, h2, h3, h4, h5, h6 {
   padding-bottom: 1.75rem;
 }
 
-.pt-16 {
-  padding-top: 4rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -2225,6 +2227,11 @@ h1, h2, h3, h4, h5, h6 {
   color: rgb(51 102 153 / .35);
 }
 
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
 .text-deep-purple {
   --tw-text-opacity: 1;
   color: rgb(27 0 44 / var(--tw-text-opacity));
@@ -2544,6 +2551,12 @@ h1, h2, h3, h4, h5, h6 {
   transition-duration: 150ms;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2722,6 +2735,10 @@ canvas {
   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));
 }
 
+.peer:checked ~ .peer-checked\:opacity-50 {
+  opacity: 0.5;
+}
+
 @media (min-width: 640px) {
   .sm\:underline {
     text-decoration-line: underline;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,13 +2,6 @@
 module.exports = {
   content: ["./**/*.{html,js}"],
   theme: {
-    colors: {
-      'lavender': '#e5ccff',
-      'purple': '#b673eb',
-      'deep-purple': '#1b002c',
-      'violet': '#5e38be',
-      'indigo': '#241d63'
-    },
     fontFamily: {
       'sans': ['"Fivo Sans"', 'sans-serif'],
       'display': ['"Katahdin Round"', 'sans-serif'],
@@ -20,11 +13,19 @@ module.exports = {
       'plus-icon': "url('img/icons/plus.png')",
       'groundboi': "url('img/sticker2-no_border.png')",
     },
-    backgroundPosition: {
-      'center-top': 'center top',
-      'center-bottom': 'center bottom',
+    extend: {
+      backgroundPosition: {
+        'center-top': 'center top',
+        'center-bottom': 'center bottom',
+      },
+      colors: {
+        'lavender': '#e5ccff',
+        'purple': '#b673eb',
+        'deep-purple': '#1b002c',
+        'violet': '#5e38be',
+        'indigo': '#241d63'
+      },
     },
-    extend: {},
   },
   plugins: [],
 };