From b69349e62afca23b9c91a650112bf22559ad3a63 Mon Sep 17 00:00:00 2001
From: Andrew Brower <bigspeedfpv@gmail.com>
Date: Mon, 8 Jul 2024 14:39:22 +0200
Subject: [PATCH] feat: better vertical spacing for mobile

---
 src/lib/components/NowPlaying.svelte |  2 +-
 src/routes/+page.svelte              | 99 +++++++++++++++-------------
 2 files changed, 55 insertions(+), 46 deletions(-)

diff --git a/src/lib/components/NowPlaying.svelte b/src/lib/components/NowPlaying.svelte
index 80fd439..5e13cec 100644
--- a/src/lib/components/NowPlaying.svelte
+++ b/src/lib/components/NowPlaying.svelte
@@ -29,7 +29,7 @@
 	song = song.isPlaying ? song : mock;
 </script>
 
-<div class="flex items-end justify-center fixed left-0 bottom-0 mb-4 overflow-hidden w-full">
+<div class="z-50 flex items-end justify-center fixed left-0 bottom-0 mb-4 overflow-hidden w-full">
 	<div
 		class="flex gap-4 justify-center items-center px-4 py-2 border-1 border-white/10 rounded-md shadow-lg bg-gray-900/5 backdrop-blur-lg">
 		<a href={song.album.url} target="_blank">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5a0b024..dc01cb6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -42,58 +42,62 @@
 </svelte:head>
 
 <section>
-	<div class="w-screen h-screen flex justify-center overflow-hidden">
+	<div
+		class="w-screen h-screen pt-24 md:p-0 flex flex-col justify-start md:justify-center items-center overflow-hidden">
 		<!-- fancy blurred background gradient -->
-		<div class="w-screen h-screen fixed top-0 left-0 flex justify-center items-center">
+		<div class="grid">
 			<div
-				class="w-[50rem] h-64 fixed bg-gradient-to-r from-teal-500 to-blue-500 opacity-30 blur-superxl rounded-oval">
+				class="grid-initial w-full h-full flex flex-col justify-start md:justify-center items-center">
+				<div
+					class="w-[50rem] h-64 fixed bg-gradient-to-r from-teal-500 to-blue-500 opacity-30 blur-superxl rounded-oval">
+				</div>
 			</div>
-		</div>
 
-		<div
-			class="w-screen h-screen flex flex-col md:flex-row justify-center items-center p-6 gap-4 md:gap-8 fixed top-0 left-0">
-			<enhanced:img
-				src="$lib/assets/profile.png"
-				alt="Profile"
-				class="rounded-full shadow-2xl w-32 h-32 md:w-48 md:h-48">
-			</enhanced:img>
+			<div
+				class="z-10 grid-initial flex flex-col md:flex-row justify-start md:justify-center items-center p-6 gap-4 md:gap-8">
+				<enhanced:img
+					src="$lib/assets/profile.png"
+					alt="Profile"
+					class="rounded-full shadow-2xl w-32 h-32 md:w-48 md:h-48">
+				</enhanced:img>
 
-			<div class="flex flex-col justify-center align-center md:align-left gap-4 md:gap-2">
-				<h1 class="text-5xl text-center md:text-left">
-					Hey! I'm <strong>Andrew.</strong>
-				</h1>
-				<h2 class="text-3xl text-center md:text-left">
-					I'm a <strong>Software Engineer.</strong>
-				</h2>
+				<div class="flex flex-col justify-center align-center md:align-left gap-4 md:gap-2">
+					<h1 class="text-5xl text-center md:text-left">
+						Hey! I'm <strong>Andrew.</strong>
+					</h1>
+					<h2 class="text-3xl text-center md:text-left">
+						I'm a <strong>Software Engineer.</strong>
+					</h2>
 
-				<div class="text-center md:text-left">
-					{#each skillChunks as chunk}
-						<span class="whitespace-nowrap">
-							{#each chunk as skill}
-								<a href={skill.href}>
-									<img
-										src={skill.src}
-										class="inline-block h-10 w-10 mx-0.5"
-										alt={skill.alt} />
-								</a>
-							{/each}
-						</span>
-					{/each}
-				</div>
+					<div class="text-center md:text-left">
+						{#each skillChunks as chunk}
+							<span class="whitespace-nowrap">
+								{#each chunk as skill}
+									<a href={skill.href}>
+										<img
+											src={skill.src}
+											class="inline-block h-10 w-10 mx-0.5"
+											alt={skill.alt} />
+									</a>
+								{/each}
+							</span>
+						{/each}
+					</div>
 
-				<!-- links -->
-				<div class="flex justify-center md:justify-start">
-					{#each links as link}
-						{#if link.icon}
-							<a href={link.href} target="_blank" title={link.name}>
-								<Icon
-									icon={link.icon}
-									width="40px"
-									height="40px"
-									class="opacity-50 hover:opacity-75 transition" />
-							</a>
-						{/if}
-					{/each}
+					<!-- links -->
+					<div class="flex justify-center md:justify-start">
+						{#each links as link}
+							{#if link.icon}
+								<a href={link.href} target="_blank" title={link.name}>
+									<Icon
+										icon={link.icon}
+										width="40px"
+										height="40px"
+										class="opacity-50 hover:opacity-75 transition" />
+								</a>
+							{/if}
+						{/each}
+					</div>
 				</div>
 			</div>
 		</div>
@@ -108,4 +112,9 @@
 	.rounded-oval {
 		border-radius: 50%;
 	}
+
+	.grid-initial {
+		grid-row: 1;
+		grid-column: 1;
+	}
 </style>
-- 
2.51.2