From 5a8dc4fc5a2aa2108736665408cd5bba5f745d5a Mon Sep 17 00:00:00 2001
From: lyqht <estee.tsw@gmail.com>
Date: Sat, 2 Mar 2024 20:46:09 +0800
Subject: [PATCH 1/3] add moving background

---
 src/components/SectionSeparator.astro | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/components/SectionSeparator.astro

diff --git a/src/components/SectionSeparator.astro b/src/components/SectionSeparator.astro
new file mode 100644
index 0000000..45e170e
--- /dev/null
+++ b/src/components/SectionSeparator.astro
@@ -0,0 +1,25 @@
+<div class="flex">
+	<div class="section-separator-1 h-0 flex-1 bg-[#bfe5f7]"></div>
+	<div class="section-separator-2 h-0 flex-1 bg-[#bfe5f7]"></div>
+	<div class="section-separator-3 h-0 flex-1 bg-[#bfe5f7]"></div>
+</div>
+<style lang="postcss">
+	.section-separator-1 {
+		transition: 300ms cubic-bezier(0.3, 0, 0.5, 1) 100ms height;
+	}
+  .section-separator-1.show {
+    height: 0px;
+  }
+	.section-separator-2 {
+		transition: 300ms cubic-bezier(0.3, 0, 0.5, 1) 0ms height;
+	}
+  .section-separator-2.show {
+    height: 24px;
+  }
+	.section-separator-3 {
+		transition: 300ms cubic-bezier(0.3, 0, 0.5, 1) -100ms height;
+	}
+  .section-separator-3.show {
+    height: 48px;
+  }
+</style>
\ No newline at end of file

From dcd0689cf38f7c5a222ba43a4122fa8595d39c7e Mon Sep 17 00:00:00 2001
From: lyqht <estee.tsw@gmail.com>
Date: Sat, 2 Mar 2024 22:16:33 +0800
Subject: [PATCH 2/3] add scroll snap

---
 src/pages/index.astro | 53 +++++++++++++++++++++++++------------------
 1 file changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5232bda..dfca347 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -46,7 +46,7 @@ const schedules = [
     <section id="registration" class="flex flex-col h-fit md:h-screen items-center justify-center space-y-8 bg-no-repeat bg-cover bg-bottom">
       <Hero />
     </section>
-    <section id="about" class="scroll-m-16 space-y-6">
+    <section id="about" class="scroll-p-16 space-y-6 flex flex-col justify-center">
       <div class="flex flex-col-reverse md:grid md:grid-cols-2 items-center">
         <div class="flex flex-row gap-5 font-serif font-bold justify-center md:hidden">
           <a href="https://hackomania2019.geekshacking.com/" target="_blank">
@@ -78,7 +78,7 @@ const schedules = [
         </div>
       </div>
     </section>
-    <section id="prizes" class="scroll-m-16 space-y-6">
+    <section id="prizes" class="scroll-p-16 scroll-mt-16 scroll-mb-32 md:scroll-my-0 space-y-6 flex flex-col justify-center">
       <div class="border-l-8 border-solid border-l-app-red pl-6">
         <h2 class="text-4xl md:text-6xl text-app-purple font-serif font-bold">Prizes</h2>
       </div>
@@ -113,7 +113,7 @@ const schedules = [
         </div>
       </div>
     </section>
-    <section id="schedule" class="scroll-m-16 space-y-6">
+    <section id="schedule" class="scroll-p-16 scroll-mt-16 scroll-mb-32 space-y-6 flex flex-col justify-center">
       <div class="border-l-8 border-solid border-l-app-red pl-6">
         <h2 class="text-4xl md:text-6xl text-app-purple font-serif font-bold">Event Schedule</h2>
       </div>
@@ -148,7 +148,7 @@ const schedules = [
         </div>
       </BrowserFrame>
     </section>
-    <section id="rules" class="scroll-m-16 space-y-6">
+    <section id="rules" class="scroll-p-16 scroll-mt-16 scroll-mb-32 md:scroll-my-0 space-y-6 flex flex-col justify-center">
       <div class="border-l-8 border-solid border-l-app-red pl-6">
         <h2 class="text-4xl md:text-6xl text-app-purple font-serif font-bold">9 Golden Rules</h2>
       </div>
@@ -165,7 +165,7 @@ const schedules = [
           <li>Keep it clean, folks! Pre-coded work is strictly off-limits—let's see what you can create from scratch!</li></ol>
       </div>
     </section>
-    <section id="venue" class="scroll-m-16 space-y-6">
+    <section id="venue" class="scroll-p-16 scroll-mt-16 scroll-mb-32 space-y-6 flex flex-col justify-center">
       <div class="border-l-8 border-solid border-l-app-red pl-6">
         <h2 class="text-4xl md:text-6xl text-app-purple font-serif font-bold">Venue</h2>
       </div>
@@ -231,7 +231,7 @@ const schedules = [
       </div>
     </section>
 
-    <section id="sponsors" class="scroll-m-16 space-y-6">
+    <section id="sponsors" class="scroll-p-16 md:scroll-mt-16 md:scroll-mb-32 space-y-6 flex flex-col justify-center">
       <div class="border-l-8 border-solid border-l-app-red pl-6">
         <h2 class="text-4xl md:text-6xl text-app-purple font-serif font-bold">Sponsors</h2>
       </div>
@@ -274,7 +274,7 @@ const schedules = [
       </BrowserFrame>
     </section>
 
-    <section id="team" class="scroll-m-16 space-y-6">
+    <section id="team" class="scroll-p-16 scroll-mt-16 scroll-mb-32 space-y-6 flex flex-col justify-center">
       <div class="border-l-8 border-solid border-l-app-red pl-6">
         <h2 class="text-4xl md:text-6xl text-app-purple font-serif font-bold">Our team</h2>
       </div>
@@ -285,7 +285,7 @@ const schedules = [
         </div>
     </section>
 
-    <section id="geekshacking" class="space-y-6 flex flex-col md:flex-row gap-10">
+    <section id="geekshacking" class="scroll-p-16 scroll-mt-16 scroll-mb-32 md:scroll-my-0 space-y-6 justify-center flex flex-col md:flex-row gap-10">
       <a href="https://geekshacking.com/" target="_blank">
         <Image src={geekshacking} alt="GeeksHacking" class="min-w-[300px] w-[400px] mx-auto object-contain" />
       </a>
@@ -302,24 +302,26 @@ const schedules = [
       </div>
     </section>
 
-    <section id="contact" class="scroll-m-16 space-y-6">
+    <section id="contact" class="scroll-p-16 space-y-6 flex flex-col justify-center">
       <div class="border-l-8 border-solid border-l-app-red pl-6">
         <h2 class="text-4xl md:text-6xl text-app-purple font-serif font-bold">Contact Us!</h2>
       </div>
 
-      <p class="font-sans">
-        Click
-        <a target="_blank" class="font-semibold underline text-app-red hover:text-white hover:bg-app-red" href="https://t.me/+HlJIBuu9isA2ZWQ1"> here</a>
-        to join GeeksHacking's Telegram channel!
-      </p>
+      <div class="space-y-6">
+        <p class="font-sans">
+          Click
+          <a target="_blank" class="font-semibold underline text-app-red hover:text-white hover:bg-app-red" href="https://t.me/+HlJIBuu9isA2ZWQ1"> here</a>
+          to join GeeksHacking's Telegram channel!
+        </p>
 
-      <hr />
-      <p class="font-sans">
-        <p class="font-serif">For general enquiries</p>
-        Drop us an email at <a target="_blank" class="text-app-red font-semibold underline hover:text-white hover:bg-app-red" href="mailto:contact@geekshacking.com">contact@geekshacking.com</a> or contact us through our <a target="_blank" class="text-app-red font-semibold underline hover:text-white hover:bg-app-red" href="https://www.facebook.com/groups/geekshacking/">Facebook page</a>.
-        <p class="font-serif">For sponsorships</p>
-        Please contact <a target="_blank" class="text-app-red font-semibold underline hover:text-white hover:bg-app-red" href="mailto:sponsor@geekshacking.com">sponsor@geekshacking.com</a> for sponsorship enquiries.
-      </p>
+        <hr />
+        <p class="font-sans">
+          <p class="font-serif">For general enquiries</p>
+          Drop us an email at <a target="_blank" class="text-app-red font-semibold underline hover:text-white hover:bg-app-red" href="mailto:contact@geekshacking.com">contact@geekshacking.com</a> or contact us through our <a target="_blank" class="text-app-red font-semibold underline hover:text-white hover:bg-app-red" href="https://www.facebook.com/groups/geekshacking/">Facebook page.</a>
+          <p class="font-serif">For sponsorships</p>
+          Please contact <a target="_blank" class="text-app-red font-semibold underline hover:text-white hover:bg-app-red" href="mailto:sponsor@geekshacking.com">sponsor@geekshacking.com</a> for sponsorship enquiries.
+        </p>
+      </div>
     </section>
   </main>
 </Layout>
@@ -340,7 +342,14 @@ const schedules = [
     })
 	});
 </script>
-<style>
+<style lang="postcss">
+  html, body {
+    scroll-snap-type: y mandatory;
+  }
+  section {
+    scroll-snap-align: start;
+    min-height: 100vh;
+  }
   section:nth-of-type(odd) {
     transform: translate3d(-120px, 0, 0);
   }

From a709a977ac7ffc154ed16ea1cf4d7f1dcfaef8cc Mon Sep 17 00:00:00 2001
From: lyqht <estee.tsw@gmail.com>
Date: Sun, 3 Mar 2024 21:14:27 +0800
Subject: [PATCH 3/3] move overflow-hidden to body element

---
 src/layouts/Layout.astro | 4 ++--
 src/pages/index.astro    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 95353cf..c88fe6a 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -40,8 +40,8 @@ const navItems = ['registration', 'about', 'prizes', 'schedule', 'venue', 'spons
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
   </head>
   <Navbar navItems={navItems} />
-  <body>
-    <div class="px-6 bg-app-background overflow-x-hidden">
+  <body class="overflow-x-hidden">
+    <div class="px-6 bg-app-background">
       <slot />
     </div>
   </body>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index dfca347..f3e891f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -165,7 +165,7 @@ const schedules = [
           <li>Keep it clean, folks! Pre-coded work is strictly off-limits—let's see what you can create from scratch!</li></ol>
       </div>
     </section>
-    <section id="venue" class="scroll-p-16 scroll-mt-16 scroll-mb-32 space-y-6 flex flex-col justify-center">
+    <section id="venue" class="scroll-p-16 scroll-mt-16 space-y-6 flex flex-col justify-center">
       <div class="border-l-8 border-solid border-l-app-red pl-6">
         <h2 class="text-4xl md:text-6xl text-app-purple font-serif font-bold">Venue</h2>
       </div>
@@ -285,7 +285,7 @@ const schedules = [
         </div>
     </section>
 
-    <section id="geekshacking" class="scroll-p-16 scroll-mt-16 scroll-mb-32 md:scroll-my-0 space-y-6 justify-center flex flex-col md:flex-row gap-10">
+    <section id="geekshacking" class="scroll-p-16 scroll-mt-16 scroll-mb-32 md:scroll-my-0 space-y-6 items-center flex flex-col md:flex-row gap-10">
       <a href="https://geekshacking.com/" target="_blank">
         <Image src={geekshacking} alt="GeeksHacking" class="min-w-[300px] w-[400px] mx-auto object-contain" />
       </a>