From 25ce1b2d85f492909a4412d5e02e70f99fe11c19 Mon Sep 17 00:00:00 2001
From: Joseph Montanaro <jfmonty2@gmail.com>
Date: Wed, 23 Aug 2023 06:02:12 -0700
Subject: [PATCH] only show header anchors on hover

---
 src/lib/Heading.svelte | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/lib/Heading.svelte b/src/lib/Heading.svelte
index 2ebca1a..d9ac0b5 100644
--- a/src/lib/Heading.svelte
+++ b/src/lib/Heading.svelte
@@ -9,7 +9,8 @@
     a {
         /* Works better to set the size here for line-height reasons */
         font-size: 0.9em;
-        color: hsl(0, 0%, 50%);
+        /* color: hsl(0, 0%, 25%); */
+        color: var(--accent-color);
     }
 
     a:hover {
@@ -18,31 +19,45 @@
 
     svg {
         width: 1em;
+        /* tiny tweak for optical alignment */
+        transform: translateY(2px);
     }
 
     .before {
         display: none;
-        margin-right: 0.5rem;
-        margin-left: calc(-1em - 0.5rem);
+        padding-right: 0.25em;
+        margin-left: -1.25em;
     }
     
     @media(min-width: 58rem) {
         .before {
             display: inline;
+            opacity: 0;
+            transition: opacity 150ms;
         }
+
+        .h:hover .before, .before:hover {
+            opacity: 1;
+        }
+
         .after {
             display: none;
         }
+
+        .h:hover {
+            cursor: default;
+        }
     }
 </style>
 
 <svelte:element this={tag} {id} class="h">
-    <a href="#{id}" class="before">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
-        </svg></a><span> <!-- Looks ugly but necessary to get rid of spurious whitespace -->
-            <slot></slot>
-        </span>
+    <span class="before">
+        <a href="#{id}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+            </svg></a></span><span> <!-- Looks ugly but necessary to get rid of spurious whitespace -->
+        <slot></slot>
+    </span>
     <!-- Icon from https://heroicons.com/ -->
     <a href="#{id}" class="after">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">