Refactor anchors

* only show on hover
* move to the right on small screens

Author: bash

sass/_anchor.scss

@@ -0,0 +1,40 @@
+// Anchors are by default on the right
+// but if there's enough space they get moved to the left
+// and hang off into the empty space.
+
+@mixin has-anchor {
+    .anchor {
+        position: absolute;
+        transition: opacity 125ms;
+        opacity: .5;
+
+        &:is(:hover, :focus) { opacity: 1; }
+        &:hover { text-decoration: none; }
+    }
+
+    @media (hover: hover) {
+        &:not(:is(:focus-within, :hover)) .anchor { opacity: 0; }
+    }
+}
+
+@mixin has-anchor-right {
+    &:has(.anchor) {
+        padding-right: 1.5ch;
+    }
+
+    .anchor {
+        right: 0;
+    }
+}
+
+@mixin has-anchor-left {
+    &:has(.anchor) {
+        padding-left: 1.5ch;
+        margin-left: -1.5ch;
+    }
+
+    .anchor {
+        left: 0;
+        right: auto;
+    }
+}

sass/_post-content.scss

@@ -45,9 +45,8 @@
     // We only want the anchor hanging off to the left side
     // if there's enough room available.
     @media (width > ($content-max-width + 2rem)) {
-        :is(h1, h2, h3, h4) .anchor {
-            position: absolute;
-            transform: translateX(-100%) translateX(-0.5ch);
+        :is(h1, h2, h3, h4) {
+            @include has-anchor-left;
         }
     }
 }

sass/_typography.scss

@@ -5,18 +5,10 @@ h1, h2, h3, h4 {
     font-weight: bold;
     text-wrap: balance;
     text-wrap: pretty; // relatively new, so we have balance as fallback.
+    position: relative;
 
-    .anchor {
-        margin-right: 0.5ch;
-
-        @media (prefers-contrast: no-preference) and (hover: hover) {
-            transition: opacity 125ms;
-
-            &:not(:focus):not(:hover) {
-                opacity: .1;
-            }
-        }
-    }
+    @include has-anchor;
+    @include has-anchor-right;
 }
 
 h1 {

sass/style.scss

@@ -35,6 +35,7 @@ $content-max-width: 50rem;
     }
 }
 
+@import '_anchor.scss';
 @import '_typography.scss';
 @import '_layout.scss';
 @import '_post-content.scss';