Draw only one hash for headings, and place them in the gutter in wide layouts, or trailing the heading text in narrow layouts. Do this with grid in the wide version, and flexbox in the narrow layout. Add a --text-color-light CSS variable for content that should be lighter than --text-color-secondary.
9 lines
507 B
HTML
9 lines
507 B
HTML
{{- $pageWantsAnchors := .Page.Params.renderHeadingAnchors | default true -}}
|
|
{{- $anchorEnabledForThisHeading := .Attributes.anchor | default true -}}
|
|
{{- $hasAnchor := and $pageWantsAnchors $anchorEnabledForThisHeading -}}
|
|
<h{{ .Level }} id="{{ .Anchor }}" class="heading{{ if $hasAnchor }} with-anchor{{ end }}">
|
|
{{- if $hasAnchor -}}
|
|
<span class="heading__anchor"><a href="#{{ .Anchor }}">#</a></span>
|
|
{{- end -}}
|
|
<span class="heading__content">{{ .Text | safeHTML }}</span>
|
|
</h{{ .Level }}>
|