From 3fa26505b167e40b941d5358e9f3c0484be81399 Mon Sep 17 00:00:00 2001
From: Realmy <163438634+RealmyTheMan@users.noreply.github.com>
Date: Wed, 13 Nov 2024 20:06:08 +0100
Subject: [PATCH] Completed dark mode and about page changes

---
 src/app.scss                                  | 14 ++++-----
 .../components/functional/FancyMenu.svelte    |  2 +-
 src/routes/+layout.svelte                     |  2 +-
 src/routes/about/+page.svelte                 | 30 ++++++++++++-------
 4 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 5eb4525..7ebe433 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -36,18 +36,18 @@
 	--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-highlight: hsl(303, 61%, 47%);
 	--fg-failure: hsl(0, 67%, 49%);
 }
 
 @mixin dark {
-	--accent-bg: hsl(303, 73%, 35%);
-	--accent-fg: hsl(0, 0%, 90%);
-	--bg: hsl(0, 0%, 10%);
+	--accent-bg: hsl(304, 41%, 21%);
+	--accent-fg: hsl(303, 73%, 81%);
+	--bg: hsl(0, 0%, 8%);
 	--fg: hsl(0, 0%, 90%);
-	--fg-muted: hsl(0, 0%, 65%);
-	--fg-muted-alt: hsl(0, 0%, 50%);
-	--fg-highlight: hsl(303, 52%, 60%);
+	--fg-muted: hsl(0, 0%, 50%);
+	--fg-muted-alt: hsl(0, 0%, 25%);
+	--fg-highlight: hsl(303, 64%, 65%);
 	--fg-failure: hsl(0, 67%, 80%);
 }
 
diff --git a/src/lib/components/functional/FancyMenu.svelte b/src/lib/components/functional/FancyMenu.svelte
index 3c2157e..b52c75d 100644
--- a/src/lib/components/functional/FancyMenu.svelte
+++ b/src/lib/components/functional/FancyMenu.svelte
@@ -38,7 +38,7 @@
 	{/if}
 	{#each links as { name, url } (url)}
 		<a
-			class="w-1/2 px-2 h-[calc(100%-16px)] mt-2 flex items-center justify-center rounded-xl relative font-display overflow-hidden"
+			class="w-1/2 px-2 h-[calc(100%-16px)] mt-2 flex items-center justify-center rounded-xl relative overflow-hidden font-medium"
 			href={url}
 			onclick={() => {
 				if (shouldGoBack) {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 81ace1a..01f8bea 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -88,7 +88,7 @@
 	<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"
+			class="px-4 relative h-14 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 />
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 83c8c62..19d4a3e 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -63,18 +63,28 @@
 		class="font-display text-3xl mt-12 text-transition"
 		style="--delay: {5 * multiplier}ms"
 	>
-		👨‍💻 source code
+		🔗 resources
 	</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>
+	<ul class="list-disc list-inside mt-6">
+		<li class="text-transition" style="--delay: {6 * multiplier}ms">
+			<a
+				href="https://github.com/notnullptr/VERT"
+				class="text-foreground-highlight hover:underline">Source code</a
+			> (hosted on GitHub, licensed under AGPL-3.0)
+		</li>
+
+		<li class="text-transition" style="--delay: {7 * multiplier}ms">
+			<a
+				href="https://discord.gg/8XXZ7TFFrK"
+				class="text-foreground-highlight hover:underline"
+				>Discord server</a
+			> (for chit-chat, suggestions, and support)
+		</li>
+	</ul>
 
 	<h2
 		class="font-display text-3xl mt-12 text-transition"
-		style="--delay: {7 * multiplier}ms"
+		style="--delay: {8 * multiplier}ms"
 	>
 		🎨 credits
 	</h2>
@@ -83,7 +93,7 @@
 			<div class="hover:scale-105 w-56 transition-transform">
 				<div
 					class="border-2 credit-transition border-solid border-foreground-muted-alt rounded-2xl overflow-hidden"
-					style="--delay: {i * 50 + multiplier * 8}ms;"
+					style="--delay: {i * 50 + multiplier * 9}ms;"
 				>
 					<a class="w-48" href={credit.url} target="_blank">
 						<img src={credit.avatar} alt="{credit.name}'s avatar" />
@@ -101,7 +111,7 @@
 
 	<p
 		class="text-foreground-muted text-base mt-10 text-transition"
-		style="--delay: {9 * multiplier}ms"
+		style="--delay: {10 * multiplier}ms"
 	>
 		(obviously inspired by <a
 			href="https://cobalt.tools"