From e335faa7a7bbbff9b81dc5c83c116d164fcb38b2 Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Sun, 21 Apr 2024 08:23:21 -0400
Subject: [PATCH] more general mobile support

---
 src/lib/components/Footer.svelte     | 10 +++++-----
 src/lib/components/HeaderLink.svelte |  2 +-
 src/routes/+layout.svelte            |  2 +-
 src/routes/+page.svelte              |  6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 1506d72..0d0d53c 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -10,9 +10,9 @@
 
 <div class="flex py-2 w-full h-full shadow-lg bg-gray-500/10">
 	<div class="container flex">
-		<div class="hidden flex-col flex-1 my-auto text-sm md:flex text-neutral-500">
+		<div class="flex flex-col flex-1 my-auto text-xs md:text-sm text-neutral-500">
 			<p class="font-bold">cirroskais.xyz ― cirro's website</p>
-			<div class="flex space-x-0.5">
+			<div class="hidden space-x-0.5 md:flex">
 				<div class="my-auto w-5 h-5 font-bold">
 					<Eye></Eye>
 				</div>
@@ -20,7 +20,7 @@
 					This website has been viewed <span class="font-bold">{$page.data.counter}</span> times.
 				</p>
 			</div>
-			<div class="flex space-x-0.5">
+			<div class="flex hidden space-x-0.5 md:flex">
 				<div class="my-auto w-5 h-5 font-bold">
 					<Forgejo></Forgejo>
 				</div>
@@ -32,12 +32,12 @@
 				</p>
 			</div>
 		</div>
-		<div class="hidden flex-col flex-1 my-auto text-sm xl:flex text-neutral-500">
+		<div class="hidden flex-col flex-1 my-auto text-xs md:text-sm xl:flex text-neutral-500">
 			<div class="mx-auto w-5 h-5 transition-colors focus:text-cirro hover:text-cirro">
 				<Heart></Heart>
 			</div>
 		</div>
-		<div class="hidden flex-col flex-1 my-auto text-sm md:flex text-neutral-500">
+		<div class="flex flex-col flex-1 my-auto text-xs md:text-sm text-neutral-500">
 			<div class="flex ml-auto space-x-1.5">
 				<p>Built with</p>
 				<a
diff --git a/src/lib/components/HeaderLink.svelte b/src/lib/components/HeaderLink.svelte
index 53d56de..7afc2b9 100644
--- a/src/lib/components/HeaderLink.svelte
+++ b/src/lib/components/HeaderLink.svelte
@@ -14,7 +14,7 @@
 
 <a
 	{href}
-	class="my-auto text-lg transition-all {selected
+	class="my-auto md:text-lg transition-all {selected
 		? 'font-bold tracking-wider'
 		: 'hover:text-neutral-400 focus:text-neutral-400'}"
 >
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5a74dc9..1bfa647 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -37,6 +37,6 @@
 	</div>
 {/key}
 
-<div class="hidden mt-4 w-screen md:block">
+<div class="mt-4 w-screen">
 	<Footer></Footer>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ca04994..45421b4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -82,17 +82,17 @@
 			<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 shadow-lg">
 				<div class="flex space-x-2.5">
 					<Image
-						style="w-24 h-24"
+						style="w-16 h-16 md:w-24 md:h-24"
 						src={$page.data.lastfm.recenttracks.track[0].image.find(
 							(_) => _.size == 'extralarge'
 						)?.['#text']}
 						alt="Album art for {$page.data.lastfm?.recenttracks?.track[0]?.name}"
 					/>
 					<div class="overflow-x-auto my-auto">
-						<p class="text-2xl whitespace-nowrap text-neutral-300">
+						<p class="text-lg whitespace-nowrap md:text-2xl text-neutral-300">
 							{$page.data.lastfm?.recenttracks?.track[0]?.name}
 						</p>
-						<p class="text-xl text-neutral-500">
+						<p class="md:text-xl text-neutral-500">
 							{$page.data.lastfm?.recenttracks?.track[0]?.artist?.['#text']}
 						</p>
 					</div>