diff --git a/config.toml b/config.toml index 826c181..44eadc6 100644 --- a/config.toml +++ b/config.toml @@ -3,6 +3,8 @@ languageCode = "en-gb" title = "lumbung.space" theme = "lumbung-theme" pluralizeListTitles = "false" +paginate = 20 + [params] logo = "/img/logo.svg" @@ -10,6 +12,9 @@ pluralizeListTitles = "false" description = 'a digital living room for the lumbung ekosistem' images = ['/img/logo.png'] title = 'lumbung dot space' + bundleCss = "/bundle.css" + bundleJs = "/bundle.js" + mainSections = ['social', 'shouts', 'calendar', 'tv', 'pen'] [markup.goldmark.renderer] unsafe = true @@ -22,3 +27,5 @@ unsafe = true [permalinks] timelines = "/timeline/:slug/" + + diff --git a/themes/lumbung-theme/layouts/partials/header.html b/themes/lumbung-theme/layouts/partials/header.html index 41f0da3..24a721d 100644 --- a/themes/lumbung-theme/layouts/partials/header.html +++ b/themes/lumbung-theme/layouts/partials/header.html @@ -1,24 +1,15 @@
-
- - login +
+ + + +
- - - - - +
+
- - + {{- partial "filter-nav.html" . -}} + +
+
+
+
+
+ +
diff --git a/themes/lumbung-theme/static/css/main.css b/themes/lumbung-theme/static/css/main.css index 7c517d9..c2a807e 100644 --- a/themes/lumbung-theme/static/css/main.css +++ b/themes/lumbung-theme/static/css/main.css @@ -73,9 +73,14 @@ body > iframe { box-sizing: border-box; } +a { + color: #000; +} + .container { margin: 2em auto; max-width: 80%; + width: 100%; margin-bottom: 0; } @@ -159,37 +164,128 @@ body > iframe { /* base header & menu */ -#top-menu { - padding: 1.5rem 1rem 0; - display: grid; - grid-template-columns: 300px 1fr auto; - align-items: flex-start; +.header-row { + margin: 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; } .home-link { - text-decoration: none; + display: block; + max-width: 700px; + width: 70%; + padding: 0; } .logo { - width: 283px; - margin-top: 2rem; + display: block; + 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; color: #333; } -#top-menu a:hover, -#top-menu a:focus { +.menu a:hover, +.menu a:focus { color: black; } -#top-menu #login { - font-weight: bold; - margin-top: 8px; -} - #top-menu div { display: flex; } @@ -199,7 +295,7 @@ body > iframe { display: none; } -#top-menu input { +.menu input { border: none; border-bottom: 1px solid #333; margin-right: 2rem; @@ -207,8 +303,8 @@ body > iframe { margin-left: 5px; } -#top-menu input:focus, -#top-menu input:hover { +.menu input:focus, +.menu input:hover { outline: none; border-bottom: 1px solid #333; } @@ -222,27 +318,8 @@ body > iframe { 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 */ -#top-menu ul.submenu { +.menu ul.submenu { flex-direction: column; margin-left: 0; position: absolute; @@ -257,6 +334,7 @@ body > iframe { .menu .submenu li { margin: 2px 0; + padding: 0; } .menu .has-submenu { @@ -272,49 +350,41 @@ body > iframe { visibility: visible; } -#top-menu .menu ul.submenu { - margin-left: 11px; - margin-top: 10px; - border: 1px solid ; +.menu ul.submenu { + margin-left: -0.5em; + margin-top: 8px; + border: 2px solid ; gap: 0.25em; padding: 0.5em; } -#top-menu a { +.menu a { padding: 0 5px; } -#top-menu .menu .submenu a { +.menu .menu .submenu a { margin: 0; display: flex; } -#top-menu .drawer .submenu { +.menu .drawer .submenu { position: initial; display: none; } -#top-menu .drawer .submenu.opened { +.menu .drawer .submenu.opened { display: flex; } -#top-menu .drawer .submenu li { +.menu .drawer .submenu li { padding: 0; padding-top: 1em; } -#top-menu .drawer .opened .submenu { +.menu .drawer .opened .submenu { visibility: visible; } -.drawer .has-submenu { - padding-left: 1em; - margin-left: 5px; - color: #333; - display: flex; - flex-direction: column; -} - /*Article Summary Cards*/ @@ -495,16 +565,15 @@ div.network-source { right: 1em; } -.network-source::before { - content: ""; +.network-source .triangle { position: absolute; - right: -20px; + right: 0px; bottom: 0; - width: 0; - height: 0; - border-left: 20px solid var(--shouts-dark); - border-top: 23px solid transparent; - border-bottom: 23px solid transparent; + width: auto; + height: calc(100% + 0.5px); + top: -0.5px; + transform: translateX(calc(100% - 0.5px)); + fill: var(--shouts-dark); } .network-source a { @@ -1011,6 +1080,117 @@ li.page-item:after { 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 */ .welcome-text { text-align: center; @@ -1566,14 +1746,66 @@ a.timeline-url { } /* 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 { display: flex; justify-content: space-between; } - .mobile-menu #login { - display: inline-flex; - margin: 0 0 0 auto; + #top-menu .login-link { + display: none; } .hamburger { diff --git a/themes/lumbung-theme/static/img/black-dot.svg b/themes/lumbung-theme/static/img/black-dot.svg new file mode 100644 index 0000000..1cae633 --- /dev/null +++ b/themes/lumbung-theme/static/img/black-dot.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/themes/lumbung-theme/static/img/logo.svg b/themes/lumbung-theme/static/img/logo.svg index 9409ee3..c60c548 100644 --- a/themes/lumbung-theme/static/img/logo.svg +++ b/themes/lumbung-theme/static/img/logo.svg @@ -1,21 +1,17 @@ - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/themes/lumbung-theme/static/js/hugotagsfilter-1.2.2.min.js b/themes/lumbung-theme/static/js/hugotagsfilter-1.2.2.min.js new file mode 100644 index 0000000..e89770b --- /dev/null +++ b/themes/lumbung-theme/static/js/hugotagsfilter-1.2.2.min.js @@ -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] +);