dot013/guz.one
1
0
Fork 0
Code Issues Pull Requests Activity

feat: scroll snap on desktop

Browse Source
This commit is contained in:
Gustavo "Guz" L. de Mello
2024-06-07 15:42:30 -03:00
parent 4207f349b9
commit 35a4047a6c
2 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
layouts/page.templ
View File

@@ -2,7 +2,7 @@ package layouts
templ Page(title string) {
<!DOCTYPE html>
<html lang="en-US" class="scroll-smooth">
<html lang="en-US" class="scroll-smooth motion-reduce:scroll-auto">
<head>
<meta
name="viewport"
@@ -15,6 +15,12 @@ templ Page(title string) {
<link rel="stylesheet" href="/global.css"/>
<title>{ title }</title>
</head>
<body
class={ "flex flex-col justify-center items-center " +
"w-screen overflow-x-hidden text-white bg-black font-sans m-0" }
style="--anim-slide-from-y: 10px; --anim-delay: 120ms; --anim-duration: 0.6s;"
>
{ children... }
</body>
</html>
}

54
pages/homepage.templ
View File

@@ -60,20 +60,16 @@ var mockProjects = []components.Project{
templ Homepage() {
@layouts.Page("013") {
<body
class={ "flex flex-col justify-center items-center snap-y snap-mandatory " +
"w-screen overflow-x-hidden text-white bg-black font-sans m-0" }
style="--anim-slide-from-y: 10px; --anim-delay: 120ms; --anim-duration: 0.6s;"
>
@components.Nav([]components.Link{
{Text: "about", Link: templ.SafeURL("#about")},
{Text: "projects", Link: templ.SafeURL("#projects")},
{Text: "gallery", Link: templ.SafeURL("#gallery")},
{Text: "blog", Link: templ.SafeURL("#blog")},
{Text: "contact", Link: templ.SafeURL("#contact")},
})
@components.Nav([]components.Link{
{Text: "about", Link: templ.SafeURL("#about")},
{Text: "projects", Link: templ.SafeURL("#projects")},
{Text: "gallery", Link: templ.SafeURL("#gallery")},
{Text: "blog", Link: templ.SafeURL("#blog")},
{Text: "contact", Link: templ.SafeURL("#contact")},
})
<div class="w-screen h-screen overflow-y-scroll snap-y">
<header
class="h-screen w-screen flex justify-center items-center snap-center"
class="h-screen w-screen flex justify-center items-center"
id="about"
>
<div class="flex flex-col lg:flex-row lg:justify-between lg:gap-5rem w-90% lg:w-80% xl:w-60%">
@@ -95,9 +91,9 @@ templ Homepage() {
</header>
<main
aria-labelledby="about-header"
class="w-screen h-50vh lg:h-60vh xl:h-50vh flex justify-center items-center snap-center"
class="w-screen h-50vh lg:h-60vh xl:h-50vh flex justify-center items-center"
>
<div class="w-90% xl:w-50% lg:text-xl -translate-y-20% xl:-translate-y-45% text-justify">
<div class="w-90% xl:w-50% lg:text-xl -translate-y-20% xl:-translate-y-45% text-justify snap-center">
<h2 id="about-header" class="opacity-0">About</h2>
<p class="animate slide-from-b fade-in" style="--anim-stagger: 4; opacity: 0;">
Lorem ipsum dolor sit amet, officia excepteur ex fugiat
@@ -130,9 +126,9 @@ templ Homepage() {
<section
aria-labelledby="projects-header"
id="projects"
class="w-screen h-screen flex justify-center items-center snap-center"
class="w-screen h-screen flex justify-center items-center"
>
<div class="w-90% xl:w-50%">
<div class="w-90% xl:w-50% snap-center">
<hgroup class="flex justify-between my-5">
<h2 id="projects-header" class="font-cal text-5xl m-0">Projects.</h2>
<p class="m-0">
@@ -169,9 +165,9 @@ templ Homepage() {
<section
aria-labelledby="gallery-header"
id="gallery"
class="w-screen h-screen flex justify-center items-center snap-center"
class="w-screen h-screen flex justify-center items-center"
>
<div class="w-90% xl:w-50%">
<div class="w-90% xl:w-50% snap-center">
<hgroup class="flex justify-between my-5">
<h2 id="gallery-header" class="font-cal text-5xl m-0">Gallery.</h2>
<p class="m-0">
@@ -188,17 +184,17 @@ templ Homepage() {
</hgroup>
</div>
</section>
<footer>
</div>
<footer>
<div
aria-hidden="true"
class="h-0 w-0 pointer-events-none bg-transparent!"
>
<div
aria-hidden="true"
class="h-0 w-0 pointer-events-none bg-transparent!"
>
<div
class={ "fixed bottom-0 left-0 w-screen h-40vh md:h-20vh " +
class={ "fixed bottom-0 left-0 w-screen h-40vh md:h-20vh " +
"bg-transparent bg-gradient-to-t from-black from-10%" }
></div>
</div>
</footer>
</body>
></div>
</div>
</footer>
}
}