guz013/keikos.work
1
0
Fork 0
Code Issues Pull Requests Activity

feat: snap scroll position

Browse Source
This commit is contained in:
Guz
2024-12-17 10:38:23 -03:00
parent 48a698a5ae
commit 7f246ae2eb
2 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
handlers/pages/home.templ
View File

@@ -21,7 +21,9 @@ func (p *Home) ServeHTTP(w http.ResponseWriter, r *http.Request) {
}
templ (p *Home) page() {
@layouts.Page() {
@layouts.Page(layouts.PageInfo{
BodyClasses: "scroll-smooth snap-normal snap-y snap-mandatory",
}) {
<header class="fixed w-100% h-screen md:flex justify-center items-center overflow-x-hidden">
<h1
class={ "absolute z-3 top-0 left-0 text-stroke-1px text-stroke-white text-transparent text-9xl m-0 mt-4 vertical-lr",
@@ -42,10 +44,10 @@ templ (p *Home) page() {
</div>
</header>
<div
class="relative w-100% h-screen bg-gradient-to-t from-black to-transparent to-50% pointer-events-none"
class="relative w-100% h-screen bg-gradient-to-t from-black to-transparent to-50% pointer-events-none snap-center"
aria-hidden="true"
></div>
<main class="relative bg-black w-full h-screen md:flex justify-center items-center overflow-x-hidden">
<main class="relative bg-black w-full h-screen md:flex justify-center items-center overflow-x-hidden snap-center">
<div class="relative w-full h-full flex flex-col justify-between md:w-fit md:h-fit">
<h2
class={ "relative z-4 m-0 pt-4 text-9xl vertical-lr text-stroke-1px text-stroke-white text-transparent",
@@ -140,7 +142,7 @@ templ (p *Home) page() {
></span>
</main>
<footer
class={ "relative w-full h-screen bg-heropattern bg-black bg-top overflow-x-hidden",
class={ "relative w-full h-screen bg-heropattern bg-black bg-top overflow-x-hidden snap-center",
"md:flex justify-center items-center" }
>
<div class={ "relative z-3 md:flex flex-col items-end" }>