r/lumbung.space
0
0
Fork 0
forked from ruangrupa/lumbung.space
Code Issues Pull Requests Projects Releases Wiki Activity

create "tools" dropdown menu

Browse Source
This commit is contained in:
Aadil Ayub 2022-03-18 18:18:00 +05:00
parent 6bc0982187
commit 2257589b0c
2 changed files with 86 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
themes/lumbung-theme/layouts/partials/header.html
View File

@ -1,6 +1,6 @@
<header id="top-menu"> <header id="top-menu">
<div class="mobile-menu"> <div class="mobile-menu">
<button class="hamburger" onclick="this.classList.toggle('opened'); document.querySelector('.drawer').classList.toggle('opened');"> <button class="hamburger" onclick="this.classList.toggle('opened'); document.querySelector('.drawer').classList.toggle('opened');">
<svg width="30" fill="#3C3D3D" viewBox="0 0 50 40"> <svg width="30" fill="#3C3D3D" viewBox="0 0 50 40">
<g> <g>
<path class="top" d="M0 8h50v3H0z"/> <path class="top" d="M0 8h50v3H0z"/>
@ -9,42 +9,48 @@
</g> </g>
</svg> </svg>
</button> </button>
<a href="https://members.lumbung.space" id="login">login</a> <a href="https://members.lumbung.space" id="login">login</a>
</div>
<a href="/" class="home-link">
<img class="logo" src="{{ .Site.Params.Logo }}" alt="{{ .Site.Title }}">
</a>
<nav class="menu">
<ul>
<li><a href="/">home</a></li>
<li><a href="/about/">about</a></li>
<li><a href="/calendar/">calendar</a></li>
<li class="has-submenu">tools
<ul class="submenu">
<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><a href="/kios/">kios</a></li>
<li><a href="/gallery/">gallery</a></li>
</ul>
</li>
</ul>
</nav>
<aside class="drawer">
<ul>
<li><a href="/">home</a></li>
<li><a href="/about/">about</a></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>
</ul>
</aside>
<div>
<div class="search">
<img src="{{ .Site.Params.baseURL }}/img/search.svg" alt="search">
<input type="search" name="" id="">
</div> </div>
<a href="https://members.lumbung.space" id="login">login</a>
<a href="/" class="home-link"> </div>
<img class="logo" src="{{ .Site.Params.Logo }}" alt="{{ .Site.Title }}"> </header>
</a>
<nav class="menu">
<ul>
<li><a href="/">home</a></li>
<li><a href="/about/">about</a></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>
</ul>
</nav>
<aside class="drawer">
<ul>
<li><a href="/">home</a></li>
<li><a href="/about/">about</a></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>
</ul>
</aside>
<div>
<div class="search">
<img src="{{ .Site.Params.baseURL }}/img/search.svg" alt="search">
<input type="search" name="" id="">
</div>
<a href="https://members.lumbung.space" id="login">login</a>
</div>
</header>

47
themes/lumbung-theme/static/css/main.css
View File

@ -130,10 +130,6 @@ body {
width: 100%; width: 100%;
} }
.entries {
padding-top: 10%;
}
.p-name { .p-name {
padding-right: 1em; padding-right: 1em;
} }
@ -141,11 +137,10 @@ body {
/* base header & menu */ /* base header & menu */
#top-menu { #top-menu {
padding: 1rem; padding: 1.5rem 1rem 0;
display: grid; display: grid;
grid-template-columns: 300px 1fr auto; grid-template-columns: 300px 1fr auto;
align-items: flex-start; align-items: flex-start;
padding-top: 1.5rem;
} }
.home-link { .home-link {
@ -234,6 +229,46 @@ body {
padding: 0.5em; padding: 0.5em;
} }
/* styles for "tools" dropdown menu */
#top-menu ul.submenu {
flex-direction: column;
margin-left: 0;
}
.menu .submenu {
visibility: hidden;
transition: all 0.5s ease-in-out;
}
.submenu li {
margin: 2px 0;
}
.has-submenu {
cursor: pointer;
}
.has-submenu:hover .submenu {
visibility: visible;
}
#top-menu ul.submenu {
margin-left: 11px;
margin-top: 10px;
border: 1px solid ;
gap: 0.25em;
padding: 0.5em;
}
#top-menu a {
padding: 0 5px;
}
#top-menu .submenu a {
margin: 0;
display: flex;
}
/*Article Summary Cards*/ /*Article Summary Cards*/