RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix jumping of content between pages 

Fix jumping of content after transition ends if the previous page was taller
This commit is contained in:
JovannMC 2025-01-17 19:00:19 +03:00
parent 2529e5d687
commit 35c697cac5
No known key found for this signature in database
1 changed files with 52 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/routes/+page.svelte
View File

@ -11,15 +11,15 @@
</script>
<div
class="w-screen px-8 h-full flex items-center justify-center overflow-hidden"
class="absolute -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
>
<div
class="absolute -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
>
<VertVBig class="fill-[--fg] opacity-50" />
</div>
<VertVBig class="fill-[--fg] opacity-50" />
</div>
<div class="w-screen flex items-center justify-center flex-grow -mt-0 md:-mt-12">
<div
class="w-screen px-8 h-full flex items-start justify-center overflow-hidden max-h-screen"
>
<div class="content w-screen flex items-center justify-center flex-grow">
<div class="max-w-5xl w-full">
<div
class="flex items-center h-auto gap-12 md:gap-24 md:flex-row flex-col"
@ -44,3 +44,48 @@
</div>
</div>
</div>
<style>
/* Centers content on most screen sizes, excluding mobile */
@media screen and (min-width: 768px) {
.content {
padding-top: 10vh;
padding-bottom: 10vh;
}
}
@media screen and (min-width: 768px) and (min-height: 576px) {
.content {
padding-top: 15vh;
padding-bottom: 15vh;
}
}
@media screen and (min-width: 768px) and (min-height: 720px) {
.content {
padding-top: 20vh;
padding-bottom: 20vh;
}
}
@media screen and (min-width: 768px) and (min-height: 1080px) {
.content {
padding-top: 25vh;
padding-bottom: 25vh;
}
}
@media screen and (min-width: 768px) and (min-height: 1440px) {
.content {
padding-top: 30vh;
padding-bottom: 30vh;
}
}
@media screen and (min-width: 768px) and (min-height: 2160px) {
.content {
padding-top: 35vh;
padding-bottom: 35vh;
}
}
</style>