From 3bb13dbdb0f30e19bc4fee34219a51fcc4648169 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Tue, 16 Jan 2024 19:41:09 +0100
Subject: [PATCH] refactor: use consistent styling for icons and footer

---
 src/lib/components/site/mode-toggle.svelte    |  6 +++---
 src/lib/components/site/nav/mobile-nav.svelte |  2 +-
 src/lib/components/site/site-footer.svelte    | 14 +++++++++++---
 src/lib/components/site/site-header.svelte    | 10 +++++-----
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/site/mode-toggle.svelte b/src/lib/components/site/mode-toggle.svelte
index 086d37d..afffe5c 100644
--- a/src/lib/components/site/mode-toggle.svelte
+++ b/src/lib/components/site/mode-toggle.svelte
@@ -7,12 +7,12 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger asChild let:builder>
-		<Button builders={[builder]} variant="ghost" class="w-9 px-0">
+		<Button builders={[builder]} variant="ghost" class="h-9 w-9">
 			<Sun
-				class="dark:-roate-90 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:scale-0"
+				class="absolute h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
 			/>
 			<Moon
-				class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+				class="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
 			/>
 			<span class="sr-only">Toggle theme</span>
 		</Button>
diff --git a/src/lib/components/site/nav/mobile-nav.svelte b/src/lib/components/site/nav/mobile-nav.svelte
index e04e153..8777ca7 100644
--- a/src/lib/components/site/nav/mobile-nav.svelte
+++ b/src/lib/components/site/nav/mobile-nav.svelte
@@ -23,7 +23,7 @@
 	</Sheet.Trigger>
 	<Sheet.Content side="right" class="pr-0">
 		<MobileLink href="/" class="flex items-center" bind:open>
-			<span class="sr-only">Return to home</span>
+			<span class="sr-only">Logo icon (return home)</span>
 			<img src={Icons.logoIcon} class="mr-2 h-4 w-4" alt="icon of hellob.art" />
 			<span class="font-mono font-bold tracking-tighter">{siteConfig.name}</span>
 		</MobileLink>
diff --git a/src/lib/components/site/site-footer.svelte b/src/lib/components/site/site-footer.svelte
index 51e1100..e8def73 100644
--- a/src/lib/components/site/site-footer.svelte
+++ b/src/lib/components/site/site-footer.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { Blocks, Cloud } from 'lucide-svelte';
 	import { siteConfig } from '$lib/config/site';
 	import Separator from '$lib/components/ui/separator/separator.svelte';
+	import { Code } from 'radix-icons-svelte';
 </script>
 
 <footer class="container py-6">
@@ -13,7 +15,9 @@
 	<div class="flex justify-center">
 		<div class="flex h-5 items-center space-x-4 text-xs">
 			<div>
-				Built using <a
+				<span class="hidden sm:inline">Built using</span>
+				<Blocks class="inline h-[1rem] w-[1rem] sm:hidden" />
+				<a
 					href={siteConfig.links.shadcnSvelte}
 					target="_blank"
 					rel="noreferrer"
@@ -22,7 +26,9 @@
 			</div>
 			<Separator orientation="vertical" />
 			<div>
-				Hosted on <a
+				<span class="hidden sm:inline">Hosted on</span>
+				<Cloud class="inline h-[1rem] w-[1rem] sm:hidden" />
+				<a
 					href={siteConfig.links.vercel}
 					target="_blank"
 					rel="noreferrer"
@@ -31,7 +37,9 @@
 			</div>
 			<Separator orientation="vertical" />
 			<div>
-				Source code at <a
+				<span class="hidden sm:inline">Source code at</span>
+				<Code class="inline h-[1rem] w-[1rem] sm:hidden" />
+				<a
 					href={siteConfig.links.gitHubProject}
 					target="_blank"
 					rel="noreferrer"
diff --git a/src/lib/components/site/site-header.svelte b/src/lib/components/site/site-header.svelte
index c662beb..cefdf38 100644
--- a/src/lib/components/site/site-header.svelte
+++ b/src/lib/components/site/site-header.svelte
@@ -10,12 +10,12 @@
 >
 	<div class="container flex h-14 items-center">
 		<a href="/" class="mr-6 flex items-center space-x-2">
-			<span class="sr-only">Return to home</span>
+			<span class="sr-only">Logo (return home)</span>
 			<Icons.logo />
 		</a>
 		<MainNav />
 		<div class="flex flex-1 items-center justify-between space-x-2 sm:space-x-4 md:justify-end">
-			<nav class="flex items-center">
+			<nav class="flex">
 				<a href={siteConfig.links.gitHubProfile} target="_blank" rel="noopener noreferrer">
 					<div
 						class={cn(
@@ -23,7 +23,7 @@
 								size: 'sm',
 								variant: 'ghost'
 							}),
-							'w-9 px-0'
+							'h-9 w-9 px-0'
 						)}
 					>
 						<Icons.gitHub class="h-4 w-4" />
@@ -37,10 +37,10 @@
 								size: 'sm',
 								variant: 'ghost'
 							}),
-							'w-9 px-0'
+							'h-9 w-9 px-0'
 						)}
 					>
-						<Icons.linkedIn class="h-3 w-3 fill-current" />
+						<Icons.linkedIn class="h-4 w-4" />
 						<span class="sr-only">LinkedIn</span>
 					</div>
 				</a>