new header & menu layout by Cristoph

This commit is contained in:
rra
2022-09-15 08:34:52 +02:00
parent 14eb01e513
commit a226b45bc0
6 changed files with 577 additions and 130 deletions

View File

@ -1,24 +1,15 @@
<header id="top-menu">
<div class="mobile-menu">
<button class="hamburger" onclick="this.classList.toggle('opened'); document.querySelector('.drawer').classList.toggle('opened');">
<svg width="30" fill="#3C3D3D" viewBox="0 0 50 40">
<g>
<path class="top" d="M0 8h50v3H0z"/>
<path class="bottom" d="M0 28h50v3H0z"/>
<path class="middle" d="M0 18h50v3H0z"/>
</g>
</svg>
</button>
<a href="https://members.lumbung.space" id="login">login</a>
<div class="header-row">
<a href="/" class="home-link">
<img class="logo" src="/img/logo.svg" alt="{{ .Site.Title }}">
</a>
<a href="https://members.lumbung.space" class="login-link">Login</a>
</div>
<a href="/" class="home-link">
<img class="logo" src="{{ .Site.Params.Logo }}" alt="{{ .Site.Title }}">
</a>
</header>
<div class="menu-row">
<nav class="menu">
<img class="menu-dot" src="/img/black-dot.svg" alt="black dot">
<ul>
<li><a href="/">home</a></li>
<li><a href="/timeline/">harvest</a></li>
{{/* <li><a href="/about/">about</a></li> */}}
<li class="has-submenu">about
@ -42,28 +33,12 @@
</ul>
</nav>
<aside class="drawer">
<ul>
<li><a href="/">home</a></li>
<li><a href="/timeline/">harvest</a></li>
<li class="has-submenu">about
<ul class="submenu">
<li><a href="/about/">about us</a></li>
<li><a href="/contributors/">contributors</a></li>
</ul>
</li>
<li><a href="/calendar/">calendar</a></li>
<li><a href="/tv/">tv</a></li>
<li><a href="/social/">social</a></li>
<li><a href="/pen/">pen</a></li>
<li><a href="/shouts/">shouts</a></li>
<li class="has-submenu">ekonomi
<ul class="submenu">
<li><a href="/tags/lumbungkiosproducts/">kios</a></li>
<li><a href="/tags/lumbunggallery/">gallery</a></li>
</ul>
</li>
<li><a href="https://books.lumbung.space">books</a></li>
</ul>
</aside>
</header>
{{- partial "filter-nav.html" . -}}
<div class="mobile-menu-button">
<div class="mobile-menu-button--line"></div>
<div class="mobile-menu-button--line"></div>
<div class="mobile-menu-button--line"></div>
</div>
</div>