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 headings anchors.

Browse source
This commit is contained in:
Fredrik Jonsson 2026-06-05 12:50:36 +02:00
commit 327590df73
2 changed files with 14 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

19
assets/css/components/_anchor.css
View file

@ -1,24 +1,19 @@
/* Anchor */
/* TODO: Implement anchor-positioning when uptake is good. */
.anchor {
--anchor-gap: 0.5rem;
--anchor-opacity: 0.4;
display: grid;
grid-template-columns: auto auto;
justify-content: start;
align-items: baseline;
gap: var(--anchor-gap);
a {
& > a {
opacity: 0;
text-decoration: none;
width: fit-content;
padding-inline-start: var(--anchor-gap);
}
&:has(:focus-visible),
&:hover {
a {
& > a {
opacity: var(--anchor-opacity);
&:focus-visible,
@ -27,8 +22,8 @@
}
}
}
}
p:has(+ .anchor) {
margin-block-end: 0;
svg {
display: inline;
}
}

16
layouts/markup_examples/render-heading.html
View file

@ -1,12 +1,10 @@
<div class="anchor">
<h{{ .Level }} id="{{ .Anchor | safeURL }}" {{ range $k, $v := .Attributes }}{{ printf " %s=%q" $k $v | safeHTMLAttr }}{{ end }}>
<h{{ .Level }} class="anchor" id="{{ .Anchor | safeURL }}" {{ range $k, $v := .Attributes }}{{ printf " %s=%q" $k $v | safeHTMLAttr }}{{ end }}>
{{- .Text | safeHTML -}}
</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" />
<a href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "string_permalink" }}: {{ .Text | safeHTML }}">{{- /* chomp newline */ -}}
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="2 -2 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>
</div>
</h{{ .Level }}>