adjust nav and index page

Author: ducdat0507

src/components/CommonNav.svelte

@@ -12,7 +12,7 @@
             </CommonNavItem>
         {/if}
         <li>
-            <h2>portfolio</h2>
+            <h2>introduction</h2>
             <ul>
                 <CommonNavItem href="/index/about/" icon="fluent:hand-wave-24-regular">
                     about me

src/routes/+layout.svelte

@@ -217,14 +217,21 @@
             clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
             pointer-events: none;
         }
+
+        .main-container.home .nav-bar :global(nav li a:hover span) {
+            background: linear-gradient(90deg, #f55, #dd0, #1e1, #0dd, #88f, #e1e, #f55);
+            background-size: 5em 0.07em;
+            background-repeat: repeat-x;
+            animation: nav-item-hover 1s linear infinite;
+        }
     }
 
 
     @media (min-width: 50em) {
 
         .main-container.home {
             --inset-block: max(0px, calc(50dvh - 20em));
-            --inset-inline: max(0px, calc(50vw - 40em));
+            --inset-inline: max(0px, calc(50vw - 42em));
             inset-block: var(--inset-block);
             height: calc(100dvh - var(--inset-block) * 2);
             inset-inline: var(--inset-inline);
@@ -258,6 +265,12 @@
         .main-container.home .nav-bar :global(nav li.nav-item) {
             --outset: 0px;
         }
+        .main-container.home .nav-bar :global(nav li a:hover span) {
+            background: linear-gradient(90deg, #f55, #dd0, #1e1, #0dd, #88f, #e1e, #f55);
+            background-size: 5em 0.07em;
+            background-repeat: repeat-x;
+            animation: nav-item-hover 1s linear infinite;
+        }
 
 
         .main-container:not(.home) .nav-bar {
@@ -414,4 +427,12 @@
             transform: translateX(0);
         }
     }
+
+    @keyframes nav-item-hover {
+        from {
+            background-position: 0 calc(100% - 0.14em);
+        } to {
+            background-position: 5em calc(100% - 0.14em);
+        }
+    }
 </style>