fix: link underline implementation

Author: q1zhen

src/components/Link.astro

@@ -13,7 +13,9 @@ const { href, external, underline = true, ...rest } = Astro.props;
 <a 
   href={href} 
   target={ external ? "_blank" : "_self" } 
-  class={cn("inline-block decoration-black/15 dark:decoration-white/30 hover:decoration-black/25 hover:dark:decoration-white/50 text-current hover:text-black hover:dark:text-white transition-colors duration-300 ease-in-out", underline && "underline underline-offset-2")}
+  class={cn("inline-block decoration-black/15 dark:decoration-white/30 hover:decoration-black/25 hover:dark:decoration-white/50 text-current hover:text-black hover:dark:text-white transition-colors duration-300 ease-in-out")}
   {...rest}>
-  <slot/>
+  <span class={underline ? "border-b border-b-stone-400" : ""}>
+    <slot/>
+  </span>
 </a>

src/components/custom/CopyText.astro

@@ -9,7 +9,7 @@ const { text, label } = Astro.props;
 
 <span class="font-base text-sm">
 	<span
-		class="underline hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out cursor-pointer"
+		class="border-b border-b-stone-400 hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out cursor-pointer"
 		data-copy-text={text}
 		data-copy-label={label}
 		onclick="

src/components/custom/LinkToFile.astro

@@ -19,7 +19,7 @@ const path = `/blog/${slug}`;
                         href={`${path}/index.tex`}
                         class="hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out"
                     >
-                        <span class="underline">LaTeX</span>
+                        <span class="border-b border-b-stone-400">LaTeX</span>
                     </a>
                     {pdf && " and "}
                 </>
@@ -29,7 +29,7 @@ const path = `/blog/${slug}`;
                     href={`${path}/index.pdf`}
                     class="hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out"
                 >
-                    <span class="underline">PDF</span>
+                    <span class="border-b border-b-stone-400">PDF</span>
                 </a>
             )}
         </div>

src/styles/global.css

@@ -47,7 +47,7 @@ article {
 
 @layer utilities {
   article a {
-    @apply font-sans text-current underline underline-offset-2;
+    @apply font-sans text-current border-b border-b-stone-400;
     @apply decoration-black/15 dark:decoration-white/30;
     @apply transition-colors duration-300 ease-in-out;
   }