Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add scrollsnap #30

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+58 −24
Open

add scrollsnap #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a8dc4f
add moving background
lyqht Mar 2, 2024
dcd0689
add scroll snap
lyqht Mar 2, 2024
a709a97
move overflow-hidden to body element
lyqht Mar 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions src/components/SectionSeparator.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
53 changes: 31 additions & 22 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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 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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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 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>
Expand All @@ -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:[email protected]">[email protected]</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:[email protected]">[email protected]</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:[email protected]">[email protected]</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:[email protected]">[email protected]</a> for sponsorship enquiries.
</p>
</div>
</section>
</main>
</Layout>
Expand All @@ -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);
}
Expand Down