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

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

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