♻️ Adopt Tailwind hover-group classes

assets/css/compiled/main.css

@@ -921,48 +921,6 @@ body a, body button {
   display: none;
 }
 
-/* Heading anchors */
-
-.prose .heading-anchor:hover {
-  background-color: transparent !important;
-  --tw-text-opacity: 1 !important;
-  color: rgba(var(--color-primary-500), var(--tw-text-opacity)) !important;
-  -webkit-text-decoration-line: underline !important;
-          text-decoration-line: underline !important;
-}
-
-.prose .heading-anchor:hover, .prose .heading-anchor:focus, .prose h2:hover > .heading-anchor, .prose h3:hover > .heading-anchor, .prose h4:hover > .heading-anchor {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-200), var(--tw-text-opacity));
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
-  opacity: 1;
-}
-
-.dark .prose .heading-anchor:hover, .dark .prose .heading-anchor:focus, .dark .prose h2:hover > .heading-anchor, .dark .prose h3:hover > .heading-anchor, .dark .prose h4:hover > .heading-anchor {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
-}
-
-/* Article pagination */
-
-.article-pagination a:hover .article-pagination-title {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
-  -webkit-text-decoration-color: rgb(var(--color-primary-500));
-          text-decoration-color: rgb(var(--color-primary-500));
-}
-
-.article-pagination a:hover .article-pagination-direction {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-600), var(--tw-text-opacity));
-}
-
-.dark .article-pagination a:hover .article-pagination-direction {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
 /* RTL support */
 
 [dir="rtl"] .prose blockquote {
@@ -2198,11 +2156,6 @@ body a, body button {
           text-decoration-line: none !important;
 }
 
-.no-underline {
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
-}
-
 .opacity-0 {
   opacity: 0;
 }
@@ -2330,6 +2283,30 @@ body a, body button {
   outline-color: transparent;
 }
 
+.group:hover .group-hover\:text-primary-600 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-600), var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:text-primary-300 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-300), var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
+.group:hover .group-hover\:decoration-primary-500 {
+  -webkit-text-decoration-color: rgb(var(--color-primary-500));
+          text-decoration-color: rgb(var(--color-primary-500));
+}
+
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}
+
 [dir="ltr"] .ltr\:right-0 {
   right: 0px;
 }
@@ -2614,6 +2591,16 @@ body a, body button {
   background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));
 }
 
+.dark .group:hover .dark\:group-hover\:text-primary-400 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-400), var(--tw-text-opacity));
+}
+
+.dark .group:hover .dark\:group-hover\:text-neutral-700 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:mb-0 {
     margin-bottom: 0px;

assets/css/main.css

@@ -21,26 +21,6 @@ body button {
   @apply hidden;
 }
 
-/* Heading anchors */
-.prose .heading-anchor:hover {
-  @apply underline bg-transparent text-primary-500 !important;
-}
-.prose .heading-anchor:hover,
-.prose .heading-anchor:focus,
-.prose h2:hover > .heading-anchor,
-.prose h3:hover > .heading-anchor,
-.prose h4:hover > .heading-anchor {
-  @apply no-underline opacity-100 text-primary-200 dark:text-neutral-700;
-}
-
-/* Article pagination */
-.article-pagination a:hover .article-pagination-title {
-  @apply underline decoration-primary-500;
-}
-.article-pagination a:hover .article-pagination-direction {
-  @apply text-primary-600 dark:text-primary-400;
-}
-
 /* RTL support */
 .prose blockquote {
   @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4;

layouts/_default/_markup/render-heading.html

@@ -1 +1 @@
-<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="relative">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<a class="absolute top-0 w-6 no-underline transition-opacity opacity-0 heading-anchor ltr:-left-6 rtl:-right-6" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a>{{ end }}</h{{ .Level }}>
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="relative group">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a></span>{{ end }}</h{{ .Level }}>

layouts/partials/article-pagination.html

@@ -6,22 +6,23 @@
       {{ $next = .PrevInSection }}
       {{ $prev = .NextInSection }}
     {{ end }}
-    <div class="pt-8 article-pagination">
+    <div class="pt-8">
       <hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
       <div class="flex justify-between pt-3">
         <span>
           {{ if $prev }}
-            <a class="flex" href="{{ $prev.RelPermalink }}">
+            <a class="flex group" href="{{ $prev.RelPermalink }}">
               <span
-                class="mr-3 ltr:inline rtl:hidden article-pagination-direction text-neutral-700 dark:text-neutral"
+                class="mr-3 ltr:inline rtl:hidden text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400"
                 >&larr;</span
               >
               <span
-                class="ml-3 ltr:hidden rtl:inline article-pagination-direction text-neutral-700 dark:text-neutral"
+                class="ml-3 ltr:hidden rtl:inline text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400"
                 >&rarr;</span
               >
               <span class="flex flex-col">
-                <span class="article-pagination-title mt-[0.1rem] leading-6"
+                <span
+                  class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
                   >{{ $prev.Title | emojify }}</span
                 >
                 <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
@@ -35,9 +36,10 @@
         </span>
         <span>
           {{ if $next }}
-            <a class="flex text-right" href="{{ $next.RelPermalink }}">
+            <a class="flex text-right group" href="{{ $next.RelPermalink }}">
               <span class="flex flex-col">
-                <span class="article-pagination-title mt-[0.1rem] leading-6"
+                <span
+                  class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
                   >{{ $next.Title | emojify }}</span
                 >
                 <span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400">
@@ -47,11 +49,11 @@
                 </span>
               </span>
               <span
-                class="ml-3 ltr:inline rtl:hidden article-pagination-direction text-neutral-700 dark:text-neutral"
+                class="ml-3 ltr:inline rtl:hidden text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400"
                 >&rarr;</span
               >
               <span
-                class="mr-3 ltr:hidden rtl:inline article-pagination-direction text-neutral-700 dark:text-neutral"
+                class="mr-3 ltr:hidden rtl:inline text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400"
                 >&larr;</span
               >
             </a>