Move navigation menu links to the bottom of the screen instead of top

UR-dandyhacks · Oct 15, 2023 · a894d5b · a894d5b
1 parent a1ff5fb
commit a894d5b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@ <h3 class="text-2xl">DandyHacks &OpenCurlyQuote;23</h3>
       <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 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/styles.css b/styles.css
@@ -671,14 +671,6 @@ h1, h2, h3, h4, h5, h6 {
   z-index: 30;
 }
 
-.z-50 {
-  z-index: 50;
-}
-
-.z-20 {
-  z-index: 20;
-}
-
 .float-right {
   float: right;
 }
@@ -2041,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;
@@ -2060,10 +2057,6 @@ h1, h2, h3, h4, h5, h6 {
   padding-bottom: 1.75rem;
 }
 
-.pt-16 {
-  padding-top: 4rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -2304,10 +2297,6 @@ h1, h2, h3, h4, h5, h6 {
   opacity: 0;
 }
 
-.opacity-50 {
-  opacity: 0.5;
-}
-
 .bg-blend-normal {
   background-blend-mode: normal;
 }
@@ -2562,14 +2551,14 @@ h1, h2, h3, h4, h5, h6 {
   transition-duration: 150ms;
 }
 
-.transition-transform {
-  transition-property: transform;
+.transition-opacity {
+  transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
-.transition-opacity {
-  transition-property: opacity;
+.transition-transform {
+  transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }