KureShisen/Hugo-theme-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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); margin-inline-start: calc((var(--card-padding)) * -1);
padding-inline-start: calc(var(--card-padding) - var(--heading-border-size)); padding-inline-start: calc(var(--card-padding) - var(--heading-border-size));
border-inline-start: var(--heading-border-size) solid var(--accent-color); 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 { figure {

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

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