refactor: enhance site navigation and styling

- Add view transitions for site title
- Update Navbar with hover effects and improved typography
- Modify index page layout with decorative lines and date formatting
- Adjust post publication dates
- Update VSCode dictionary with new terms

src/components/Header.astro

@@ -16,7 +16,10 @@ const marginBottom = {
 
 <header>
   <h1 class={`${marginBottom} mt--5 text-12.8 c-primary font-bold font-title`}>
-    <a href={getLocalizedPath('/')}>
+    <a
+      href={getLocalizedPath('/')}
+      transition:name="site-title"
+    >
       {title}
     </a>
   </h1>

src/components/Navbar.astro

@@ -3,21 +3,24 @@ import { getPagePath } from '@/utils/path'
 import { ui } from '@/utils/ui'
 
 const currentPath = Astro.url.pathname
-const { currentLang, isHome, isPost, isTag, isAbout, getLocalizedPath } = getPagePath(currentPath)
+const { currentLang, isHome, isPost, isTag, isAbout, getLocalizedPath }
+  = getPagePath(currentPath)
 const currentUI = ui[currentLang as keyof typeof ui]
 
 const isPostActive = isHome || isPost
 const isTagActive = isTag
-const isAboutActive = isAbout
+const isAboutActive = isAbout;
 ---
 
-<nav class="mb-16 mt-13 text-5.6 font-semibold leading-13 font-navbar">
+<nav class="mb-17 mt-17 text-5.84 font-semibold leading-14 font-navbar">
   <ul>
     <li>
       <a
         href={getLocalizedPath('/')}
         class:list={[
-          isPostActive ? 'font-bold text-primary' : '',
+          isPostActive
+            ? 'font-bold text-primary'
+            : 'hover:text-primary hover:font-bold',
         ]}
       >
         {currentUI.posts}
@@ -27,7 +30,9 @@ const isAboutActive = isAbout
       <a
         href={getLocalizedPath('/tags')}
         class:list={[
-          isTagActive ? 'font-bold text-primary' : '',
+          isTagActive
+            ? 'font-bold text-primary'
+            : 'hover:text-primary hover:font-bold',
         ]}
       >
         {currentUI.tags}
@@ -37,7 +42,9 @@ const isAboutActive = isAbout
       <a
         href={getLocalizedPath('/about')}
         class:list={[
-          isAboutActive ? 'font-bold text-primary' : '',
+          isAboutActive
+            ? 'font-bold text-primary'
+            : 'hover:text-primary hover:font-bold',
         ]}
       >
         {currentUI.about}

src/components/SiteTitle.astro

@@ -10,6 +10,7 @@ const { getLocalizedPath } = getPagePath(currentPath)
 <a
   class="mt--1.4 text-8.32 c-secondary font-bold font-title"
   href={getLocalizedPath('/')}
+  transition:name="site-title"
 >
   {title}
 </a>