From 68c87498a7256f001ffb27442cfc26e34f13b163 Mon Sep 17 00:00:00 2001
From: Oliver Ladner <waste@lugh.ch>
Date: Fri, 19 Jun 2026 13:25:00 +0200
Subject: [PATCH] feat: hover headings anchor

---
 static/css/in.css   | 13 ++++++++++++-
 static/css/out.css  | 23 +++++++++++++++++++----
 templates/base.html |  8 ++++----
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/static/css/in.css b/static/css/in.css
index 041b7b4a..1ae3c995 100644
--- a/static/css/in.css
+++ b/static/css/in.css
@@ -71,7 +71,18 @@
 
 /*Hide heading anchor links unless hovering over them*/
 .headerlink {
-  @apply no-underline text-rp-dawn-love ml-1 md:ml-2 hover:no-underline;
+  /*@apply no-underline text-rp-dawn-love ml-1 md:ml-2 hover:no-underline;*/
+  @apply no-underline text-rp-dawn-love ml-1 md:ml-2 hover:no-underline opacity-0 transition-opacity duration-150;
+}
+
+h1:hover .headerlink,
+h2:hover .headerlink,
+h3:hover .headerlink,
+h4:hover .headerlink,
+h5:hover .headerlink,
+h6:hover .headerlink,
+.headerlink:focus-visible {
+  @apply opacity-100;
 }
 
 .note {
diff --git a/static/css/out.css b/static/css/out.css
index 81d47630..d79fd51b 100644
--- a/static/css/out.css
+++ b/static/css/out.css
@@ -107,7 +107,7 @@
 }
 
 /*
-! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -944,7 +944,7 @@ ul.tagcloud li {
   font-weight: 500;
   font-family: inherit;
   color: var(--tw-prose-kbd);
-  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
+  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
   font-size: 0.875em;
   border-radius: 0.3125rem;
   padding-top: 0.1875em;
@@ -1065,7 +1065,7 @@ ul.tagcloud li {
   --tw-prose-quote-borders: #e5e7eb;
   --tw-prose-captions: #6b7280;
   --tw-prose-kbd: #111827;
-  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
+  --tw-prose-kbd-shadows: 17 24 39;
   --tw-prose-code: #111827;
   --tw-prose-pre-code: #e5e7eb;
   --tw-prose-pre-bg: #1f2937;
@@ -1083,7 +1083,7 @@ ul.tagcloud li {
   --tw-prose-invert-quote-borders: #374151;
   --tw-prose-invert-captions: #9ca3af;
   --tw-prose-invert-kbd: #fff;
-  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
+  --tw-prose-invert-kbd-shadows: 255 255 255;
   --tw-prose-invert-code: #fff;
   --tw-prose-invert-pre-code: #d1d5db;
   --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
@@ -1556,10 +1556,15 @@ code {
 /*Hide heading anchor links unless hovering over them*/
 
 .headerlink {
+  /*@apply no-underline text-rp-dawn-love ml-1 md:ml-2 hover:no-underline;*/
   margin-left: 0.25rem;
   --tw-text-opacity: 1;
   color: rgb(180 99 122 / var(--tw-text-opacity, 1));
   text-decoration-line: none;
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }
 
 .headerlink:hover {
@@ -1572,6 +1577,16 @@ code {
   }
 }
 
+h1:hover .headerlink,
+h2:hover .headerlink,
+h3:hover .headerlink,
+h4:hover .headerlink,
+h5:hover .headerlink,
+h6:hover .headerlink,
+.headerlink:focus-visible {
+  opacity: 1;
+}
+
 .note {
   margin: 2rem;
   --tw-bg-opacity: 1;
diff --git a/templates/base.html b/templates/base.html
index 1ba55f6e..2786036d 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -142,14 +142,14 @@
             </div>
             <div class="col-span-3 p-4 md:border-l-4 border-rp-dawn-overlay dark:border-rp-moon-overlay">
               <p class="pb-4">
-              100% artisanal <a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" rel="license noopener noreferrer" style="display: inline-block">content licensed under <em>CC BY-SA 4.0</em></a>,
-              mostly <a href="https://wave.webaim.org/report#/https://lugh.ch/{{ output_file }}">valid <em>WCAG 2.2 AA</em></a>.
+              100% artisanal <a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" rel="license noopener noreferrer" style="display: inline-block">content licensed under <em>CC BY-SA 4.0</em></a>.
+              Valid <a href="https://wave.webaim.org/report#/https://lugh.ch/{{ output_file }}"><em>WCAG 2.2 AA</em></a> (except code blocks, sorry).
               </p>
               <p class="pb-4">
-              <a href="/feeds/atom.xml">Atom feed</a> of all blog posts.
+                Blog post feed: <a href="/feeds/atom.xml">Atom</a>, <a href="/feeds/rss.xml">RSS</a>
               </p>
               <p class="pb-4">
-              IndieWeb: <a href="https://bubbles.town">Bubbles</a>, <a href="https://indieblog.page">indieblog.page</a>, <a href="https://indieweb.org/Getting_Started">Getting started on the IndieWeb</a>
+              IndieWeb: <a href="https://bubbles.town">Bubbles</a>, <a href="https://indieblog.page">indieblog.page</a>, <a href="https://indieweb.org/Getting_Started">Getting started</a>
               </p>
             </div>
           </div>