Generate anchor in body headings

1 files changed, 38 insertions, 0 deletions

diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss
index f09481e..3802f5a 100644
--- a/assets/css/scopes/_headlines.scss
+++ b/assets/css/scopes/_headlines.scss
@@ -1,6 +1,10 @@
 @include namespace('headlines') {
     @include store((
         --colors: (
+            --link: (
+                --idle-fg:  prop(--colors --obj, $global: true),
+                --hover-fg: prop(--colors --fg-lo, $global: true),
+            ),
             --emph: (
                 --bg:      prop(--colors --bg-hi, $global: true),
                 --body-bg: prop(--colors --bg-hi, $global: true),
@@ -74,5 +78,39 @@
                 );
             }
         }
+
+        @include element('link') {
+            display:        none;
+            margin:         -.5rem 0;
+            padding:        .5rem;
+            vertical-align: -.1em;
+
+            svg {
+                width:  1 / 16 * 14em;
+                height: 1 / 16 * 14em;
+            }
+
+            &:link,
+            &:visited {
+                color: prop(--colors --link --idle-fg);
+
+                &:hover {
+                    color: prop(--colors --link --hover-fg);
+                }
+            }
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            &:hover {
+                @include element('link') {
+                    display: inline-block;
+                }
+            }
+        }
     }
 }