Add navigation link for the new Tracks section

UR-dandyhacks · Oct 17, 2023 · 0fe3042 · 0fe3042
1 parent 944dc91
commit 0fe3042
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -17,6 +17,7 @@ <h3 class="text-2xl"><a href="#hero">DandyHacks &OpenCurlyQuote;23</a></h3>
       <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">
         <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>
         <li class="hidden text-right lg:block"><a href="#sponsoring">Sponsoring</a></li>
       </ul>
@@ -59,10 +60,12 @@ <h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
       </div>
     </div>
     <div class="flex flex-row items-center justify-center gap-[77px] relative">
-      <div id="about" class="absolute -top-16 lg:-top-[150px]"></div>
       <img class="hidden lg:self-start lg:block" src="img/sticker2.png" />
       <div class="px-9 lg:px-0 lg:flex-[0_0_454px] flex flex-col gap-7 lg:gap-14 mb-16 lg:mb-[150px]">
-        <h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
+        <h2 class="text-2xl lg:text-5xl">
+          <div id="about" class="absolute -top-20"></div>
+          What is DandyHacks?
+        </h2>
         <div class="text-base lg:text-xl">
           <p>
             DandyHacks is the University of Rochester’s annual 42-hour long
@@ -84,7 +87,10 @@ <h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
     </div>
     <div class="relative flex flex-row items-center justify-center text-xl bg-violet">
       <div class="flex flex-col grow-0 items-center w-full gap-7 lg:gap-11 px-9 lg:px-0 lg:w-[999px] box-border text-base lg:text-xl">
-        <h2 class="text-5xl">Tracks</h2>
+        <h2 class="text-5xl">
+          <div id="tracks" class="absolute -top-20"></div>
+          Tracks
+        </h2>
         <p>
           Choose one track to submit your project into. Each track will have
           three top winners, and each project may only win in one track. Each
@@ -209,8 +215,11 @@ <h2 class="text-5xl">FAQS</h2>
           </details>
         </div>
       </div>
-      <div id="sponsoring" class="flex-col items-center hidden mb-24 pointer-events-none lg:flex gap-20">
-        <h2 class="text-5xl">Sponsoring</h2>
+      <div class="flex-col items-center hidden mb-24 pointer-events-none lg:flex gap-20">
+        <h2 class="text-5xl">
+          <div id="sponsoring" class="absolute -top-20"></div>
+          Sponsoring
+        </h2>
         <div class="flex flex-row gap-24">
           <div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl">
             <h3 class="text-3xl text-center pb-7">What does a sponsor do?</h3>

diff --git a/styles.css b/styles.css
@@ -663,6 +663,10 @@ h1, h2, h3, h4, h5, h6 {
   top: 0px;
 }
 
+.-top-20 {
+  top: -5rem;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -1419,10 +1423,6 @@ h1, h2, h3, h4, h5, h6 {
   justify-items: stretch;
 }
 
-.gap-11 {
-  gap: 2.75rem;
-}
-
 .gap-12 {
   gap: 3rem;
 }
@@ -2969,6 +2969,10 @@ canvas {
     gap: 0px;
   }
 
+  .lg\:gap-11 {
+    gap: 2.75rem;
+  }
+
   .lg\:gap-14 {
     gap: 3.5rem;
   }
@@ -2977,14 +2981,6 @@ canvas {
     gap: 5rem;
   }
 
-  .lg\:gap-11 {
-    gap: 2.75rem;
-  }
-
-  .lg\:self-auto {
-    align-self: auto;
-  }
-
   .lg\:self-start {
     align-self: flex-start;
   }