Make nav items visible without hamburger menu from md screen

UR-dandyhacks · Oct 15, 2023 · 2e079de · 2e079de
1 parent 45cb83b
commit 2e079de
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 37 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">
+  <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 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">
+      <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>

diff --git a/styles.css b/styles.css
@@ -2750,6 +2750,29 @@ 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;
   }
@@ -2762,6 +2785,10 @@ canvas {
     gap: 0px;
   }
 
+  .md\:gap-16 {
+    gap: 4rem;
+  }
+
   .md\:gap-2 {
     gap: 0.5rem;
   }
@@ -2770,6 +2797,29 @@ canvas {
     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;
@@ -2782,6 +2832,10 @@ canvas {
     .md\:max-lg\:h-1\/2 {
       height: 50%;
     }
+
+    .md\:max-lg\:gap-8 {
+      gap: 2rem;
+    }
   }
 }
 
@@ -2814,29 +2868,10 @@ 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;
   }
@@ -2849,21 +2884,16 @@ canvas {
     gap: 3.5rem;
   }
 
-  .lg\:gap-16 {
-    gap: 4rem;
-  }
-
   .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 {
@@ -2945,10 +2975,6 @@ canvas {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
-
-  .lg\:transition-none {
-    transition-property: none;
-  }
 }
 
 @media (prefers-color-scheme: dark) {