Make DandyHacks text in navbar a navigation link

UR-dandyhacks · Oct 15, 2023 · c2797a0 · c2797a0
1 parent be34db3
commit c2797a0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 54 deletions.
diff --git a/index.html b/index.html
@@ -10,10 +10,10 @@
 
 <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>
+    <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>
+      <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 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">
         <li class="text-right"><a href="#about">About</a></li>
@@ -36,7 +36,7 @@ <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 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" />

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));
@@ -2746,15 +2750,6 @@ canvas {
 }
 
 @media (min-width: 768px) {
-  .md\:flex {
-    display: flex;
-  }
-
-  .md\:h-fit {
-    height: -moz-fit-content;
-    height: fit-content;
-  }
-
   .md\:flex-row {
     flex-direction: row;
   }
@@ -2763,8 +2758,8 @@ canvas {
     align-items: flex-start;
   }
 
-  .md\:justify-center {
-    justify-content: center;
+  .md\:gap-0 {
+    gap: 0px;
   }
 
   .md\:gap-2 {
@@ -2775,43 +2770,15 @@ canvas {
     gap: 0.625rem;
   }
 
-  .md\:gap-0 {
-    gap: 0px;
-  }
-
   @media not all and (min-width: 1024px) {
     .md\:max-lg\:relative {
       position: relative;
     }
 
-    .md\:max-lg\:top-0 {
-      top: 0px;
-    }
-
-    .md\:max-lg\:top-full {
-      top: 100%;
-    }
-
-    .md\:max-lg\:bottom-16 {
-      bottom: 4rem;
-    }
-
-    .md\:max-lg\:bottom-12 {
-      bottom: 3rem;
-    }
-
     .md\:max-lg\:bottom-14 {
       bottom: 3.5rem;
     }
 
-    .md\:max-lg\:h-3\/6 {
-      height: 50%;
-    }
-
-    .md\:max-lg\:h-2\/3 {
-      height: 66.666667%;
-    }
-
     .md\:max-lg\:h-1\/2 {
       height: 50%;
     }
@@ -2874,10 +2841,6 @@ canvas {
     flex-direction: row;
   }
 
-  .lg\:items-start {
-    align-items: flex-start;
-  }
-
   .lg\:gap-0 {
     gap: 0px;
   }
@@ -2890,14 +2853,6 @@ canvas {
     gap: 4rem;
   }
 
-  .lg\:gap-2 {
-    gap: 0.5rem;
-  }
-
-  .lg\:gap-2\.5 {
-    gap: 0.625rem;
-  }
-
   .lg\:gap-20 {
     gap: 5rem;
   }