From 4b1259bc6fd03be732f180ed91d53daab11395c2 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Mon, 31 Jul 2023 13:03:30 +0200
Subject: [PATCH] refactor: reformat and add screenreader label

---
 src/lib/components/Header.svelte | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 7c699e1..056f6ce 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -13,29 +13,47 @@
 
 <AppBar>
 	<svelte:fragment slot="lead">
-		<button aria-label="Toggle navigation menu" class="md:hidden btn btn-sm mr-4" on:click={drawerOpen}>
+		<button
+			aria-label="Toggle navigation menu"
+			class="md:hidden btn btn-sm mr-4"
+			on:click={drawerOpen}
+		>
 			<span>
 				<Hamburger />
 			</span>
 		</button>
-		<img src="./icon.svg" alt="Logo" srcset="" class="pr-2" />
-		<h2 class="code">hellob.art</h2>
+		<img width="32" height="24" src="./icon.svg" alt="Logo" srcset="" class="" />
+		<h1 class="h6">
+			<span
+				class="bg-gradient-to-br logo-text-gradient bg-clip-text text-transparent box-decoration-clone font-mono pl-3"
+				>hellob.art</span
+			>
+		</h1>
 	</svelte:fragment>
 	<svelte:fragment slot="trail">
 		<a
 			href="https://linkedin.com/in/bartvdbraak"
 			target="_blank"
 			rel="noopener noreferrer"
-			class="btn-icon btn-icon-sm hover:variant-soft-primary"><LinkedIn /><span class="sr-only">LinkedIn Profile of Bart van der Braak</span></a
+			class="btn-icon btn-icon-sm hover:variant-soft-primary"
+			><LinkedIn /><span class="sr-only">LinkedIn Profile of Bart van der Braak</span></a
 		>
 		<a
 			href="https://github.com/bartvdbraak"
 			target="_blank"
 			rel="noopener noreferrer"
-			class="btn-icon btn-icon-sm hover:variant-soft-primary"><GitHub /><span class="sr-only">GitHub Profile of Bart van der Braak</span></a
+			class="btn-icon btn-icon-sm hover:variant-soft-primary"
+			><GitHub /><span class="sr-only">GitHub Profile of Bart van der Braak</span></a
 		>
 		<LightSwitch />
 	</svelte:fragment>
 </AppBar>
 
-<ProgressBar label="Progress Bar" value={progress} max={100} rounded="" />
\ No newline at end of file
+<span id="progress-bar-label" class="sr-only">Loading Progress</span>
+<ProgressBar
+	label="Progress Bar"
+	labelledby="progress-bar-label"
+	value={progress}
+	max={100}
+	rounded=""
+/>