From 38cfbd543e6a51d946e78dc5377201c650278e4e Mon Sep 17 00:00:00 2001
From: Evan Luo <contact@ohevan.com>
Date: Wed, 20 Nov 2024 15:09:49 -0500
Subject: [PATCH] style: enhance link styling and icon behavior #460 #459

- Update link icon to use solid style and add 'link-icon' class
- Improve link hover effects with smooth transitions
- Adjust padding and text decoration for better visual appearance
---
 scripts/filters/link-handle.js  |  2 +-
 source/css/common/markdown.styl | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/scripts/filters/link-handle.js b/scripts/filters/link-handle.js
index beb44337..2a88d359 100755
--- a/scripts/filters/link-handle.js
+++ b/scripts/filters/link-handle.js
@@ -33,7 +33,7 @@ hexo.extend.filter.register(
         if (theme.config.articles.style.link_icon == false) {
           return `<a class="link" ${attrBegin} href="${href}" ${attrEnd}>${html}</a>`;
         } else {
-          return `<a class="link" ${attrBegin} href="${href}" ${attrEnd}>${html}<i class="fa-sharp fa-regular fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em]"></i>`;
+          return `<a class="link" ${attrBegin} href="${href}" ${attrEnd}>${html}<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a>`;
         }
       },
     );
diff --git a/source/css/common/markdown.styl b/source/css/common/markdown.styl
index 9cc2f4f2..3892e48d 100755
--- a/source/css/common/markdown.styl
+++ b/source/css/common/markdown.styl
@@ -31,8 +31,10 @@
     // border-bottom 1px solid var(--third-text-color)
     box-sizing border-box
     padding-bottom 2px
+    padding-right 0.2em
     text-underline-offset 2px
     text-decoration-color var(--fourth-text-color)
+    transition: text-decoration-color 0.2s ease
 
     .fas, .far, fab
       margin 0 2px 0 6px
@@ -40,13 +42,22 @@
       color var(--third-text-color)
       font-size 0.88rem
 
+    .link-icon
+      transition transform 0.2s ease
+
     &:hover
-      text-decoration underline
+      text-decoration underline !important
+      text-decoration-color var(--primary-color) !important
+
+      .link-icon
+        transform translate(0.1em, -0.1em)
 
       &::after
         background var(--primary-color)
         text-decoration underline
 
+
+
   strong
     color var(--default-text-color)