From 66dac61f08f8573f6b50d0bc149a0d3614c8771a Mon Sep 17 00:00:00 2001
From: Zach <duong.nguyen@rochester.edu>
Date: Mon, 16 Oct 2023 20:36:25 -0400
Subject: [PATCH] [mobile] Move navigation links to the top, for better UX :-)

Since the user has to reach to the top to press the hamburger
icon, it does not make sense to have the buttons then near the
bottom. Moving the buttons to where the user's finger already is
improves the experience.
---
 index.html |  2 +-
 styles.css | 20 ++++++--------------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 68a83bf..b5b5d04 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@ <h3 class="text-2xl"><a href="#hero">DandyHacks &OpenCurlyQuote;23</a></h3>
       <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 pb-32 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">
+      <ul class="fixed top-0 right-0 z-30 flex flex-col h-screen pt-32 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="#tracks">Tracks</a></li>
         <li class="text-right"><a href="#faq">FAQ</a></li>
diff --git a/styles.css b/styles.css
index 7cac07f..ae22b4a 100644
--- a/styles.css
+++ b/styles.css
@@ -643,8 +643,8 @@ h1, h2, h3, h4, h5, h6 {
   bottom: -100%;
 }
 
-.-top-16 {
-  top: -4rem;
+.-top-20 {
+  top: -5rem;
 }
 
 .end-1 {
@@ -663,10 +663,6 @@ h1, h2, h3, h4, h5, h6 {
   top: 0px;
 }
 
-.-top-20 {
-  top: -5rem;
-}
-
 .isolate {
   isolation: isolate;
 }
@@ -2106,14 +2102,14 @@ h1, h2, h3, h4, h5, h6 {
   padding-bottom: 1.25rem;
 }
 
-.pb-32 {
-  padding-bottom: 8rem;
-}
-
 .pb-7 {
   padding-bottom: 1.75rem;
 }
 
+.pt-32 {
+  padding-top: 8rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2929,10 +2925,6 @@ canvas {
     position: relative;
   }
 
-  .lg\:-top-\[150px\] {
-    top: -150px;
-  }
-
   .lg\:mb-0 {
     margin-bottom: 0px;
   }