From 3bd46971619c07abb6e359b8022168bfc5a81557 Mon Sep 17 00:00:00 2001
From: Realmy <163438634+RealmyTheMan@users.noreply.github.com>
Date: Mon, 11 Nov 2024 21:47:11 +0100
Subject: [PATCH] Site looks better now yay!

---
 src/app.css                                   |  2 +
 .../{visual => functional}/Uploader.svelte    | 31 +++++--
 src/lib/components/visual/svg/Logo.svelte     | 27 +++++++
 src/routes/+layout.svelte                     | 81 +++++++++++--------
 src/routes/+page.svelte                       |  2 +-
 src/routes/about/+page.svelte                 |  1 +
 src/routes/convert/+page.svelte               | 12 ++-
 tailwind.config.ts                            |  5 ++
 8 files changed, 115 insertions(+), 46 deletions(-)
 rename src/lib/components/{visual => functional}/Uploader.svelte (74%)
 create mode 100644 src/lib/components/visual/svg/Logo.svelte
 create mode 100644 src/routes/about/+page.svelte

diff --git a/src/app.css b/src/app.css
index 913bf79..93bc35d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -7,6 +7,8 @@
 @import url(@fontsource/azeret-mono/600.css);
 
 :root {
+	--accent-bg: hsl(303, 73%, 81%);
+	--accent-fg: hsl(0, 0, 10%);
 	--font-body: "Lexend", system-ui, -apple-system, BlinkMacSystemFont,
 		"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
 		"Helvetica Neue", sans-serif;
diff --git a/src/lib/components/visual/Uploader.svelte b/src/lib/components/functional/Uploader.svelte
similarity index 74%
rename from src/lib/components/visual/Uploader.svelte
rename to src/lib/components/functional/Uploader.svelte
index a46a94a..59bb91b 100644
--- a/src/lib/components/visual/Uploader.svelte
+++ b/src/lib/components/functional/Uploader.svelte
@@ -71,24 +71,32 @@
 	ondragover={() => (dragOver = true)}
 	ondragleave={() => (dragOver = false)}
 	class={clsx(
-		"w-full h-80 max-w-screen-lg flex items-center justify-center cursor-pointer flex-col",
+		"file-uploader",
+		"w-full h-80 flex items-center justify-center cursor-pointer",
 		"border-2 border-solid border-foreground-muted-alt rounded-2xl",
 		"hover:scale-95 hover:opacity-70 transition-all duration-150 ease-out",
 		{
-			"scale-95 opacity-70": dragOver,
+			"scale-95 opacity-70 blur-xs": dragOver,
 		},
 	)}
+	class:_drag-over={dragOver}
 	ondrop={drop}
 >
 	<div
-		class="size-16 rounded-full text-background bg-foreground flex items-center justify-center"
+		class="file-uploader-center flex items-center justify-center flex-col transition-all duration-150 ease-out"
 	>
-		<Upload class="size-8" />
+		<div
+			class="size-16 rounded-full text-accent-foreground bg-accent-background flex items-center justify-center"
+		>
+			<Upload class="size-8" />
+		</div>
+		<h2 class="font-display text-2xl mt-6">
+			Drop or click to upload files
+		</h2>
+		<p class="text-foreground-muted mt-4">
+			All processing is done on your device. No file or size limit.
+		</p>
 	</div>
-	<h2 class="font-display text-2xl mt-6">Drop or click to upload files</h2>
-	<p class="text-foreground-muted mt-4">
-		All processing is done on your device. No file or size limit.
-	</p>
 </button>
 
 <input
@@ -98,3 +106,10 @@
 	onchange={addFiles}
 	multiple
 />
+
+<style>
+	.file-uploader:hover .file-uploader-center,
+	.file-uploader._drag-over .file-uploader-center {
+		@apply scale-105;
+	}
+</style>
diff --git a/src/lib/components/visual/svg/Logo.svelte b/src/lib/components/visual/svg/Logo.svelte
new file mode 100644
index 0000000..540cd63
--- /dev/null
+++ b/src/lib/components/visual/svg/Logo.svelte
@@ -0,0 +1,27 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="0 0 404 96"
+	style="
+		fill-rule: evenodd;
+		clip-rule: evenodd;
+		stroke-linejoin: round;
+		stroke-miterlimit: 2;
+	"
+>
+	<path
+		d="M37.166,96l27.291,0l37.303,-96l-27.017,0l-23.726,66.24l-23.588,-66.24l-27.429,0l37.166,96Z"
+		style="fill-rule: nonzero"
+	/>
+	<path
+		d="M194.057,96l0,-21.669l-58.56,0l0,-16.32l56.64,0l0,-21.668l-56.64,-0l0,-14.674l57.874,-0l0,-21.669l-82.011,-0l0,96l82.697,0Z"
+		style="fill-rule: nonzero"
+	/>
+	<path
+		d="M209.143,33.463l-0,-33.463l58.697,0c24.686,0 37.029,12.206 37.029,31.68c-0,16.869 -10.286,29.349 -31.132,30.994l33.189,33.326l-34.835,0l-62.948,-62.537Zm71.588,-0.686c0,-6.72 -6.308,-11.52 -15.634,-11.52l-31.817,0l0,23.452l31.817,-0c9.189,-0 15.634,-4.526 15.634,-11.932Zm-71.588,13.692l24.137,49.531l-24.137,0l-0,-49.531Z"
+	/>
+	<path
+		d="M370.971,96l0,-74.194l32.915,-0l-0,-21.806l-89.966,0l0,21.806l32.914,-0l0,74.194l24.137,0Z"
+		style="fill-rule: nonzero"
+	/>
+</svg>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3dee0cc..e1ac4e3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { onMount } from "svelte";
 	import "../app.css";
 	import { goto } from "$app/navigation";
-	import clsx from "clsx";
-	import { blur, duration, transition } from "$lib/animation";
+	import { blur, duration } from "$lib/animation";
 	import { quintOut } from "svelte/easing";
 	import { files } from "$lib/store/index.svelte";
+	import Logo from "$lib/components/visual/svg/Logo.svelte";
 	let { children, data } = $props();
 
 	let navWidth = $state(1);
@@ -18,6 +17,7 @@
 		[files.files.length > 0
 			? `Convert ${files.files.length} file${files.files.length > 1 ? "s" : ""}`
 			: `Convert`]: "/convert",
+		About: "/about",
 	});
 
 	const linkCount = $derived(Object.keys(links).length);
@@ -26,41 +26,54 @@
 	);
 </script>
 
-<div class="w-full h-full flex items-center pt-72 flex-col gap-4">
+<div class="w-full h-full flex items-center pt-48 flex-col gap-10">
 	<div
-		bind:clientWidth={navWidth}
-		class="bg-background relative w-full h-16 max-w-screen-lg border-2 p-1 border-solid border-foreground-muted-alt rounded-2xl flex"
+		class="w-full max-w-screen-lg p-1 border-solid border-2 rounded-2xl border-foreground-muted-alt grid"
+		style="grid-template-columns: auto 1fr"
 	>
 		<div
-			class="absolute pointer-events-none top-1 bg-foreground h-[calc(100%-8px)] rounded-xl"
-			style="width: {navWidth / linkCount - 8}px; left: {(navWidth /
-				linkCount) *
-				linkIndex +
-				4}px; transition: {duration - 200}ms ease left;"
-		></div>
-		{#each Object.entries(links) as [name, link] (link)}
-			<button
-				class="w-1/2 h-full flex items-center justify-center rounded-xl relative"
-				onclick={() => {
-					const keys = Object.keys(links);
-					const currentIndex = keys.findIndex(
-						(key) => links[key] === data.pathname,
-					);
-					const nextIndex = keys.findIndex(
-						(key) => links[key] === link,
-					);
-					shouldGoBack = nextIndex < currentIndex;
-					console.log({ shouldGoBack });
-					goto(link);
-				}}
-			>
-				<span class="mix-blend-difference invert">
-					{name}
-				</span>
-			</button>
-		{/each}
+			class="px-4 m-1 mr-3 flex items-center bg-accent-background fill-accent-foreground rounded-xl"
+		>
+			<div class="h-6">
+				<Logo />
+			</div>
+		</div>
+
+		<div
+			bind:clientWidth={navWidth}
+			class="w-full flex bg-background relative h-16"
+		>
+			<div
+				class="absolute pointer-events-none top-1 bg-foreground h-[calc(100%-8px)] rounded-xl"
+				style="width: {navWidth / linkCount - 8}px; left: {(navWidth /
+					linkCount) *
+					linkIndex +
+					4}px; transition: {duration - 200}ms ease left;"
+			></div>
+			{#each Object.entries(links) as [name, link] (link)}
+				<button
+					class="w-1/2 h-full flex items-center justify-center rounded-xl relative font-display"
+					onclick={() => {
+						const keys = Object.keys(links);
+						const currentIndex = keys.findIndex(
+							(key) => links[key] === data.pathname,
+						);
+						const nextIndex = keys.findIndex(
+							(key) => links[key] === link,
+						);
+						shouldGoBack = nextIndex < currentIndex;
+						console.log({ shouldGoBack });
+						goto(link);
+					}}
+				>
+					<span class="mix-blend-difference invert">
+						{name}
+					</span>
+				</button>
+			{/each}
+		</div>
 	</div>
-	<div class="w-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">
 				<div
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9b95aeb..1cbfc74 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Uploader from "$lib/components/visual/Uploader.svelte";
+	import Uploader from "$lib/components/functional/Uploader.svelte";
 	import { converters } from "$lib/converters";
 	import { files } from "$lib/store/index.svelte";
 
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
new file mode 100644
index 0000000..6e565c8
--- /dev/null
+++ b/src/routes/about/+page.svelte
@@ -0,0 +1 @@
+the???
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte
index cb23dd9..d57fbeb 100644
--- a/src/routes/convert/+page.svelte
+++ b/src/routes/convert/+page.svelte
@@ -13,14 +13,20 @@
 	{/if}
 	{#each files.files as file, i}
 		<div
-			class="flex items-center w-full max-w-screen-lg border-2 border-solid border-foreground-muted-alt rounded-xl px-4 py-2"
+			class="flex items-center w-full border-2 border-solid border-foreground-muted-alt rounded-xl pl-4 pr-2 py-2"
 		>
 			<div class="flex items-center flex-grow">
 				{file.name}
 			</div>
-			<div class="flex gap-4 flex-shrink-0">
+			<div class="flex items-center gap-2 flex-shrink-0">
+				<span>from</span>
+				<span
+					class="py-2 px-3 font-display bg-foreground text-background rounded-xl"
+					>.{file.name.split(".").slice(-1)}</span
+				>
+				<span>to</span>
 				<select
-					class="border-2 border-solid border-foreground-muted-alt rounded-xl px-4 py-2 focus:!outline-none"
+					class="font-display border-2 border-solid border-foreground-muted-alt rounded-xl p-2 focus:!outline-none"
 					bind:value={files.conversionTypes[i]}
 				>
 					{#each converters[0].supportedFormats as conversionType}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2065983..2a8ab4c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -10,11 +10,16 @@ export default {
 				foreground: "var(--fg)",
 				"foreground-muted": "var(--fg-muted)",
 				"foreground-muted-alt": "var(--fg-muted-alt)",
+				"accent-background": "var(--accent-bg)",
+				"accent-foreground": "var(--accent-fg)",
 			},
 			fontFamily: {
 				display: "var(--font-display)",
 				body: "var(--font-body)",
 			},
+			blur: {
+				xs: "2px",
+			},
 		},
 	},