From fe0c3c66442ab6c7c9ce10203a15faff9e66a479 Mon Sep 17 00:00:00 2001
From: AlexBocken <alexander@bocken.org>
Date: Thu, 13 Jul 2023 18:27:02 +0200
Subject: [PATCH] less mislicks, switched to :focus where appropriate

---
 src/lib/components/Card.svelte   | 8 ++++----
 src/lib/components/Header.svelte | 2 +-
 src/lib/css/action_button.css    | 2 +-
 src/lib/css/icon.css             | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index 0e5da82..c671286 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -72,7 +72,7 @@ div:has(div #image){
 	background-color: var(--red);
 	box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3);
 }
-.card:active{
+.card:focus{
 	scale: 0.95 0.95;
 }
 .card .title {
@@ -127,9 +127,9 @@ div:has(div #image){
 	background-color: var(--orange);
 	box-shadow: 0.2em 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.3);
 }
-.card .tag:active{
+.card .tag:focus{
 	transition: 100ms;
-	scale: 0.8 0.8;
+	scale: 0.9;
 }
 .card .title .category{
 	position: absolute;
@@ -152,7 +152,7 @@ div:has(div #image){
 	background-color: var(--nord3);
 	transform: scale(1.05, 1.05)
 }
-.card .category:active{
+.card .category:focus{
 	scale: 0.9 0.9;
 }
 
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index a1549da..d40279d 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -104,7 +104,7 @@ nav[hidden]{
 		height: 100%;
 		transition: 100ms;
 	}
-	.nav_button:active{
+	.nav_button:focus{
 		fill: var(--red);
 		scale: 0.9;
 	}
diff --git a/src/lib/css/action_button.css b/src/lib/css/action_button.css
index 2b3bb77..212873f 100644
--- a/src/lib/css/action_button.css
+++ b/src/lib/css/action_button.css
@@ -22,7 +22,7 @@
 	animation: shake 0.5s ease forwards;
 }
 
-.action_button:active{
+.action_button:focus{
 	transition: 50ms;
 	scale: 0.8 0.8;
 }
diff --git a/src/lib/css/icon.css b/src/lib/css/icon.css
index 182d083..c4e01f1 100644
--- a/src/lib/css/icon.css
+++ b/src/lib/css/icon.css
@@ -1,4 +1,4 @@
-.icon:active{
+.icon:focus{
 	scale: 0.8 0.8;
 	rotate: var(--angle, 30deg);
 }