Move the heading generating to a partial that iteratively wraps each character of the heading in a <span>. The CSS for the site heading uses :nth-child to color each span a different color.
24 lines
934 B
HTML
24 lines
934 B
HTML
{{- $currentPage := . -}}
|
|
{{- $url := .RelPermalink -}}
|
|
<header class="site">
|
|
<div class="platter grid">
|
|
<h1 class="site">
|
|
<a class="site-name" href="{{ `` | absURL }}">{{ partial "site_name.html" site.Params.shortTitle }}</a>
|
|
</h1>
|
|
<nav class="site bulleted">
|
|
{{ with site.Menus.main }}
|
|
{{- range . -}}
|
|
<li><a {{ if $currentPage.HasMenuCurrent "main" . }} class="active"{{ end }} href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
|
|
{{- end -}}
|
|
{{ end }}
|
|
</nav>
|
|
<nav class="social">
|
|
{{ with site.Menus.social }}
|
|
{{- range . -}}
|
|
{{- $targetBlank := .Params.targetBlank | default true -}}
|
|
<li><a style="--url: var(--{{ .Identifier }}-icon)" href="{{ .URL }}" {{ if $targetBlank }}target="_blank"{{ end }} aria-label="{{ .Name }}"><span>{{ .Params.shortName | default .Name }}</span></a></li>
|
|
{{- end -}}
|
|
{{ end }}
|
|
</nav>
|
|
</div>
|
|
</header>
|