From c569bb8f8a2a7ba5013ebef2f28c03dae2a8b005 Mon Sep 17 00:00:00 2001
From: Visual-Dawg <vdawg@tuta.io>
Date: Mon, 25 Dec 2023 17:06:42 +0200
Subject: [PATCH] small tweaks (#36)

* small navbar tweaks

* adjust title sizes

* Vaxry
---
 src/lib/components/Footer.svelte    |  2 +-
 src/lib/components/Title.svelte     |  2 +-
 src/routes/Navbar.svelte            |  8 +++-----
 src/routes/news/[slug]/+page.svelte | 14 ++++++++------
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index d007e63..9095e3a 100755
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -24,7 +24,7 @@
 			<ul class="flex flex-col gap-3 font-medium">
 				<li>
 					<a href="https://github.com/vaxerski" target="_blank">
-						Vaxerski <span
+						Vaxry <span
 							class="bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent"
 							>[ Lead Developer ]</span
 						>
diff --git a/src/lib/components/Title.svelte b/src/lib/components/Title.svelte
index ad5e5a3..773903e 100755
--- a/src/lib/components/Title.svelte
+++ b/src/lib/components/Title.svelte
@@ -12,7 +12,7 @@
 		</p>
 	{/if}
 
-	<h1 class="mb-12 text-center text-5xl font-bold md:text-6xl">
+	<h1 class="mb-12 text-center text-5xl font-bold md:text-7xl lg:text-8xl">
 		<slot name="title">No title given!!!</slot>
 	</h1>
 
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index eb8b322..cd734cf 100755
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -41,7 +41,7 @@
 
 	<nav class="nav" class:!flex={isExpanded}>
 		<ul
-			class="flex flex-col items-center gap-5 rounded-full lg:h-full lg:max-h-full lg:flex-row hover:[&_li]:text-cyan-300"
+			class="flex flex-col items-center gap-5 rounded-full lg:h-full lg:max-h-full lg:flex-row [&_li]:transition-colors hover:[&_li]:text-cyan-300"
 		>
 			<li>
 				<a
@@ -60,9 +60,7 @@
 				<a href="/news">News</a>
 			</li>
 		</ul>
-		<ul
-			class="flex flex-row items-center gap-3 px-4 lg:ml-4 lg:mr-2 lg:rounded-full lg:border lg:border-purple-400"
-		>
+		<ul class="flex flex-row items-center gap-3 px-4">
 			<li>
 				<a href={discordLink} class="social-icon" aria-label="Join us on Discord" target="_blank">
 					<DiscordIcon class="h-full w-full" />
@@ -118,7 +116,7 @@
 		height: 4rem;
 		display: block;
 
-		@apply rounded-full p-1 hover:bg-purple-500 hover:text-white;
+		@apply rounded-full p-1 transition-colors hover:bg-cyan-500 hover:text-white;
 
 		@media screen(lg) {
 			width: 2rem;
diff --git a/src/routes/news/[slug]/+page.svelte b/src/routes/news/[slug]/+page.svelte
index 884475c..2c586e7 100644
--- a/src/routes/news/[slug]/+page.svelte
+++ b/src/routes/news/[slug]/+page.svelte
@@ -13,18 +13,20 @@
 </svelte:head>
 
 <article
-	class="mt-navbar mx-auto flex max-w-4xl flex-col gap-6 px-6 pt-20 md:gap-8 md:px-8 lg:gap-28"
+	class="mx-auto mt-navbar flex max-w-4xl flex-col gap-6 px-6 pt-20 md:gap-8 md:px-8 lg:mt-32 lg:gap-14"
 >
-	<Title>
-		<span slot="title">{data.meta.title}</span>
-		<time slot="subtitle" datetime={new Date(data.meta.date * 1000).toISOString()}
+	<hgroup class="flex flex-col gap-5 duration-1000 animate-in fade-in-0 slide-in-from-bottom-4">
+		<h1 class="text-4xl font-bold lg:text-6xl">{data.meta.title}</h1>
+		<time
+			class="font-medium text-slate-300"
+			datetime={new Date(data.meta.date * 1000).toISOString()}
 			>Published on {formatDate(data.meta.date * 1000)}</time
 		>
-	</Title>
+	</hgroup>
 
 	<!-- Post -->
 	<div
-		class="prose prose-slate prose-invert delay-500 duration-1000 animate-in fade-in-0 fill-mode-backwards lg:prose-xl prose-a:text-cyan-400 prose-img:rounded-lg"
+		class="prose prose-slate prose-invert transition-none delay-500 animate-in fade-in-0 fill-mode-backwards [animation-duration:2500ms] lg:prose-xl prose-a:text-cyan-400 prose-img:rounded-lg"
 	>
 		<svelte:component this={data.content} />
 	</div>