122 lines
8.1 KiB
Handlebars
122 lines
8.1 KiB
Handlebars
|
{{!-- Kopfzeile: Logo links, Menü, Symbole rechts — dahinter das Hintergrundbild --}}
|
||
|
|
<header class="site-header site-header--overlay-{{#match @custom.header_overlay "Dunkel"}}dark{{else match @custom.header_overlay "Keine"}}none{{else}}light{{/match}}">
|
||
|
|
|
||
|
|
{{!-- Hintergrundbild als echtes Bild: so bestimmt es die Höhe der Kopfzeile und wird ganz gezeigt --}}
|
||
|
|
{{#if @custom.header_background}}
|
||
|
|
<img class="site-header__bg" alt=""
|
||
|
|
srcset="{{img_url @custom.header_background size="m"}} 750w, {{img_url @custom.header_background size="l"}} 1140w, {{img_url @custom.header_background size="xl"}} 1920w"
|
||
|
|
sizes="100vw" src="{{img_url @custom.header_background size="xl"}}">
|
||
|
|
{{else if @site.cover_image}}
|
||
|
|
<img class="site-header__bg" alt=""
|
||
|
|
srcset="{{img_url @site.cover_image size="m"}} 750w, {{img_url @site.cover_image size="l"}} 1140w, {{img_url @site.cover_image size="xl"}} 1920w"
|
||
|
|
sizes="100vw" src="{{img_url @site.cover_image size="xl"}}">
|
||
|
|
{{/if}}
|
||
|
|
|
||
|
|
<div class="site-header__inner">
|
||
|
|
|
||
|
|
<a class="site-brand" href="{{@site.url}}">
|
||
|
|
{{#if @site.logo}}
|
||
|
|
<img class="site-brand__logo" src="{{img_url @site.logo size="s"}}" alt="{{@site.title}}">
|
||
|
|
{{/if}}
|
||
|
|
{{#if @custom.show_site_title}}
|
||
|
|
<span class="site-brand__title">{{@site.title}}</span>
|
||
|
|
{{else}}
|
||
|
|
{{#unless @site.logo}}<span class="site-brand__title">{{@site.title}}</span>{{/unless}}
|
||
|
|
{{/if}}
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<button class="nav-toggle" type="button" aria-label="{{t "Menu"}}" aria-expanded="false" aria-controls="site-nav">
|
||
|
|
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<nav class="site-nav" id="site-nav" aria-label="{{t "Menu"}}">
|
||
|
|
{{navigation}}
|
||
|
|
</nav>
|
||
|
|
{{!--
|
||
|
|
Aufklappmenüs: Ghost kennt nur ein flaches Menü. Die Ebene ergibt sich aus den
|
||
|
|
Bindestrichen am Anfang des Namens:
|
||
|
|
Unsere Reisen
|
||
|
|
- Europa (Unterpunkt von "Unsere Reisen")
|
||
|
|
-- Zypern (Unterpunkt von "Europa")
|
||
|
|
- Asien
|
||
|
|
Das Skript steht direkt hinter dem Menü, damit nichts sichtbar umspringt.
|
||
|
|
--}}
|
||
|
|
<script>
|
||
|
|
(function () {
|
||
|
|
var list = document.querySelector('#site-nav > ul');
|
||
|
|
if (!list) return;
|
||
|
|
|
||
|
|
var chevron = '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>';
|
||
|
|
var submenuOf = function (parent) {
|
||
|
|
var submenu = parent.querySelector(':scope > .nav-submenu');
|
||
|
|
if (submenu) return submenu;
|
||
|
|
submenu = document.createElement('ul');
|
||
|
|
submenu.className = 'nav-submenu';
|
||
|
|
var toggle = document.createElement('button');
|
||
|
|
toggle.type = 'button';
|
||
|
|
toggle.className = 'nav-submenu-toggle';
|
||
|
|
toggle.setAttribute('aria-expanded', 'false');
|
||
|
|
toggle.setAttribute('aria-label', parent.querySelector('a').textContent);
|
||
|
|
toggle.innerHTML = chevron;
|
||
|
|
parent.classList.add('nav-has-children');
|
||
|
|
parent.appendChild(toggle);
|
||
|
|
parent.appendChild(submenu);
|
||
|
|
return submenu;
|
||
|
|
};
|
||
|
|
|
||
|
|
// parents[0] = letzter Hauptpunkt, parents[1] = letzter Unterpunkt der ersten Ebene
|
||
|
|
var parents = [null, null];
|
||
|
|
Array.prototype.slice.call(list.children).forEach(function (item) {
|
||
|
|
var link = item.querySelector('a');
|
||
|
|
if (!link) return;
|
||
|
|
var match = /^\s*((?:[-\u2013\u2014]\s*)+)(.+)$/.exec(link.textContent);
|
||
|
|
var depth = match ? Math.min(match[1].replace(/\s/g, '').length, 2) : 0;
|
||
|
|
// Ohne passenden Oberpunkt eine Ebene höher einhängen
|
||
|
|
while (depth > 0 && !parents[depth - 1]) depth--;
|
||
|
|
|
||
|
|
if (depth === 0) {
|
||
|
|
parents = [item, null];
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
link.textContent = match[2];
|
||
|
|
submenuOf(parents[depth - 1]).appendChild(item);
|
||
|
|
if (depth === 1) parents[1] = item;
|
||
|
|
|
||
|
|
// Ist ein Unterpunkt die aktuelle Seite, werden auch seine Oberpunkte hervorgehoben
|
||
|
|
if (item.classList.contains('nav-current')) {
|
||
|
|
for (var i = 0; i < depth; i++) parents[i].classList.add('nav-current-parent');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="site-actions">
|
||
|
|
{{#if @custom.linkedin_url}}
|
||
|
|
<a class="icon-link" href="{{@custom.linkedin_url}}" target="_blank" rel="noopener" aria-label="LinkedIn">
|
||
|
|
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3V9.75zm6.5 0h3.8v1.6h.06c.53-1 1.83-1.9 3.76-1.9 4.02 0 4.88 2.5 4.88 6.1V21h-4v-4.9c0-1.2-.02-2.7-1.7-2.7s-1.96 1.3-1.96 2.6V21h-4V9.75z"/></svg>
|
||
|
|
</a>
|
||
|
|
{{/if}}
|
||
|
|
{{#if @custom.bluesky_url}}
|
||
|
|
<a class="icon-link" href="{{@custom.bluesky_url}}" target="_blank" rel="noopener" aria-label="Bluesky">
|
||
|
|
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M5.2 3.6C7.95 5.66 10.9 9.85 12 12.1c1.1-2.25 4.05-6.44 6.8-8.5 1.98-1.5 5.2-2.65 5.2 1.03 0 .73-.42 6.17-.67 7.05-.86 3.07-3.99 3.85-6.78 3.38 4.87.83 6.11 3.57 3.43 6.32-5.08 5.21-7.3-1.31-7.87-2.98-.1-.31-.15-.45-.11-.33-.04-.12-.01.02-.11.33-.57 1.67-2.79 8.19-7.87 2.98-2.68-2.75-1.44-5.49 3.43-6.32-2.79.47-5.92-.31-6.78-3.38C.42 10.8 0 5.36 0 4.63 0 .95 3.22 2.1 5.2 3.6z"/></svg>
|
||
|
|
</a>
|
||
|
|
{{/if}}
|
||
|
|
{{#if @custom.mastodon_url}}
|
||
|
|
<a class="icon-link" href="{{@custom.mastodon_url}}" target="_blank" rel="me noopener" aria-label="Mastodon">
|
||
|
|
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M21.33 14.34c-.3 1.52-2.66 3.19-5.37 3.51-1.41.17-2.8.32-4.29.25-2.42-.11-4.34-.58-4.34-.58 0 .24.02.46.05.67.31 2.38 2.37 2.53 4.31 2.59 1.96.07 3.71-.48 3.71-.48l.08 1.77s-1.37.74-3.82.87c-1.35.07-3.02-.03-4.97-.55C2.46 21.27 1.73 16.74 1.62 12.14c-.03-1.36-.01-2.65-.01-3.73 0-4.7 3.08-6.08 3.08-6.08C6.24 1.62 8.9 1.32 11.67 1.3h.07c2.77.02 5.43.32 6.98 1.03 0 0 3.08 1.38 3.08 6.08 0 0 .04 3.47-.47 5.93zM18.4 8.83c0-1.16-.3-2.09-.89-2.77-.61-.68-1.41-1.03-2.4-1.03-1.15 0-2.02.44-2.6 1.32L12 7.3l-.56-.94c-.58-.88-1.45-1.32-2.6-1.32-.99 0-1.79.35-2.4 1.03-.59.68-.89 1.61-.89 2.77v5.68h2.25V9c0-1.16.49-1.75 1.47-1.75 1.08 0 1.62.7 1.62 2.08v3.02h2.24V9.34c0-1.38.54-2.08 1.62-2.08.98 0 1.47.59 1.47 1.75v5.51h2.25V8.83z"/></svg>
|
||
|
|
</a>
|
||
|
|
{{/if}}
|
||
|
|
|
||
|
|
<button class="icon-link theme-toggle" type="button" aria-label="{{t "Toggle dark mode"}}">
|
||
|
|
<svg class="theme-toggle__moon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
|
||
|
|
<svg class="theme-toggle__sun" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button class="icon-link" type="button" data-ghost-search aria-label="{{t "Search"}}">
|
||
|
|
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</header>
|