refactor: styles Centralize link styling and remove redundancy

Author: neural-loop

assets/scss/_mixins.scss

@@ -2,7 +2,7 @@
   text-decoration-line: underline !important;
   text-decoration-thickness: 0.115em !important;
   text-underline-offset: 2.6px !important;
-  transition: text-decoration-color 0.3s ease-in-out;
+  transition: text-decoration-color 0.3s ease-in-out, color 0.3s ease-in-out;
   text-decoration-color: $base-color !important;
 
   &:hover {

assets/scss/_typography-custom.scss

@@ -1,5 +1,11 @@
 // assets/scss/_typography-custom.scss
 
+// Define link colors as variables
+$link-underline-color: #d7c7e3;
+$link-underline-hover-color: #200435;
+$dark-link-underline-color: #288b8c;
+$dark-link-underline-hover-color: #bcfbff;
+
 // Gradient text class
 .gradient-text {
     background: linear-gradient(135deg, var(--color-primary-new) 0%, var(--color-secondary-new) 100%);
@@ -111,15 +117,23 @@ a {
   overflow-wrap: break-word;
 }
 
+// REFACTORED: Centralized Link Styling
 .styled-link,
 .content :is(:where(a):not(:where([class~="not-prose"], [class~="not-prose"] *, .btn))),
-section a:not(.breadcrumb-link-parent, .social-link-container, .btn, .hardware-card-wide-link, .social-icon) {
+section a:not(.breadcrumb-link-parent, .social-link-container, .btn, .hardware-card-wide-link, .social-icon, .no-style),
+section a.social-link-container .social-link-text,
+.breadcrumb-link-text,
+.author-card-compact h4 a,
+.hardware-card-wide-link h3 {
   font-weight: inherit;
   color: inherit !important;
-  @include styled-link(#d7c7e3, #200435, #288b8c, #bcfbff);
-  &.social-link-container { text-decoration-line: none !important; }
+  @include styled-link($link-underline-color, $link-underline-hover-color, $dark-link-underline-color, $dark-link-underline-hover-color);
 }
 
+// Container for hardware card link, which contains the h3 we want styled
+.hardware-card-wide-link {
+  text-decoration: none !important;
+}
 
 h1 a, h2 a, h3 a, h4 a, h5 a {
   text-decoration: none !important;
@@ -135,19 +149,6 @@ h1 a, h2 a, h3 a, h4 a, h5 a {
     color: #FFF;
   }
 
-.dark .content :is(:where(a):not(:where([class~="not-prose"], [class~="btn"], [class~="not-prose"] *))),
-.dark section a:not(.breadcrumb-link-parent, .social-link-container, .btn, .hardware-card-wide-link, .social-icon) {
-    color: inherit !important;
-}
-
-// --- Social Link Text (within a container) ---
-section a.social-link-container .social-link-text {
-    @include styled-link(#d7c7e3, #200435, #288b8c, #bcfbff);
-}
-.dark section a.social-link-container {
-    color: #bcfbff !important;
-}
-
   h1 a, h2 a, h3 a, h4 a, h5 a {
     color: #ffffff !important;
   }
@@ -163,14 +164,9 @@ section a.social-link-container .social-link-text {
     color: #000 !important;
   }
 
-// --- Author Card Compact Links ---
-.author-card-compact h4 a {
-  @include styled-link(#d7c7e3, #200435, #288b8c, #bcfbff);
-  color: #200435 !important;
-  .dark & {
-    color: #bcfbff !important;
+  .author-card-compact h4 a {
+      color: #bcfbff !important;
   }
-}
 
   .role-compact {
     @apply text-sm text-text dark:text-darkmode-text mt-1;
@@ -196,9 +192,6 @@ section a.social-link-container .social-link-text {
 a.breadcrumb-link-parent {
   text-decoration-line: none !important;
 }
-.breadcrumb-link-text {
-   @include styled-link(#d7c7e3, #200435, #288b8c, #bcfbff);
-}
 
 .image-attribution-caption {
   // Positioning for the container div

assets/scss/components/_breadcrumbs.scss

@@ -1,29 +1,8 @@
 // Breadcrumb specific styling
-// Remove underline from the <a> tag itself in breadcrumbs
+// This file can now be simplified as the core styling is handled by the main stylesheet.
+// We just need to ensure the parent <a> doesn't get an underline itself.
 a.breadcrumb-link-parent {
-  text-decoration-line: none !important; // Remove general underline from the <a> container
+  text-decoration-line: none !important;
 }
 
-// Apply underline only to the inner span
-.breadcrumb-link-text {
-  text-decoration-line: underline;
-  text-decoration-color: #d7c7e3; // Match general link style
-  text-decoration-thickness: 0.115em; // Match general link style
-  text-underline-offset: 2.6px; // Match general link style
-  transition: text-decoration-color 0.3s ease-in-out;
-}
-
-// Hover effect for the inner span, triggered by hovering the parent <a>
-a.breadcrumb-link-parent:hover .breadcrumb-link-text {
-  text-decoration-color: #200435; // Match general link hover style
-}
-
-// Dark mode for breadcrumb link text span
-.dark .breadcrumb-link-text {
-  text-decoration-color: #288b8c; // Match dark mode general link style
-}
-
-.dark a.breadcrumb-link-parent:hover .breadcrumb-link-text {
-  text-decoration-color: #bcfbff !important; // Match dark mode general link hover style
-}
-// End of Breadcrumb specific styling
+// The .breadcrumb-link-text will be automatically styled by the rules in _typography-custom.scss

assets/scss/components/_hardware-card-wide.scss

@@ -11,8 +11,5 @@
     @apply transform shadow-lg;
   }
 
-  // Target the h3 title specifically and apply the consistent link styling.
-  h3 {
-    @include styled-link(#d7c7e3, #200435, #288b8c, #bcfbff);
-  }
+  // The h3 title inside will be styled automatically by the rules in _typography-custom.scss
 }