From 4c60081298a28fed4d19e0dd6417624640eb34ca Mon Sep 17 00:00:00 2001
From: passthem <Passthem183@gmail.com>
Date: Wed, 1 Apr 2026 20:20:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=E4=B8=8E=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E5=8A=A8=E7=94=BB=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/FullLayoutV1.astro | 41 ++++++++++++++++++++++++++++++++
 src/pages/index.astro         | 44 +++++++++++++++++++++++++++++++----
 2 files changed, 81 insertions(+), 4 deletions(-)

diff --git a/src/layout/FullLayoutV1.astro b/src/layout/FullLayoutV1.astro
index 8851f9b..0161ad6 100644
--- a/src/layout/FullLayoutV1.astro
+++ b/src/layout/FullLayoutV1.astro
@@ -63,6 +63,11 @@ const { title = '小帕的小窝' } = Astro.props
     navMain?.classList.add('nav-container-hidden')
   }
 
+  const navOpen = () => {
+    const navMain = document.getElementById('nav-main')
+    navMain?.classList.remove('nav-container-hidden')
+  }
+
   document.getElementById('nav-main')?.addEventListener('click', (e) => {
     const target = e.target as HTMLElement
     if (target.id == 'nav-main') {
@@ -70,6 +75,18 @@ const { title = '小帕的小窝' } = Astro.props
     }
   })
 
+  document.getElementById('nav-main')?.addEventListener('focusin', navOpen)
+  document.getElementById('nav-main')?.addEventListener('focusout', (e) => {
+    if (
+      e.relatedTarget &&
+      !document
+        .getElementById('nav-main')
+        ?.contains(e.relatedTarget as HTMLElement)
+    ) {
+      navClose()
+    }
+  })
+
   document.addEventListener('astro:before-preparation', () => {
     document.getElementById('loading-indicator')?.classList.remove('hidden')
   })
@@ -78,6 +95,24 @@ const { title = '小帕的小窝' } = Astro.props
     requestAnimationFrame(navClose)
     document.getElementById('loading-indicator')?.classList.add('hidden')
   })
+
+  document.addEventListener('astro:page-load', () => {
+    document.querySelectorAll('#nav-main li:has(a)').forEach((li) => {
+      console.log(li)
+      const child = li.querySelector('a')
+      if (!child) {
+        li.classList.add('url-here')
+        return
+      }
+      if (
+        window.location.href.replace(/\/$/, '') == child.href.replace(/\/$/, '')
+      ) {
+        li.classList.add('url-here')
+      } else {
+        li.classList.remove('url-here')
+      }
+    })
+  })
 </script>
 
 <style>
@@ -160,6 +195,11 @@ const { title = '小帕的小窝' } = Astro.props
           background-color: rgb(from var(--color-fg-0) r g b / 0.1);
         }
 
+        &.url-here {
+          color: var(--color-blue);
+          background-color: rgb(from var(--color-blue) r g b / 0.1);
+        }
+
         & > a {
           padding-inline: 0.75rem;
           width: 100%;
@@ -211,6 +251,7 @@ const { title = '小帕的小窝' } = Astro.props
       align-items: center;
       justify-content: center;
       font-size: 2rem;
+      cursor: pointer;
 
       &:active,
       &:hover {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8319e9d..adb094c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -145,6 +145,7 @@ try {
 
   .slide {
     scroll-snap-align: start;
+    scroll-snap-stop: always;
     height: 100dvh;
     display: flex;
     align-items: center;
@@ -201,6 +202,24 @@ try {
     }
   }
 
+  @property --avatar-scalar {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+  }
+
+  @property --avatar-hover-scalar {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+  }
+
+  @property --avatar-rotation {
+    syntax: '<angle>';
+    inherits: true;
+    initial-value: 0deg;
+  }
+
   /* 自我介绍部分 */
   .self-introduction {
     display: flex;
@@ -217,16 +236,32 @@ try {
     & > .avatar {
       margin: 0;
       border-radius: 50%;
+
       --final-width: clamp(160px, 30vw, 240px);
-      transition: all cubic-bezier(0.4, 1, 0.4, 1) 1.2s;
-      transform: rotate(10deg);
+      --avatar-scalar: 0;
+      --avatar-hover-scalar: 1;
+      --avatar-rotation: 20deg;
+      transition:
+        --avatar-rotation cubic-bezier(0.2, 1, 0.4, 1) 1.8s,
+        --avatar-scalar cubic-bezier(0.2, 2, 0.3, 0.8) 1.2s,
+        --avatar-hover-scalar cubic-bezier(0.2, 3, 0.4, 0.6) 0.6s,
+        width cubic-bezier(0.4, 1, 0.4, 1) 0.9s;
+
+      transform: rotate(var(--avatar-rotation)) scale(var(--avatar-scalar))
+        scale(var(--avatar-hover-scalar));
       aspect-ratio: 1 / 1;
       overflow: hidden;
       width: 0;
 
       section.slide.slide-visible & {
+        --avatar-scalar: 1;
+        --avatar-rotation: 0deg;
         width: var(--final-width);
-        transform: rotate(0);
+      }
+
+      &:hover,
+      &:focus {
+        --avatar-hover-scalar: 1.05;
       }
     }
 
@@ -288,7 +323,8 @@ try {
     }
   }
 
-  section:has(.thsx:hover) .motto > p {
+  section:has(.thsx:hover) .motto > p,
+  section:has(.thsx:focus) .motto > p {
     &:nth-child(1)::before {
       transition-delay: 0;
     }