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

@ -3,6 +3,8 @@ languageCode = "en-gb"
title = "lumbung.space" title = "lumbung.space"
theme = "lumbung-theme" theme = "lumbung-theme"
pluralizeListTitles = "false" pluralizeListTitles = "false"
paginate = 20
[params] [params]
logo = "/img/logo.svg" logo = "/img/logo.svg"
@ -10,6 +12,9 @@ pluralizeListTitles = "false"
description = 'a digital living room for the lumbung ekosistem' description = 'a digital living room for the lumbung ekosistem'
images = ['/img/logo.png'] images = ['/img/logo.png']
title = 'lumbung dot space' title = 'lumbung dot space'
bundleCss = "/bundle.css"
bundleJs = "/bundle.js"
mainSections = ['social', 'shouts', 'calendar', 'tv', 'pen']
[markup.goldmark.renderer] [markup.goldmark.renderer]
unsafe = true unsafe = true
@ -22,3 +27,5 @@ unsafe = true
[permalinks] [permalinks]
timelines = "/timeline/:slug/" timelines = "/timeline/:slug/"

View File

@ -1,24 +1,15 @@
<header id="top-menu"> <header id="top-menu">
<div class="mobile-menu"> <div class="header-row">
<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>
<a href="/" class="home-link"> <a href="/" class="home-link">
<img class="logo" src="{{ .Site.Params.Logo }}" alt="{{ .Site.Title }}"> <img class="logo" src="/img/logo.svg" alt="{{ .Site.Title }}">
</a> </a>
<a href="https://members.lumbung.space" class="login-link">Login</a>
</div>
</header>
<div class="menu-row">
<nav class="menu"> <nav class="menu">
<img class="menu-dot" src="/img/black-dot.svg" alt="black dot">
<ul> <ul>
<li><a href="/">home</a></li>
<li><a href="/timeline/">harvest</a></li> <li><a href="/timeline/">harvest</a></li>
{{/* <li><a href="/about/">about</a></li> */}} {{/* <li><a href="/about/">about</a></li> */}}
<li class="has-submenu">about <li class="has-submenu">about
@ -42,28 +33,12 @@
</ul> </ul>
</nav> </nav>
<aside class="drawer"> {{- partial "filter-nav.html" . -}}
<ul>
<li><a href="/">home</a></li> <div class="mobile-menu-button">
<li><a href="/timeline/">harvest</a></li> <div class="mobile-menu-button--line"></div>
<li class="has-submenu">about <div class="mobile-menu-button--line"></div>
<ul class="submenu"> <div class="mobile-menu-button--line"></div>
<li><a href="/about/">about us</a></li> </div>
<li><a href="/contributors/">contributors</a></li>
</ul> </div>
</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>

View File

@ -73,9 +73,14 @@ body > iframe {
box-sizing: border-box; box-sizing: border-box;
} }
a {
color: #000;
}
.container { .container {
margin: 2em auto; margin: 2em auto;
max-width: 80%; max-width: 80%;
width: 100%;
margin-bottom: 0; margin-bottom: 0;
} }
@ -159,37 +164,128 @@ body > iframe {
/* base header & menu */ /* base header & menu */
#top-menu { .header-row {
padding: 1.5rem 1rem 0; margin: 1.5rem;
display: grid; display: flex;
grid-template-columns: 300px 1fr auto; justify-content: space-between;
align-items: flex-start; align-items: center;
} }
.home-link { .home-link {
text-decoration: none; display: block;
max-width: 700px;
width: 70%;
padding: 0;
} }
.logo { .logo {
width: 283px; display: block;
margin-top: 2rem; width: 100%;
height: auto;
} }
#top-menu a { #top-menu .login-link {
background: #009d9b;
padding: 5px 30px;
color: #fff;
font-weight: 900;
}
.menu-row {
margin: 0 auto;
max-width: 80%;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 15px;
z-index: 99;
}
.filter-link {
background: #333;
height: 100%;
display: flex;
align-items: center;
padding: 0 30px;
color: #fff;
cursor: pointer;
}
.filter-icon {
height: 14px;
width: auto;
display: block;
margin-right: 10px;
}
.filter-icon path {
fill:#fff;
}
.mobile-menu-button {
width: 35px;
height: 16px;
display: none;
flex-direction: column;
justify-content: space-between;
color: pointer;
}
.mobile-menu-button--line {
width: 100%;
height: 2px;
background: #333;
}
.menu {
border: 2px solid #000;
padding: 0 1rem;
display: flex;
align-items: center;
background: #fff;
}
.menu-dot {
width: 10px;
height: 10px;
margin-right: 3rem;
}
.menu ul {
list-style-type: none;
margin: 0 auto;
padding-left: 0;
display: flex;
justify-content: space-between;
text-transform: lowercase;
}
.menu ul li {
margin-right: 1.5rem;
padding: 0.5rem 0;
}
.menu ul li:last-child {
margin-right: 0;
}
.menu-nav-item {
border-right: 2px solid var(--border-color);
padding: 0.5em;
}
.menu a {
text-decoration: none; text-decoration: none;
color: #333; color: #333;
} }
#top-menu a:hover, .menu a:hover,
#top-menu a:focus { .menu a:focus {
color: black; color: black;
} }
#top-menu #login {
font-weight: bold;
margin-top: 8px;
}
#top-menu div { #top-menu div {
display: flex; display: flex;
} }
@ -199,7 +295,7 @@ body > iframe {
display: none; display: none;
} }
#top-menu input { .menu input {
border: none; border: none;
border-bottom: 1px solid #333; border-bottom: 1px solid #333;
margin-right: 2rem; margin-right: 2rem;
@ -207,8 +303,8 @@ body > iframe {
margin-left: 5px; margin-left: 5px;
} }
#top-menu input:focus, .menu input:focus,
#top-menu input:hover { .menu input:hover {
outline: none; outline: none;
border-bottom: 1px solid #333; border-bottom: 1px solid #333;
} }
@ -222,27 +318,8 @@ body > iframe {
display: none; display: none;
} }
.menu {
margin-top: 8px;
}
.menu ul {
list-style-type: none;
margin: 0 auto;
padding-left: 3rem;
display: flex;
justify-content: space-between;
text-transform: lowercase;
max-width: 1100px;
}
.menu-nav-item {
border-right: 2px solid var(--border-color);
padding: 0.5em;
}
/* styles for "tools" dropdown menu */ /* styles for "tools" dropdown menu */
#top-menu ul.submenu { .menu ul.submenu {
flex-direction: column; flex-direction: column;
margin-left: 0; margin-left: 0;
position: absolute; position: absolute;
@ -257,6 +334,7 @@ body > iframe {
.menu .submenu li { .menu .submenu li {
margin: 2px 0; margin: 2px 0;
padding: 0;
} }
.menu .has-submenu { .menu .has-submenu {
@ -272,49 +350,41 @@ body > iframe {
visibility: visible; visibility: visible;
} }
#top-menu .menu ul.submenu { .menu ul.submenu {
margin-left: 11px; margin-left: -0.5em;
margin-top: 10px; margin-top: 8px;
border: 1px solid ; border: 2px solid ;
gap: 0.25em; gap: 0.25em;
padding: 0.5em; padding: 0.5em;
} }
#top-menu a { .menu a {
padding: 0 5px; padding: 0 5px;
} }
#top-menu .menu .submenu a { .menu .menu .submenu a {
margin: 0; margin: 0;
display: flex; display: flex;
} }
#top-menu .drawer .submenu { .menu .drawer .submenu {
position: initial; position: initial;
display: none; display: none;
} }
#top-menu .drawer .submenu.opened { .menu .drawer .submenu.opened {
display: flex; display: flex;
} }
#top-menu .drawer .submenu li { .menu .drawer .submenu li {
padding: 0; padding: 0;
padding-top: 1em; padding-top: 1em;
} }
#top-menu .drawer .opened .submenu { .menu .drawer .opened .submenu {
visibility: visible; visibility: visible;
} }
.drawer .has-submenu {
padding-left: 1em;
margin-left: 5px;
color: #333;
display: flex;
flex-direction: column;
}
/*Article Summary Cards*/ /*Article Summary Cards*/
@ -495,16 +565,15 @@ div.network-source {
right: 1em; right: 1em;
} }
.network-source::before { .network-source .triangle {
content: "";
position: absolute; position: absolute;
right: -20px; right: 0px;
bottom: 0; bottom: 0;
width: 0; width: auto;
height: 0; height: calc(100% + 0.5px);
border-left: 20px solid var(--shouts-dark); top: -0.5px;
border-top: 23px solid transparent; transform: translateX(calc(100% - 0.5px));
border-bottom: 23px solid transparent; fill: var(--shouts-dark);
} }
.network-source a { .network-source a {
@ -1011,6 +1080,117 @@ li.page-item:after {
z-index: -100; z-index: -100;
} }
/* FILTER */
.filter-item, .card, .video-box {
display: none;
}
.show-item {
display: block !important;
}
.filter-buttons-container {
display: none;
background: #fff;
padding: 1.5rem;
border: 2px solid;
position: absolute;
top: 44px;
z-index: 99;
width: 100%;
overflow: hidden;
}
.filter-buttons-container-header {
display: flex;
margin-bottom: 20px;
}
.load-all {
margin-left: 30px;
cursor: pointer;
text-decoration: underline;
color: #333;
}
@media (min-width: 980px) {
.filter-link:hover + .filter-buttons-container {
display: block;
}
.filter-buttons-container:hover {
display: block;
}
}
.filter-buttons {
width: 100%;
margin-bottom: 10px;
display: flex;
white-space: nowrap;
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.filter-buttons button {
display: block;
border: 0;
background: unset;
border-radius: 0;
width: fit-content;
cursor: pointer;
background: #009d9b;
margin-right: 5px;
white-space: nowrap;
color: #fff;
padding: 0.8rem;
text-transform: lowercase;
}
.filter-buttons .filter-button.active {
background: #f04b1e;
}
.filter-buttons .filter-button.active:after {
content:"\00d7";
display: inline-block;
margin-left: 5px;
}
.disable-button {
display: none !important;
}
.page-nav {
display: flex;
justify-content: center;
margin: 20px auto 50px;
}
.nextpage {
padding: 15px;
position: relative;
color: #333;
text-decoration: none;
margin: 0px 20px;
font-size: 38px;
}
.nextpage:after {
content: "";
height: 50%;
width: 100%;
display: block;
border: 2px solid #333;
border-top: 0;
bottom: 0;
position: absolute;
left: 0;
}
/* Landingpage */ /* Landingpage */
.welcome-text { .welcome-text {
text-align: center; text-align: center;
@ -1566,14 +1746,66 @@ a.timeline-url {
} }
/* menu styles */ /* menu styles */
.mobile-menu-button {
display: flex;
}
.menu-row, #top-menu {
position: fixed !important;
z-index: 97;
}
.menu-row {
z-index: 98;
width: fit-content;
margin-top: 3vw;
right: 5%;
}
.filter-buttons-container {
position: fixed;
top: 90px;
z-index: 99;
width: 90%;
overflow: hidden;
left: 5%;
}
.filter-buttons-container.open {
display: block !important;
}
.container {
padding-top: 60px;
}
.filter-link {
background: unset;
padding: 0;
}
.filter-link span {
display: none;
}
.filter-icon {
height: 20px;
margin-right: 24px;
}
.filter-icon path {
fill: #333;
}
#top-menu div.mobile-menu { #top-menu div.mobile-menu {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.mobile-menu #login { #top-menu .login-link {
display: inline-flex; display: none;
margin: 0 0 0 auto;
} }
.hamburger { .hamburger {

View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_2_00000008129498585359231740000016507919400411346327_"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 14.9 14.9"
style="enable-background:new 0 0 14.9 14.9;" xml:space="preserve">
<style type="text/css">
.st0{fill:#333333;}
</style>
<g id="Layer_1">
<g>
<path class="st0" d="M11.8,1.9C11,0.7,9.7,0.1,8,0.3C7.2,0,6.4-0.1,5.6,0.2C3.3,1,1.7,2.6,0.6,4.7c-1.4,2.6-0.5,6.8,2.4,8.1
c0,0,0.1,0,0.1,0c0.2,0.2,0.5,0.3,0.8,0.4c0.4,0.6,0.9,1.1,1.6,1.3c1.9,0.7,4.1,0.1,5.5-1.2c0.9-0.6,1.6-1.4,2-2.4
c1-0.9,1.6-2.2,1.8-3.5C15.1,5.2,14.1,2.7,11.8,1.9L11.8,1.9z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 804 B

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 28 KiB

View File

@ -0,0 +1,221 @@
!(function l(r, a, o) {
function h(e, t) {
if (!a[e]) {
if (!r[e]) {
var s = "function" == typeof require && require;
if (!t && s) return s(e, !0);
if (u) return u(e, !0);
var i = new Error("Cannot find module '" + e + "'");
throw ((i.code = "MODULE_NOT_FOUND"), i);
}
var n = (a[e] = { exports: {} });
r[e][0].call(
n.exports,
function (t) {
return h(r[e][1][t] || t);
},
n,
n.exports,
l,
r,
a,
o
);
}
return a[e].exports;
}
for (var u = "function" == typeof require && require, t = 0; t < o.length; t++) h(o[t]);
return h;
})(
{
1: [
function (t, e, s) {
"use strict";
var i = (function () {
function i(t, e) {
for (var s = 0; s < e.length; s++) {
var i = e[s];
(i.enumerable = i.enumerable || !1), (i.configurable = !0), "value" in i && (i.writable = !0), Object.defineProperty(t, i.key, i);
}
}
return function (t, e, s) {
return e && i(t.prototype, e), s && i(t, s), t;
};
})();
/**
* @name 'Hugo Tags Filter'
* @version 1.2.2
* @license MIT
* @author PointyFar
*/
var n = (function () {
function l(t) {
!(function (t, e) {
if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function");
})(this, l);
(this.FILTERS =
t && t.filters
? t.filters
: [
{ name: "tag", prefix: "tft-", buttonClass: "tft-button", allSelector: "#tfSelectAllTags", attrName: "data-tags" },
{ name: "section", prefix: "tfs-", buttonClass: "tfs-button", allSelector: "#tfSelectAllSections", attrName: "data-section" },
]),
(this.showItemClass = t && t.showItemClass ? t.showItemClass : "tf-show"),
(this.activeButtonClass = t && t.activeButtonClass ? t.activeButtonClass : "active"),
(this.filterItemClass = t && t.filterItemClass ? t.filterItemClass : "tf-filter-item"),
(this.counterSelector = t && t.counterSelector ? t.counterSelector : "selectedItemCount"),
(this.populateCount = !(!t || !t.populateCount) && t.populateCount),
(this.setDisabledButtonClass = !(!t || !t.setDisabledButtonClass) && t.setDisabledButtonClass),
(this.filterItems = document.getElementsByClassName(this.filterItemClass)),
(this.selectedItemCount = 0),
(this.filterValues = {});
for (var e = 0; e < this.FILTERS.length; e++) {
(this.FILTERS[e].buttonTotal = document.getElementsByClassName(this.FILTERS[e].buttonClass).length), (this.FILTERS[e].selected = []), (this.FILTERS[e].values = []);
var s = document.getElementsByClassName(this.FILTERS[e].buttonClass);
this.filterValues[this.FILTERS[e].name] = [];
for (var i = 0; i < s.length; i++) {
var n = s[i].id.replace(this.FILTERS[e].prefix, "");
this.filterValues[this.FILTERS[e].name][n] = { count: 0, selected: 0 };
}
}
this.showCheck(this.FILTERS[0].name, !0);
}
return (
i(l, [
{
key: "initFilterCount",
value: function (t, e) {
if (e) for (var s in t) for (var i = 0; i < this.filterItems.length; i++) for (var n = this.getAttrs(s, this.filterItems[i]), l = 0; l < n.length; l++) t[s][n[l]].count++, t[s][n[l]].selected++;
else {
var r = document.getElementsByClassName(this.showItemClass);
for (var s in t) for (var a in t[s]) t[s][a].selected = 0;
for (l = 0; l < r.length; l++)
for (s in t) {
n = this.getAttrs(s, r[l]);
for (var o = 0; o < n.length; o++) t[s][n[o]].selected++;
}
}
return t;
},
},
{
key: "populateCounters",
value: function (t) {
if (this.populateCount)
for (var e = 0; e < this.FILTERS.length; e++) {
var s = this.FILTERS[e].name,
i = this.FILTERS[e].countPrefix,
n = this.FILTERS[e].selectedPrefix;
if (i || n)
for (var l in t[s]) {
if (i) document.getElementById("" + i + l).textContent = t[s][l].count;
if (n) {
var r = document.getElementById("" + n + l);
(r.textContent = t[s][l].selected),
this.setDisabledButtonClass &&
(0 == r.textContent
? this.addClassIfMissing(document.getElementById(this.FILTERS[e].prefix + l), this.setDisabledButtonClass)
: this.delClassIfPresent(document.getElementById(this.FILTERS[e].prefix + l), this.setDisabledButtonClass));
}
}
}
},
},
{
key: "getAttrs",
value: function (t, e) {
return e
.getAttribute("data-" + t)
.split(" ")
.filter(function (t) {
return 0 < t.length;
});
},
},
{
key: "showAll",
value: function (t) {
for (var e = 0; e < this.FILTERS.length; e++) t ? this.FILTERS[e].name === t && (this.FILTERS[e].selected = []) : (this.FILTERS[e].selected = []);
this.showCheck(t);
},
},
{
key: "checkFilter",
value: function (t, e) {
for (var s = document.querySelector("#" + e + t), i = 0; i < this.FILTERS.length; i++)
this.FILTERS[i].prefix === e &&
(0 <= this.FILTERS[i].selected.indexOf(t)
? (this.FILTERS[i].selected.splice(t, 1), this.delClassIfPresent(s, this.activeButtonClass))
: (this.FILTERS[i].selected.push(t), this.addClassIfMissing(s, this.activeButtonClass)),
this.delClassIfPresent(document.querySelector(this.FILTERS[i].allSelector), this.activeButtonClass),
this.showCheck(this.FILTERS[i].name));
},
},
{
key: "showCheck",
value: function (t, e) {
for (var s = 0; s < this.FILTERS.length; s++)
if (this.FILTERS[s].name === t && (0 === this.FILTERS[s].selected.length || this.FILTERS[s].selected.length === this.FILTERS[s].buttonTotal)) {
for (var i = document.getElementsByClassName(this.FILTERS[s].buttonClass), n = 0; n < i.length; n++) this.delClassIfPresent(i[n], this.activeButtonClass);
this.addClassIfMissing(document.querySelector(this.FILTERS[s].allSelector), this.activeButtonClass);
}
for (s = this.selectedItemCount = 0; s < this.filterItems.length; s++) {
this.delClassIfPresent(this.filterItems[s], this.showItemClass);
var l = 0;
for (n = 0; n < this.FILTERS.length; n++) this.checkVisibility(this.FILTERS[n].selected, this.filterItems[s].getAttribute(this.FILTERS[n].attrName)) && l++;
l === this.FILTERS.length && (this.filterItems[s].classList.contains(this.showItemClass) || (this.selectedItemCount++, this.addClassIfMissing(this.filterItems[s], this.showItemClass)));
}
document.getElementById(this.counterSelector) && (document.getElementById(this.counterSelector).textContent = "" + this.selectedItemCount), this.checkButtonCounts(e);
},
},
{
key: "checkButtonCounts",
value: function (t) {
(this.filterValues = this.initFilterCount(this.filterValues, t)), this.populateCounters(this.filterValues);
},
},
{
key: "checkVisibility",
value: function (t, e) {
if (0 < t.length) {
for (var s = 0; s < t.length; s++) {
if (
0 <=
e
.split(" ")
.filter(function (t) {
return 0 < t.length;
})
.indexOf(t[s])
)
return !0;
}
return !1;
}
return !0;
},
},
{
key: "addClassIfMissing",
value: function (t, e) {
t.classList.contains(e) || t.classList.add(e);
},
},
{
key: "delClassIfPresent",
value: function (t, e) {
t.classList.contains(e) && t.classList.remove(e);
},
},
]),
l
);
})();
window.HugoTagsFilter = n;
},
{},
],
},
{},
[1]
);