From 4584fbcf09bd2830ce26b042e53c60417d682bd4 Mon Sep 17 00:00:00 2001
From: Realmy <163438634+RealmyTheMan@users.noreply.github.com>
Date: Tue, 12 Nov 2024 19:07:06 +0100
Subject: [PATCH] Final mobile optimizations and about page source code link

---
 src/app.css                     | 23 +++++++++++++++++++++--
 src/routes/+layout.svelte       | 25 +++++++++++++++++--------
 src/routes/about/+page.svelte   | 20 ++++++++++++++++++--
 src/routes/convert/+page.svelte |  2 +-
 tailwind.config.ts              |  1 +
 5 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/src/app.css b/src/app.css
index 73ac6a3..00893ec 100644
--- a/src/app.css
+++ b/src/app.css
@@ -17,8 +17,24 @@
 	--fg: hsl(0, 0%, 10%);
 	--fg-muted: hsl(0, 0%, 50%);
 	--fg-muted-alt: hsl(0, 0%, 75%);
+	--fg-highlight: hsl(303, 52%, 42%);
 	--fg-failure: hsl(0, 67%, 49%);
-	--transition: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
+	--transition: linear(
+		0,
+		0.006,
+		0.025 2.8%,
+		0.101 6.1%,
+		0.539 18.9%,
+		0.721 25.3%,
+		0.849 31.5%,
+		0.937 38.1%,
+		0.968 41.8%,
+		0.991 45.7%,
+		1.006 50.1%,
+		1.015 55%,
+		1.017 63.9%,
+		1.001
+	);
 }
 
 body {
@@ -33,7 +49,10 @@ body {
 
 	.btn {
 		@apply font-display flex items-center justify-center overflow-hidden relative cursor-pointer px-4 border-2 border-solid bg-background border-foreground-muted-alt rounded-xl p-2 focus:!outline-none hover:scale-105 duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none;
-		transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
+		transition:
+			opacity 0.2s ease,
+			transform 0.2s ease,
+			background-color 0.2s ease;
 	}
 
 	.btn-highlight {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 29a9833..f5488ad 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -44,13 +44,24 @@
 
 <div
 	role="main"
-	class="w-full h-full flex items-center p-4 flex-col gap-16"
+	class="w-full h-full max-w-screen-lg mx-auto p-4"
 	ondragenter={maybeNavToHome}
 >
+	<div class="flex justify-center mb-5 lg:hidden">
+		<a
+			href="/"
+			class="px-6 relative h-16 mr-3 justify-center items-center bg-accent-background fill-accent-foreground rounded-xl md:hidden flex"
+		>
+			<div class="h-6 w-24 items-center flex justify-center">
+				<Logo />
+			</div>
+		</a>
+	</div>
+
 	<div
-		class="w-full max-w-screen-md p-1 border-solid border-2 rounded-2xl border-foreground-muted-alt flex"
+		class="w-full max-w-screen-md p-1 border-solid border-2 rounded-2xl border-foreground-muted-alt flex mb-10 mx-auto lg:mt-5"
 	>
-		<div class="p-1">
+		<div class="md:p-1">
 			<a
 				href="/"
 				class="px-3 relative w-full h-full mr-3 justify-center items-center bg-accent-background fill-accent-foreground rounded-xl md:flex hidden"
@@ -110,13 +121,11 @@
 			{/each}
 		</div>
 	</div>
-	<div
-		class="w-full max-w-screen-lg h-full grid grid-cols-1 grid-rows-1 relative"
-	>
+	<div class="w-full max-w-screen-lg grid grid-cols-1 grid-rows-1 relative">
 		{#key data.pathname}
-			<div class="w-full h-full">
+			<div class="w-full">
 				<div
-					class="absolute top-0 left-0 w-full h-full"
+					class="absolute top-0 left-0 w-full"
 					in:blur={{
 						duration,
 						easing: quintOut,
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index ee48e12..7c226c9 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -55,6 +55,19 @@
 	<h2
 		class="font-display text-3xl mt-12 text-transition"
 		style="--delay: {5 * multiplier}ms"
+	>
+		👨‍💻 source code
+	</h2>
+	<p class="mt-6 text-transition" style="--delay: {6 * multiplier}ms">
+		VERT is licensed under AGPL-3.0, and the source code can be found on <a
+			class="hover:underline font-medium text-foreground-highlight"
+			href="https://github.com/not-nullptr/VERT">GitHub</a
+		>.
+	</p>
+
+	<h2
+		class="font-display text-3xl mt-12 text-transition"
+		style="--delay: {7 * multiplier}ms"
 	>
 		🎨 credits
 	</h2>
@@ -63,7 +76,7 @@
 			<div class="hover:scale-105 w-48 transition-transform">
 				<div
 					class="border-2 credit-transition border-solid border-foreground-muted-alt rounded-2xl overflow-hidden"
-					style="--delay: {i * 50 + multiplier * 5}ms;"
+					style="--delay: {i * 50 + multiplier * 8}ms;"
 				>
 					<a class="w-48" href={credit.url} target="_blank">
 						<img src={credit.avatar} alt="{credit.name}'s avatar" />
@@ -79,7 +92,10 @@
 		{/each}
 	</div>
 
-	<p class="text-foreground-muted text-base mt-10">
+	<p
+		class="text-foreground-muted text-base mt-10 text-transition"
+		style="--delay: {9 * multiplier}ms"
+	>
 		(obviously inspired by <a
 			href="https://cobalt.tools"
 			class="hover:underline">cobalt.tools</a
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte
index d7ed613..47f04eb 100644
--- a/src/routes/convert/+page.svelte
+++ b/src/routes/convert/+page.svelte
@@ -215,7 +215,7 @@
 					</div>
 				</div>
 
-				<div class="flex gap-4 mt-8">
+				<div class="grid md:grid-cols-2 gap-3 mt-8">
 					<button
 						onclick={convertAll}
 						class={clsx("btn flex-grow", {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4baf78a..07c48f4 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -11,6 +11,7 @@ export default {
 				"foreground-muted": "var(--fg-muted)",
 				"foreground-muted-alt": "var(--fg-muted-alt)",
 				"foreground-failure": "var(--fg-failure)",
+				"foreground-highlight": "var(--fg-highlight)",
 				"accent-background": "var(--accent-bg)",
 				"accent-foreground": "var(--accent-fg)",
 			},