luxick
f7ea9cde45
The menu collapsed to a hamburger below 640px, which was roughly twice the width the items actually need: measured with Segoe UI Semibold, the five entries occupy 296px against 343px available at a 375px viewport. Drops the toggle entirely and scales the column gap and font size with clamp() instead, so there is no breakpoint at all. flex-wrap handles the extreme case -- below ~330px the row wraps to two lines, which still shows every item rather than hiding them. Also removes the checkbox-and-label toggle hack, which announced itself as a checkbox and carried no aria-expanded state. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
35 lines
1.3 KiB
HTML
35 lines
1.3 KiB
HTML
<header class="site-header">
|
|
<div class="container site-branding">
|
|
<a class="site-logo" href="{{ "/" | relURL }}" rel="home">
|
|
{{ with resources.Get site.Params.logo }}
|
|
{{ $l := .Resize "160x png" }}
|
|
<img src="{{ $l.RelPermalink }}" width="{{ $l.Width }}" height="{{ $l.Height }}"
|
|
alt="Wappen des Motorradclub Giebelwald">
|
|
{{ end }}
|
|
</a>
|
|
<div class="site-titles">
|
|
<p class="site-title"><a href="{{ "/" | relURL }}" rel="home">{{ site.Title }}</a></p>
|
|
<p class="site-tagline">{{ site.Params.tagline }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{ with resources.Get site.Params.banner }}
|
|
{{ $banner := .Resize "1600x webp q80" }}
|
|
<img class="site-banner" src="{{ $banner.RelPermalink }}"
|
|
width="{{ $banner.Width }}" height="{{ $banner.Height }}"
|
|
alt="" loading="eager" decoding="async">
|
|
{{ end }}
|
|
|
|
<nav class="site-nav" aria-label="Hauptnavigation">
|
|
<div class="container">
|
|
<ul class="nav-list">
|
|
<li><a href="{{ "/" | relURL }}"{{ if .IsHome }} aria-current="page"{{ end }}>Start</a></li>
|
|
{{ range site.Menus.main }}
|
|
{{ $active := or ($.IsMenuCurrent "main" .) ($.HasMenuCurrent "main" .) }}
|
|
<li><a href="{{ .URL }}"{{ if $active }} aria-current="page"{{ end }}>{{ .Name }}</a></li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|