github
/
hugo-geekblog
mirror of https://github.com/thegeeklab/hugo-geekblog.git
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: use flexbox to align heading anchors (#434)

This commit is contained in:
Robert Kaussow 2023-09-01 22:42:06 +02:00 committed by GitHub
parent c964f46de2
commit 945b31d146
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
hugo-geekblog
View File

@ -1 +0,0 @@
/home/rknet/rkau2905/Devel/private/hugo/hugo-geekblog/

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

@ -3,16 +3,16 @@
<!-- prettier-ignore-start -->
{{- if $showAnchor -}}
<div class="gblog-post__anchorwrap">
<div class="flex align-center gblog-post__anchorwrap">
<h{{ .Level }} id="{{ .Anchor | safeURL }}" {{- with .Attributes.class }}
class="{{ . }}"
{{- end }}
>
{{ .Text | safeHTML }}
<a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gblog-post__anchor clip flex align-center" aria-label="Anchor {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
<svg class="gblog-icon gblog_link"><use xlink:href="#gblog_link"></use></svg>
</a>
</h{{ .Level }}>
<a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gblog-post__anchor clip flex align-center" aria-label="Anchor {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
<svg class="gblog-icon gblog_link"><use xlink:href="#gblog_link"></use></svg>
</a>
</div>
{{- else -}}
<div class="gblog-post__anchorwrap">

8
src/sass/_base.scss
View File

@ -331,17 +331,17 @@ svg.gblog-icon {
}
&__anchorwrap {
gap: 0.5em;
&:hover .gblog-post__anchor svg.gblog-icon {
color: var(--control-icons);
}
}
&__anchor {
margin-left: $padding-8;
svg.gblog-icon {
width: 1.25em;
height: 1.25em;
width: 1.85em;
height: 1.85em;
color: transparent;
}