From 12342091cc042c636da5a5a80afde825c20ea2f4 Mon Sep 17 00:00:00 2001
From: Zach <duong.nguyen@rochester.edu>
Date: Sun, 15 Oct 2023 15:03:10 -0400
Subject: [PATCH] Leaves some space before the About section header when scroll
 to

---
 index.html |  5 +++--
 styles.css | 48 ++++++++++++++++++++++++++++--------------------
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 7386757..c8ed4f5 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,8 @@ <h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
       </div>
     </div>
   </div>
-  <div id="about" class="flex flex-row items-center justify-center bg-violet gap-[77px]">
+  <div class="flex flex-row items-center justify-center bg-violet gap-[77px]">
+    <div id="about" class="absolute bottom-16 lg:bottom-[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>
@@ -70,7 +71,7 @@ <h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
         </p>
       </div>
     </div>
-    <img class="hidden lg:block lg:relative b-[150px]" src="img/sticker1.png" />
+    <img class="hidden lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
   </div>
   <div id="faq" class="px-5 lg:bg-repeat-y lg:bg-center-top lg:bg-fireflies lg:px-0">
     <div class="flex flex-col items-center py-24 box-border gap-12 lg:gap-20">
diff --git a/styles.css b/styles.css
index 9987ca4..033a706 100644
--- a/styles.css
+++ b/styles.css
@@ -651,6 +651,30 @@ h1, h2, h3, h4, h5, h6 {
   top: 0px;
 }
 
+.-top-\[150px\] {
+  top: -150px;
+}
+
+.-top-\[10px\] {
+  top: -10px;
+}
+
+.bottom-\[150px\] {
+  bottom: 150px;
+}
+
+.bottom-full {
+  bottom: 100%;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
+.bottom-16 {
+  bottom: 4rem;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -659,10 +683,6 @@ h1, h2, h3, h4, h5, h6 {
   isolation: auto;
 }
 
-.z-0 {
-  z-index: 0;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -671,14 +691,6 @@ h1, h2, h3, h4, h5, h6 {
   z-index: 20;
 }
 
-.z-30 {
-  z-index: 30;
-}
-
-.z-50 {
-  z-index: 50;
-}
-
 .float-right {
   float: right;
 }
@@ -830,10 +842,6 @@ h1, h2, h3, h4, h5, h6 {
   height: 2rem;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-screen {
   height: 100vh;
 }
@@ -2709,10 +2717,6 @@ details p {
   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));
 }
 
-.peer:checked ~ .peer-checked\:overflow-hidden {
-  overflow: hidden;
-}
-
 @media (min-width: 640px) {
   .sm\:underline {
     text-decoration-line: underline;
@@ -2724,6 +2728,10 @@ details p {
     position: relative;
   }
 
+  .lg\:bottom-\[150px\] {
+    bottom: 150px;
+  }
+
   .lg\:mb-0 {
     margin-bottom: 0px;
   }