style: add highlight hover animation to navigation and footer

- add dynamic accessible labels to heading anchors
- update theme toggle button svg

src/components/Button.astro

@@ -50,7 +50,7 @@ const nextUrl = useSupportedLangs
   <!-- Theme Toggle -->
   <button
     aria-label="Switch light/dark theme"
-    class="button-theme-toggle aspect-square w-4.2 c-secondary active:scale-90 hover:c-primary"
+    class="button-theme-toggle aspect-square w-4 c-secondary active:scale-90 hover:c-primary"
   >
     <ThemeToggleIcon
       aria-hidden="true"

src/components/Footer.astro

@@ -30,7 +30,7 @@ const links = socialLinks.map((link) => {
   <p>
     {links.map((link, index) => (
       <>
-        <a class="transition-colors hover:c-primary" href={link.url} target="_blank" rel="noopener noreferrer">
+        <a class="highlight-hover transition-colors hover:c-primary after:bottom-0!" href={link.url} target="_blank" rel="noopener noreferrer">
           {link.name}
         </a>
         {index < links.length - 1 && ' / '}
@@ -39,7 +39,7 @@ const links = socialLinks.map((link) => {
   </p>
 
   <p>
-    Powered by <a class="transition-colors hover:c-primary" href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a> and <a class="transition-colors hover:c-primary" href="https://github.com/radishzzz/astro-theme-retypeset" target="_blank" rel="noopener noreferrer">Retypeset</a>
+    Powered by <a class="highlight-hover transition-colors hover:c-primary after:bottom-0!" href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a> and <a class="highlight-hover transition-colors hover:c-primary after:bottom-0!" href="https://github.com/radishzzz/astro-theme-retypeset" target="_blank" rel="noopener noreferrer">Retypeset</a>
   </p>
 
   <p>

src/components/Navbar.astro

@@ -10,7 +10,7 @@ const isTagActive = isTag
 const isAboutActive = isAbout
 
 function getNavItemClass(isActive: boolean) {
-  return isActive ? 'font-bold c-primary' : 'hover:(c-primary font-bold) transition-all'
+  return isActive ? 'font-bold c-primary highlight-static' : 'hover:(c-primary font-bold) transition-all highlight-hover'
 }
 
 const navItems = [

src/components/Widgets/BackToTop.astro

@@ -61,5 +61,5 @@ function initBackToTop() {
 }
 
 // Handle page transitions
-document.addEventListener('astro:page-load', initBackToTop)
+document.addEventListener('astro:after-swap', initBackToTop)
 </script>

src/components/Widgets/TOC.astro

@@ -217,6 +217,6 @@ function setupTOCHighlight() {
 }
 
 setupTOCHighlight()
-document.addEventListener('astro:page-load', setupTOCHighlight)
+document.addEventListener('astro:after-swap', setupTOCHighlight)
 </script>