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

@@ -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>`;
         }
       },
     );

source/css/common/markdown.styl

@@ -31,22 +31,33 @@
     // 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
       position relative
       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)