nav-label: init

* label can be set differently from title
* label can have an optional icon with preffered size

* in site config =>
params:
  label:
    text: "Home"
    icon: /apple-touch-icon.png
    iconHeight: 35
This commit is contained in:
Aditya Telange 2020-10-16 23:47:46 +05:30
parent db52aa9942
commit 3edc160c59
No known key found for this signature in database
GPG Key ID: 82E844EF3DA99E77
2 changed files with 18 additions and 3 deletions

View File

@ -25,6 +25,15 @@
font-weight: 700;
}
.logo a img {
display: inline;
vertical-align: middle;
pointer-events: none;
transform: translate(0, -10%);
border-radius: 6px;
margin-right: 8px;
}
.theme-toggle svg{
height: 18px;
margin: 0 10px;
@ -57,4 +66,4 @@ body:not(.dark) #sun {
.menu .active {
font-weight: 500;
border-bottom: 2px solid currentColor;
}
}

View File

@ -30,7 +30,13 @@
<header class="header">
<nav class="nav">
<p class="logo">
<a href="{{ "" | absLangURL }}">{{ .Site.Title }}</a>
<a href="{{ "" | absLangURL }}">
{{- if .Site.Params.label.icon }}
<img src="{{- .Site.Params.label.icon -}}"
height="{{- .Site.Params.label.iconHeight | default "30px" -}}">
{{- end -}}
{{- .Site.Params.label.text | default .Site.Title -}}
</a>
{{- if (and (not .Site.Params.disableThemeToggle) (not (or (eq .Site.Params.defaultTheme "light") (eq .Site.Params.defaultTheme "dark")))) }}
<span class="theme-toggle">
<a id="theme-toggle">
@ -72,4 +78,4 @@
{{- end }}
</ul>
</nav>
</header>
</header>