theme: Hide anchor until mouse-over

Fixes #2982

assets/js/alpinejs/data/navbar.js

@@ -11,6 +11,7 @@ export const navbar = (Alpine) => ({
 					let els = contentEl.querySelectorAll('h2[id], h3[id], h4[id], h5[id], h6[id], dt[id]');
 					for (let i = 0; i < els.length; i++) {
 						let el = els[i];
+						el.classList.add('group');
 						let a = anchorTemplate.content.cloneNode(true).firstElementChild;
 						a.href = '#' + el.id;
 						el.appendChild(a);

layouts/partials/layouts/templates.html

@@ -1,5 +1,5 @@
 <template id="anchor-heading">
-  <a class="inline-flex items-center" aria-label="Anchor">
+  <a class="hidden group-hover:inline-flex items-center" aria-label="Anchor">
     <svg class="ml-2 fill-primary hover:fill-primary/70 w-4 h-4">
       <use href="#icon--anchor"></use>
     </svg>