From 02b7c819b02a1aec3599b7fc428ce2f7e1715600 Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Sun, 21 Apr 2024 05:56:38 -0400
Subject: [PATCH] focus/hover groups

---
 src/lib/components/Blog/ListedPost.svelte |  2 +-
 src/lib/components/Footer.svelte          |  2 +-
 src/lib/components/HeaderLink.svelte      |  2 +-
 src/lib/components/ImgButton.svelte       |  2 +-
 src/routes/+page.svelte                   | 36 +++++++++++++++--------
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/Blog/ListedPost.svelte b/src/lib/components/Blog/ListedPost.svelte
index 05b129b..2711114 100644
--- a/src/lib/components/Blog/ListedPost.svelte
+++ b/src/lib/components/Blog/ListedPost.svelte
@@ -9,7 +9,7 @@
 <a
 	in:fade={{ delay: 50 * index }}
 	href="/blog/{post.id}"
-	class="shadow-lg transition-all hover:-translate-y-1"
+	class="shadow-lg transition-all focus:-translate-y-1 hover:-translate-y-1"
 >
 	<div
 		class="w-full rounded-lg aspect-video bg-gray-500/10"
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 03d3009..eda692f 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -33,7 +33,7 @@
 			</div>
 		</div>
 		<div class="hidden flex-col flex-1 my-auto text-sm xl:flex text-neutral-500">
-			<div class="mx-auto w-5 h-5 transition-colors hover:text-cirro">
+			<div class="mx-auto w-5 h-5 transition-colors focus:text-cirro hover:text-cirro">
 				<Heart></Heart>
 			</div>
 		</div>
diff --git a/src/lib/components/HeaderLink.svelte b/src/lib/components/HeaderLink.svelte
index d4179ba..53d56de 100644
--- a/src/lib/components/HeaderLink.svelte
+++ b/src/lib/components/HeaderLink.svelte
@@ -16,7 +16,7 @@
 	{href}
 	class="my-auto text-lg transition-all {selected
 		? 'font-bold tracking-wider'
-		: 'hover:text-neutral-400'}"
+		: 'hover:text-neutral-400 focus:text-neutral-400'}"
 >
 	<slot />
 </a>
diff --git a/src/lib/components/ImgButton.svelte b/src/lib/components/ImgButton.svelte
index 2d82111..34d8aa7 100644
--- a/src/lib/components/ImgButton.svelte
+++ b/src/lib/components/ImgButton.svelte
@@ -50,7 +50,7 @@
 	});
 </script>
 
-<a class="hover:shadow-2xl" {href} target="_blank">
+<a class="hover:shadow-2xl focus:shadow-2xl" {href} target="_blank">
 	{#if loaded}
 		<img in:fade class="imgbutton" {src} alt="Button" bind:this={e} />
 	{:else}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 66364ee..ae2ea63 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -35,33 +35,45 @@
 			<div
 				class="md:w-[42rem] flex place-content-center space-x-2 text-xl p-2 bg-black/75 rounded-lg mt-1"
 			>
-				<a class="flex" href="https://www.last.fm/user/{config.LASTFM}">
-					<div class="my-auto w-7 h-7 transition-colors text-neutral-400 hover:text-red-500">
+				<a class="flex group" href="https://www.last.fm/user/{config.LASTFM}">
+					<div
+						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-focus:text-red-500 group-hover:text-red-500"
+					>
 						<Lastfm />
 					</div>
 				</a>
-				<a class="flex" href="https://github.com/{config.GITHUB}">
-					<div class="my-auto w-7 h-7 transition-colors text-neutral-400 hover:text-black">
+				<a class="flex group" href="https://github.com/{config.GITHUB}">
+					<div
+						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-black group-focus:text-black"
+					>
 						<GitHub />
 					</div>
 				</a>
-				<a class="flex" href="https://mastodon.social/{config.FEDIVERSE}">
-					<div class="my-auto w-7 h-7 transition-colors text-neutral-400 hover:text-indigo-700">
+				<a class="flex group" href="https://mastodon.social/{config.FEDIVERSE}">
+					<div
+						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-indigo-700 group-focus:text-indigo-700"
+					>
 						<Mastodon />
 					</div>
 				</a>
-				<a class="flex" href="https://discord.com/users/{config.DISCORD}">
-					<div class="my-auto w-7 h-7 transition-colors text-neutral-400 hover:text-blue-600">
+				<a class="flex group" href="https://discord.com/users/{config.DISCORD}">
+					<div
+						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-blue-600 group-focus:text-blue-600"
+					>
 						<Discord />
 					</div>
 				</a>
-				<a class="flex" href="https://x.com/{config.TWITTER}">
-					<div class="my-auto w-7 h-7 transition-colors text-neutral-400 hover:text-black">
+				<a class="flex group" href="https://x.com/{config.TWITTER}">
+					<div
+						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-black group-focus:text-black"
+					>
 						<X />
 					</div>
 				</a>
-				<a class="flex" href="https://bsky.app/profile/{config.BLUESKY}">
-					<div class="my-auto w-7 h-7 transition-colors text-neutral-400 hover:text-blue-400">
+				<a class="flex group" href="https://bsky.app/profile/{config.BLUESKY}">
+					<div
+						class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-blue-400 group-focus:text-blue-400"
+					>
 						<Bluesky />
 					</div>
 				</a>