ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve render hook example for headings.

Browse source
This commit is contained in:
Fredrik Jonsson 2025-01-12 19:09:34 +01:00
commit 3a522997f7
2 changed files with 38 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

30
assets/sass/_zen.scss
View file

@ -128,6 +128,36 @@ article {
}
}
// Anchor
.anchor {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
gap: .5rem;
a {
opacity: 0;
text-decoration: none;
}
&:focus-visible,
&:hover {
a {
opacity: .4;
&:focus-visible,
&:hover {
opacity: 1;
}
}
}
p:has(+ &) {
margin-block-end: 0;
}
}
// Search
.search-text {

11
layouts/_default/_markup/render-heading.html.example
View file

@ -1,7 +1,12 @@
<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="icon-inline"{{ range $k, $v := .Attributes }}{{ printf " %s=%q" $k $v | safeHTMLAttr }}{{ end }}>
<div class="anchor">
<h{{ .Level }} id="{{ .Anchor | safeURL }}" {{ range $k, $v := .Attributes }}{{ printf " %s=%q" $k $v | safeHTMLAttr }}{{ end }}>
{{- .Text | safeHTML -}}
<a class="icon-link" href="#{{ .Anchor | safeURL }}" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
</h{{ .Level }}>
<a class="" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "string_permalink" }}: {{ .Text | safeHTML }}">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" 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" />
</svg></a></h{{ .Level }}>
</svg>
</a>
</div>