From 62722a239df103d6e76d5bb83d0d1bfc2afb0cc2 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sat, 4 Jan 2025 20:27:41 +0800
Subject: [PATCH] Animate header logo on hover or focus

---
 src/_includes/global/header.njk | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/_includes/global/header.njk b/src/_includes/global/header.njk
index c6f4c80c..09bfba38 100644
--- a/src/_includes/global/header.njk
+++ b/src/_includes/global/header.njk
@@ -59,11 +59,13 @@
         height: 1.3em;
     }
 
-    .header__title a:focus,
-    .header__toggle:focus {
-        outline: 0.12em solid var(--clr-accent-600);
-    }
-    .header__title > a { text-decoration: none; }
+    .header__title:hover > *,
+    .header__title:focus ,
+    .header__title:focus > * { outline: 0; }
+
+    .header__title > * { transition: transform 0.2s ease-out; }
+    .header__title:hover > *,
+    .header__title:focus > * { transform: scale(1.25); }
 
     .header__toggle {
         border: none;
@@ -78,7 +80,10 @@
     }
 
     .header__toggle svg { fill: var(--clr-accent-700); }
-    .header__toggle:focus { outline-offset: 0.15em; }
+    .header__toggle:focus {
+        outline: 0.12em solid var(--clr-accent-600);
+        outline-offset: 0.15em;
+    }
 
     .header__navmenu {
         list-style-type: "";