Add misssing styles for anchor-link in render-header.

This commit is contained in:
Fredrik Jonsson 2020-11-13 09:17:51 +01:00
commit 7dab9c765b
2 changed files with 23 additions and 2 deletions

View file

@ -298,3 +298,24 @@ figure {
}
}
}
// Header anchor links
.anchor-link {
opacity: 0;
transition: all 130ms ease-in;
}
.anchor-header {
&:focus,
&:hover {
.anchor-link {
opacity: .3;
&:focus,
&:hover {
opacity: 1;
}
}
}
}

View file

@ -1,5 +1,5 @@
<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="anchor-header">{{ .Text | safeHTML }} <a class="anchor-link" href="#{{ .Anchor | safeURL }}" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="anchor-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
<path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />