From 35c697cac5ee4bb5a0bd637327d23f4f4bf8ba51 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Fri, 17 Jan 2025 19:00:19 +0300
Subject: [PATCH] Fix jumping of content between pages

Fix jumping of content after transition ends if the previous page was taller
---
 src/routes/+page.svelte | 59 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 402163e..914e83e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -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>