130 lines
7.4 KiB
Handlebars
130 lines
7.4 KiB
Handlebars
|
{{!-- Kopfbereich: schmale Menüleiste, darunter Logo und Untertitel über einer kräftigen Linie --}}
|
||
|
|
<header class="site-header container">
|
||
|
|
|
||
|
|
<div class="topbar">
|
||
|
|
|
||
|
|
<button class="nav-toggle" type="button" aria-label="{{t "Menu"}}" aria-expanded="false" aria-controls="site-nav">
|
||
|
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></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="12" height="12" fill="none" stroke="currentColor" stroke-width="3" 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*((?:[-–—]\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="topbar__actions">
|
||
|
|
{{#if @site.members_enabled}}
|
||
|
|
{{#if @member}}
|
||
|
|
<a class="btn" href="#/portal/account" data-portal="account">{{t "Account"}}</a>
|
||
|
|
{{else}}
|
||
|
|
<a class="btn" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a>
|
||
|
|
{{/if}}
|
||
|
|
{{/if}}
|
||
|
|
|
||
|
|
<button class="theme-toggle" type="button" aria-label="{{t "Toggle dark mode"}}">
|
||
|
|
<svg class="theme-toggle__sun" viewBox="0 0 24 24" width="14" height="14" 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>
|
||
|
|
<svg class="theme-toggle__moon" viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
|
||
|
|
<span class="theme-toggle__light">{{t "Light"}}</span>
|
||
|
|
<span class="theme-toggle__dark">{{t "Dark"}}</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="topbar__icons">
|
||
|
|
{{#if @site.facebook}}
|
||
|
|
<a class="icon-link" href="{{social_url type="facebook"}}" target="_blank" rel="noopener" aria-label="Facebook">
|
||
|
|
<svg viewBox="0 0 24 24" width="17" height="17" fill="currentColor"><path d="M13.5 22v-8.5h2.9l.45-3.4H13.5V7.95c0-.98.27-1.65 1.68-1.65h1.8V3.26A24 24 0 0 0 14.36 3.1c-2.6 0-4.37 1.58-4.37 4.5v2.5H7.05v3.4H10V22h3.5z"/></svg>
|
||
|
|
</a>
|
||
|
|
{{/if}}
|
||
|
|
{{#if @site.twitter}}
|
||
|
|
<a class="icon-link" href="{{social_url type="twitter"}}" target="_blank" rel="noopener" aria-label="X">
|
||
|
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M17.75 3h3.07l-6.7 7.66L22 21h-6.17l-4.83-6.32L5.47 21H2.4l7.17-8.2L2 3h6.33l4.37 5.77L17.75 3zm-1.08 16.17h1.7L7.4 4.73H5.58l11.09 14.44z"/></svg>
|
||
|
|
</a>
|
||
|
|
{{/if}}
|
||
|
|
{{#if @custom.instagram_url}}
|
||
|
|
<a class="icon-link" href="{{@custom.instagram_url}}" target="_blank" rel="noopener" aria-label="Instagram">
|
||
|
|
<svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
|
||
|
|
</a>
|
||
|
|
{{/if}}
|
||
|
|
{{#if @custom.youtube_url}}
|
||
|
|
<a class="icon-link" href="{{@custom.youtube_url}}" target="_blank" rel="noopener" aria-label="YouTube">
|
||
|
|
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M21.6 7.2a2.5 2.5 0 0 0-1.76-1.77C18.28 5 12 5 12 5s-6.28 0-7.84.43A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.76 1.77C5.72 19 12 19 12 19s6.28 0 7.84-.43a2.5 2.5 0 0 0 1.76-1.77A26 26 0 0 0 22 12a26 26 0 0 0-.4-4.8zM10 15V9l5.2 3-5.2 3z"/></svg>
|
||
|
|
</a>
|
||
|
|
{{/if}}
|
||
|
|
<button class="icon-link" type="button" data-ghost-search aria-label="{{t "Search"}}">
|
||
|
|
<svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="masthead">
|
||
|
|
<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}}">
|
||
|
|
{{else}}
|
||
|
|
<span class="site-brand__title">{{@site.title}}</span>
|
||
|
|
{{/if}}
|
||
|
|
</a>
|
||
|
|
{{#if @site.description}}
|
||
|
|
<p class="masthead__tagline">{{@site.description}}</p>
|
||
|
|
{{/if}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</header>
|