STYLE Refining links behaviour

resources/css/base/links.css

@@ -1,6 +1,10 @@
-a[target='_blank'] {
+.entry-content,
-  @apply external-link;
+.site-content {
+  a[target='_blank'] {
+    @apply external-link;
+  }
 }
+
 .external-link {
   &:after {
     @apply content-[''] w-7 h-7 ml-2 inline-block;
@@ -30,6 +34,33 @@ a[target='_blank'] {
   }
 }
 
+.internal-link-with-icon,
+.internal-link-with-svg-icon,
+.external-link-with-svg-icon {
+  @apply flex items-center;
+  transition: transform 0.3s ease-out;
+  svg {
+    flex-shrink: 0;
+    transition: transform 0.3s ease-out;
+    @apply content-[''] w-9 h-9 ml-2 inline-block;
+    transform: rotate(0deg) translateX(0px);
+  }
+
+  &:hover {
+    filter: brightness(1.2);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 8px;
+    transform: translateX(-4px);
+  }
+  &--white {
+    @apply text-white;
+    &:after {
+      filter: brightness(0) invert(1);
+    }
+  }
+}
+
 .internal-link-with-icon {
   @apply flex items-center;
   transition: transform 0.3s ease-out;
@@ -57,6 +88,19 @@ a[target='_blank'] {
     }
   }
 }
+.internal-link-with-svg-icon {
+  &:hover {
+    transform: translateX(0px);
+  }
+  &:hover svg {
+    transform: translateY(4px) rotate(0deg);
+  }
+}
+.external-link-with-svg-icon {
+  &:hover svg {
+    transform: translateX(4px) rotate(45deg);
+  }
+}
 
 .internal-link-self-page-anchor {
   &:hover {