fix: typography, og-preview: Style social icons & links

Author: neural-loop

assets/scss/_typography-custom.scss

@@ -112,7 +112,7 @@ a {
 }
 
 .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) {
+section a:not(.breadcrumb-link-parent, .social-link-container, .btn, .hardware-card-wide-link, .social-icon) {
   font-weight: inherit;
   color: inherit !important;
   @include styled-link(#d7c7e3, #200435, #288b8c, #bcfbff);
@@ -135,7 +135,7 @@ h1 a, h2 a, h3 a, h4 a, h5 a {
   }
 
 .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) {
+.dark section a:not(.breadcrumb-link-parent, .social-link-container, .btn, .hardware-card-wide-link, .social-icon) {
     color: inherit !important;
 }
 
@@ -223,7 +223,4 @@ a.breadcrumb-link-parent {
       }
     }
   }
-}
-
-// NOTE: We no longer need a separate .dark rule for this,
-// as the dark semi-transparent background works well in both light and dark modes.
+}

assets/scss/components/_og-preview.scss

@@ -47,7 +47,8 @@
 }
 
 .social-icon {
-  @apply text-white text-xl w-9 h-9 flex items-center justify-center transition-all duration-300 ease-in-out no-underline;
+  @apply text-xl w-9 h-9 flex items-center justify-center transition-all duration-300 ease-in-out no-underline;
+  color: white;
   background: rgba(0,0,0, 0.6);
   backdrop-filter: blur(2px);
   border-radius: 50%;