troldspejlet/hugo-theme-stack
troldspejlet/hugo-theme-stack
1
0
Fork 0
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2024-11-23 10:21:46 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: display header anchor on hover (#999)

Browse source
This commit is contained in:
Jimmy Cai 2024-03-30 23:22:18 +01:00 committed by GitHub
parent ce798a32a9
commit 130e2f6607
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 19 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
assets/scss/partials/layout/article.scss
View file

@ -222,6 +222,24 @@
margin-inline-start: calc((var(--card-padding)) * -1);
padding-inline-start: calc(var(--card-padding) - var(--heading-border-size));
border-inline-start: var(--heading-border-size) solid var(--accent-color);
position: relative;
a.header-anchor {
transition: opacity 0.3s ease;
opacity: 0;
position: absolute;
left: 0;
width: var(--card-padding);
text-align: center;
color: var(--accent-color);
}
&:hover,
&:focus {
a.header-anchor {
opacity: 1;
}
}
}
figure {

2
layouts/_default/_markup/render-heading.html
View file

@ -1,4 +1,4 @@
<h{{ .Level }} id="{{ .Anchor }}">
<a href="#{{ .Anchor }}">#</a>
<a href="#{{ .Anchor }}" class="header-anchor">#</a>
{{ .Text | safeHTML }}
</h{{ .Level }}>