github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-24 14:00:42 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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 --> <!-- prettier-ignore-start -->
{{- if $showAnchor -}} {{- if $showAnchor -}}
<div class="gblog-post__anchorwrap"> <div class="flex align-center gblog-post__anchorwrap">
<h{{ .Level }} id="{{ .Anchor | safeURL }}" {{- with .Attributes.class }} <h{{ .Level }} id="{{ .Anchor | safeURL }}" {{- with .Attributes.class }}
class="{{ . }}" class="{{ . }}"
{{- end }} {{- end }}
> >
{{ .Text | safeHTML }} {{ .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 }}> </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> </div>
{{- else -}} {{- else -}}
<div class="gblog-post__anchorwrap"> <div class="gblog-post__anchorwrap">

8
src/sass/_base.scss
View File

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