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

fix: strange scrolling behavior in firefox mobile

Browse Source
This commit is contained in:
Guz
2024-12-17 20:49:48 -03:00
parent ddae711489
commit 8297a56b82
2 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/uno.css
View File

@@ -33,6 +33,7 @@
.h-0\.75rem{height:0.75rem;}
.h-100\%,
.h-full{height:100%;}
.h-100vh{height:100vh;}
.h-15rem{height:15rem;}
.h-1rem{height:1rem;}
.h-3rem{height:3rem;}
@@ -66,6 +67,7 @@
.justify-between{justify-content:space-between;}
.gap-2{gap:0.5rem;}
.overflow-x-hidden{overflow-x:hidden;}
.overflow-y-hidden{overflow-y:hidden;}
.scroll-smooth{scroll-behavior:smooth;}
.bg-black{--un-bg-opacity:1;background-color:rgb(0 0 0 / var(--un-bg-opacity)) /* #000 */;}
.bg-gray{--un-bg-opacity:1;background-color:rgb(156 163 175 / var(--un-bg-opacity)) /* #9ca3af */;}
@@ -100,7 +102,6 @@
.underline-offset-3{text-underline-offset:3px;}
.no-underline{text-decoration:none;}
.opacity-50{opacity:0.5;}
.h-screen{height:100vh;height:100dvh;}
.min-h-screen{min-height:100vh;min-height:100dvh;}
.w-screen{width:100vw;width:100dvw;}
.text-stroke-1px{-webkit-text-stroke-width:1px;text-stroke-width:1px;}

12
handlers/pages/home.templ
View File

@@ -30,7 +30,7 @@ templ (p *Home) page() {
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"
class="fixed w-100% h-100vh md:flex justify-center items-center overflow-x-hidden"
id="header"
aria-labelledby="header-title"
>
@@ -55,11 +55,11 @@ 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 snap-center"
class="relative w-100% h-100vh 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 snap-center"
class="relative bg-black w-full h-100vh md:flex justify-center items-center overflow-x-hidden overflow-y-hidden snap-center"
id="socials"
aria-labelledby="socials-title"
>
@@ -156,7 +156,7 @@ templ (p *Home) page() {
></span>
</main>
<section
class="relative py-20 bg-heropattern bg-black bg-top w-full h-screen flex justify-center overflow-x-hidden snap-center"
class="relative py-20 bg-heropattern bg-black bg-top w-full h-100vh flex justify-center overflow-x-hidden snap-center"
id="worldbuilding"
aria-labelledby="worldbuilding-title"
>
@@ -194,8 +194,8 @@ templ (p *Home) page() {
</div>
</section>
<footer
class={ "relative w-full h-screen bg-heropattern bg-black bg-top overflow-x-hidden snap-center",
"md:flex justify-center items-center" }
class={ "relative w-full h-100vh bg-heropattern bg-black bg-top overflow-x-hidden snap-center",
"flex items-end md:justify-center md:items-center" }
id="footer"
aria-label="contact"
>