made the heading links only show when hovering over them (#360)

CommanderStorm · web-flow · commit 4333182da1a9 · 2024-11-21T15:58:22.000+01:00
* made the heading links only show when hovering over them

* formatting fixes
diff --git a/assets/custom.scss b/assets/custom.scss
@@ -135,11 +135,17 @@ ul.projects {
   }
 }
 
-.heading-link {
+.heading-link,
+.heading-link:hover {
+  color: var(--bs-body-color);
   border-bottom: none;
-  &::before {
+}
+
+.heading-link:hover {
+  &::after {
     font-size: 1rem;
     content: "🔗";
+    padding-left: 10px;
   }
 }
 
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
@@ -1,2 +1,2 @@
 
-<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a class="heading-link" href="#{{ .Anchor | safeURL }}"></a></h{{ .Level }}>
+<a class="heading-link d-flex flex-col" href="#{{ .Anchor | safeURL }}"><h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}></a>

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`
`2`		`-<h{{ .Level }} id="{{ .Anchor \| safeURL }}">{{ .Text \| safeHTML }} <a class="heading-link" href="#{{ .Anchor \| safeURL }}"></a></h{{ .Level }}>`
	`2`	`+<a class="heading-link d-flex flex-col" href="#{{ .Anchor \| safeURL }}"><h{{ .Level }} id="{{ .Anchor \| safeURL }}">{{ .Text \| safeHTML }}</h{{ .Level }}></a>`