From 8409e5a5c2983ee476750e565078257103d9b16a Mon Sep 17 00:00:00 2001
From: vanntile <33692650+vanntile@users.noreply.github.com>
Date: Fri, 14 Apr 2023 10:18:44 +0300
Subject: [PATCH] fix(uiux): :bug: deduplicate rehype-autolink-headings
 ::before

---
 astro.config.mjs      |  2 +-
 src/styles/global.css | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 417763f..01895a7 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -74,7 +74,7 @@ export default defineConfig({
           properties: {
             ariaLabel: 'Anchor',
             tabIndex: -1,
-            className: ['icon-link'],
+            className: ['icon-link-anchor'],
           },
         },
       ],
diff --git a/src/styles/global.css b/src/styles/global.css
index 7eae8b6..96fe8d6 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -326,12 +326,16 @@
   @apply bg-red-900 text-gray-50 dark:bg-gray-50 dark:text-red-900;
 }
 
-/*** remark-autolink-headings - link hash, similar to GitHub ones ***/
-.icon-link {
-  @apply absolute -ml-6 text-gray-400 no-underline shadow-none opacity-0 2xl:-ml-12 hover:text-gray-400 hover:no-underline;
+/*** rehype-autolink-headings ***/
+.icon-link-anchor {
+  @apply absolute -ml-6 text-gray-400 no-underline shadow-none opacity-0 xl:-ml-10 hover:no-underline;
 }
 
-:is(h1, h2, h3, h4):hover > .icon-link {
+.icon-link-anchor:hover {
+  @apply text-brand dark:text-brand-accent;
+}
+
+:is(h1, h2, h3, h4):hover > .icon-link-anchor {
   @apply opacity-100;
 }