2 Коміти

Автор SHA1 Повідомлення Дата
rra
475a614959 change header & major rework of taxonomies as part of frontpage redesign 2022-09-15 18:39:33 +02:00
rra
a226b45bc0 new header & menu layout by Cristoph 2022-09-15 08:34:52 +02:00
17 змінених файлів з 1187 додано та 323 видалено

@ -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,15 +12,21 @@ 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
[taxonomies] [taxonomies]
author = "authors" author = "authors"
contributor = "contributors"
tag = "tags" tag = "tags"
category = "categories" source = "sources"
timeline = "timelines" timeline = "timelines"
[permalinks] [permalinks]
timelines = "/timeline/:slug/" timelines = "/timeline/:slug/"

@ -41,16 +41,6 @@
}) })
}) })
// add classes for styling lumbung kios and lumbung gallery cards
let cards = document.querySelectorAll('.shout.card');
[...cards].forEach(card => {
if (card.querySelector('a[href="/tags/lumbungkios"]') || card.querySelector('a[href="/tags/lumbungkiosproducts"]')) {
card.classList.add('lumbung-kios')
} else if (card.querySelector('a[href="/tags/lumbunggallery"]')) {
card.classList.add('lumbung-gallery')
}
})
// footer random color // footer random color
var color = ['orange','green','blue']; var color = ['orange','green','blue'];
var footer = document.getElementById("footer"); var footer = document.getElementById("footer");

@ -4,40 +4,32 @@
<div class="h-feed"> <div class="h-feed">
{{ range where (.Paginator 13).Pages "Params.hidden" "ne" "true" }} {{ range where (.Paginator 13).Pages "Params.hidden" "ne" "true" }}
{{ if in .Params.categories "tv"}} {{if eq .Section "tv"}}
{{- partial "video_box.html" . -}} {{- partial "video_box.html" . -}}
{{ else if in .Params.categories "calendar" }} {{ else if eq .Section "events" }}
{{- partial "partials/calendar_card.html" . -}}
{{- partial "calendar_card.html" . -}}
{{ else if in .Params.categories "network" }}
{{- partial "network_card.html" . -}}
{{ else if in .Params.categories "shouts" }}
{{- partial "shout_card.html" . -}}
{{ else if in .Params.categories "pen" }}
{{ else if eq .Section "shouts" }}
{{ if in .Params.sources "pen.lumbung.space" }}
{{- partial "pen_card.html" . -}} {{- partial "pen_card.html" . -}}
{{ else }}
{{- partial "shout_card.html" . -}}
{{ end }}
{{ else if in .Params.categories "book" }} {{ else if eq .Section "social" }}
{{- partial "social_card.html" . -}}
{{- partial "book.html" . -}} {{ else if eq .Section "publications"}}
{{- partial "book_card.html" . -}}
{{ else if in .Params.categories "page" }} {{ else if eq .Section "sounds"}}
{{- partial "sounds_card.html" . -}}
{{- partial "blank.html" . -}}
{{ else }} {{ else }}
{{- partial "card.html" . -}} {{- partial "card.html" . -}}
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> </div>

@ -6,21 +6,33 @@
<span class="date-marker">{{ .Key }}</span> <span class="date-marker">{{ .Key }}</span>
{{ range .Pages }} {{ range .Pages }}
{{ if in .Params.categories "tv"}}
{{if eq .Section "tv"}}
{{- partial "video_box.html" . -}} {{- partial "video_box.html" . -}}
{{ else if in .Params.categories "calendar" }}
{{- partial "calendar_card.html" . -}} {{ else if eq .Section "events" }}
{{ else if in .Params.categories "network" }} {{- partial "partials/calendar_card.html" . -}}
{{- partial "network_card.html" . -}}
{{ else if in .Params.categories "pen" }} {{ else if eq .Section "shouts" }}
{{ if in .Params.sources "pen.lumbung.space" }}
{{- partial "pen_card.html" . -}} {{- partial "pen_card.html" . -}}
{{ else if in .Params.categories "shouts" }} {{ else }}
{{- partial "shout_card.html" . -}} {{- partial "shout_card.html" . -}}
{{ else if in .Params.categories "books.lumbung.space"}} {{ end }}
{{ else if eq .Section "social" }}
{{- partial "social_card.html" . -}}
{{ else if eq .Section "publications"}}
{{- partial "book_card.html" . -}} {{- partial "book_card.html" . -}}
{{ else if eq .Section "sounds"}}
{{- partial "sounds_card.html" . -}}
{{ else }} {{ else }}
{{- partial "card.html" . -}} {{- partial "card.html" . -}}
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> </div>

@ -0,0 +1,262 @@
<!DOCTYPE html>
<html{{ with .Site.LanguageCode }} lang="{{ . }}"{{ end }}>
<head>
<link rel="stylesheet" href="{{ "css/chroma.css" | relURL }}" />
<link rel="stylesheet" href="{{ "vendor/bare/css/bare.min.css" | relURL }}" />
<style>
/*** Important ***/
.tf-filter-item {
display: none;
}
button.active {
background-color: #ddd;
}
button.disable-button {
border-style: dashed;
}
.show-item {
display: inline-block;
}
/*** Aesthetics ***/
section {
margin-top: 18px !important;
}
.tf-items-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.tf-item {
width: 250px;
margin: 8px;
background: #fff;
padding: 2rem;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
border-radius: 2px;
margin-bottom: 2rem
}
.chroma {
overflow-x: auto;
padding: 4px;
}
.panel {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.acc:after {
content: '\02795';
color: #fff;
margin-left: 5px;
}
.acc.active:after {
content: "\2796";
}
.navbtn {
padding: 0.5rem!important;
font-size: 90%!important;
}
.nava {
text-transform: none;
font-size: 90%!important;
}
</style>
</head>
<section>
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
{{ $sections := .Site.Params.mainSections }}
{{ $.Scratch.Set "authors" (slice ) }}
{{ $.Scratch.Set "noAuthors" 0 }}
{{ range where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
{{ with .Params.authors }}
{{ if eq ( printf "%T" . ) "[]string" }}
{{ if ( not ( in ($.Scratch.Get "authors") . ) ) }}
{{ $.Scratch.Add "authors" . }}
{{ end }}
{{ else if ( printf "%T" . ) "[]string" }}
{{ range . }}
{{ if ( not ( in ($.Scratch.Get "authors") . ) ) }}
{{ $.Scratch.Add "authors" . }}
{{ end }}
{{ end }}
{{ end }}
{{ else }}
{{ $.Scratch.Add "noAuthors" 1 }}
{{ end }}
{{ end }}
{{ $tags := $.Site.Taxonomies.tags.ByCount }}
{{ $.Scratch.Set "untagged" 0 }}
{{ range $pages }}
{{ with .Params.tags }}{{ else }}{{ $.Scratch.Add "untagged" 1 }}{{ end }}
{{ end }}
<div class="tf-wrapper">
<div class="tf-buttons-container flex-grow">
<h4>Sections</h4>
<button xx id="selectAllSections" onclick="htf.showAll('section')">
All Sections
</button>
{{ range $sections }}
<button xx class="sect-button" id="sect-{{ . | urlize }}" onclick="htf.checkFilter('{{ . | urlize }}', 'sect-')">
{{ . | title }} <span id="ssect-{{ . | urlize }}"> -count-</span> | <span id="csect-{{ . | urlize }}"> -count-</span>
</button>
{{ end }}
<h4>Authors</h4>
<button xx id="selectAllAuthors" onclick="htf.showAll('authors')">
All Authors
</button>
{{ range $.Scratch.Get "authors" }}
<button xx class="auth-button" id="auth-{{ . | replaceRE "[.]" "_" | urlize }}" onclick="htf.checkFilter('{{ . | replaceRE "[.]" "_" | urlize }}', 'auth-')">
{{ . }} <span id="sauth-{{ . | replaceRE "[.]" "_" | urlize }}"> -count-</span> | <span id="cauth-{{ . | replaceRE "[.]" "_" | urlize }}"> -count-</span>
</button>
{{ end }}
{{ if gt ( $.Scratch.Get "noAuthors") 0 }}
<button xx class="auth-button" id="auth-no-author" onclick="htf.checkFilter('no-author', 'auth-')">
No Author <span id="sauth-no-author"> -count-</span> | <span id="cauth-no-author"> -count-</span>
</button>
{{ end }}
<h4>Tags</h4>
<button xx class="" id="selectAllTags" onclick="htf.showAll('tags')">
All Tags
</button>
{{ range $tags }}
{{ if .Term }}
<button xx class="tag-button" id="tag-{{ .Term | replaceRE "[.]" "_" | urlize }}" onclick="htf.checkFilter('{{ .Term | replaceRE "[.]" "_" | urlize }}', 'tag-')">
<span>{{.Term | humanize | title }}</span>
<span id="stags-{{ .Term | urlize }}"> -count-</span> | <span id="ctags-{{ .Term | urlize }}"> -count-</span>
</button>
{{ end }}
{{ end }}
{{ if gt ( $.Scratch.Get "untagged") 0 }}
<button xx class="tag-button" id="tag-tfuntagged" onclick="htf.checkFilter('tfuntagged', 'tag-')">
Untagged <span id="stags-tfuntagged"> -count-</span> | <span id="ctags-tfuntagged"> -count-</span>
</button>
{{ end }}
<hr >
</div>
<hr >
<div><h2><span id="selectedItemCount"></span> Items</h2></div>
<div class="tf-items-container">
{{ range $pages.ByPublishDate.Reverse }}
{{ if in .Params.categories "tv"}}
{{- partial "video_box.html" . -}}
{{ else if in .Params.categories "calendar" }}
{{- partial "calendar_card.html" . -}}
{{ else if in .Params.categories "network" }}
{{- partial "network_card.html" . -}}
{{ else if in .Params.categories "pen" }}
{{- partial "pen_card.html" . -}}
{{ else if in .Params.categories "shouts" }}
{{- partial "shout_card.html" . -}}
{{ else if in .Params.categories "books.lumbung.space"}}
{{- partial "book_card.html" . -}}
{{ else }}
{{- partial "card.html" . -}}
{{ end }}
{{ end }}
</div>
</div>
<script src="{{ "vendor/htf/hugotagsfilter-1.2.2.min.js" | relURL}}"></script>
<!--<script src="{{ "hugotagsfilter.js" | relURL}}"></script>-->
<script>
var htfConfig = {
filters: [
{
name: 'tags',
prefix: 'tag-',
buttonClass: 'tag-button',
allSelector: '#selectAllTags',
attrName: 'data-tags',
selectedPrefix: 'stags-',
countPrefix: 'ctags-'
},
{
name: 'section',
prefix: 'sect-',
buttonClass: 'sect-button',
allSelector: '#selectAllSections',
attrName: 'data-section',
selectedPrefix: 'ssect-',
countPrefix: 'csect-'
},
{
name: 'authors',
prefix: 'auth-',
buttonClass: 'auth-button',
allSelector: '#selectAllAuthors',
attrName: 'data-authors',
selectedPrefix: 'sauth-',
countPrefix: 'cauth-'
}
],
showItemClass: "show-item",
filterItemClass: "filter-item",
activeButtonClass: "active",
counterSelector: "selectedItemCount",
populateCount: true,
setDisabledButtonClass: "disable-button"
}
var htf = new HugoTagsFilter(htfConfig);
</script>
<script>
function toggleAcc(el) {
el.classList.toggle("active")
var panel = el.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
</script>
</section>
</body>
</html>

@ -0,0 +1,39 @@
<div class='book card'>
<article class="h-entry book">
<div class="tape-label book"><span><time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time></span><div></div></div>
{{ $postPermalink := .Permalink}}
</header>
{{ with (index (.Resources.ByType "image") 0) }}
{{ $height := add .Height 0.0}}
{{ $ratio := div $height .Width}}
{{ $thumb := .Fit "540x540 q80 webp"}}
<div class="p-summary{{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
<div class="summary-image {{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
<a href="{{ $postPermalink }}"><img src="{{ $thumb.Permalink }}" alt="{{ .Title }}"> </a>
</div>
{{ else }}
<div class="p-summary">
{{ end }}
<header>
<h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">
{{.Title}}</a></h2>
</header>
<div class="summary-text">
{{ .Summary }}
</div>
</div>
<div class="shout-source"></div>
<footer class='post-footer'>
<div class='footer-metadata'>
<span class="from p-author">{{ if .Params.authors }}By {{range .Params.authors}}<b> <a href='{{ "/authors/" | relLangURL }}{{ . | urlize }}/'> {{ . }}</a> {{end}}</b> on{{ end }}</span>
{{ if .Truncated }}
<div class="footer-filler"></div>
<div class='read-more'><a href="{{ .RelPermalink }}">Read More…</a></div>
{{ end }}
</footer>
</article>
</div>

@ -0,0 +1,121 @@
<div class="filter-link"><svg class="filter-icon" enable-background="new 0 0 510.2 512" version="1.1" viewBox="0 0 510.2 512" xmlns="http://www.w3.org/2000/svg"><path d="m499.1 0c2.8 2.2 6.2 4 8.3 6.8 4.4 5.8 3.5 12.6-1.9 19.2-15.7 19.4-31.5 38.8-47.3 58.2-41.2 50.8-82.5 101.6-123.8 152.4-2 2.4-3.9 3.4-7.1 3.4-48.2-0.1-96.3-0.1-144.5 0-3.2 0-5.1-1-7.1-3.4-56.4-69.6-112.9-139.1-169.4-208.7-9.7-11.9-8.3-20.3 4.8-27.9h488z"/><path d="m206.1 512c-8.7-4-11.2-10.8-11.1-20.2 0.3-71.8 0.1-143.6 0.1-215.4v-6.2h120v5.5c0 57.6-0.1 115.3 0.1 172.9 0 8.7-3.3 14.4-11.1 18.2-29.9 14.6-59.6 29.6-89.4 44.4-0.3 0.1-0.4 0.5-0.6 0.7-2.7 0.1-5.3 0.1-8 0.1z"/></svg><span>Filter</span></div>
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
{{ $sections := .Site.Params.mainSections }}
{{ $.Scratch.Set "authors" (slice ) }}
{{ $.Scratch.Set "noAuthors" 0 }}
{{ range where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
{{ with .Params.authors }}
{{ if eq ( printf "%T" . ) "[]string" }}
{{ if ( not ( in ($.Scratch.Get "authors") . ) ) }}
{{ $.Scratch.Add "authors" . }}
{{ end }}
{{ else if ( printf "%T" . ) "[]string" }}
{{ range . }}
{{ if ( not ( in ($.Scratch.Get "authors") . ) ) }}
{{ $.Scratch.Add "authors" . }}
{{ end }}
{{ end }}
{{ end }}
{{ else }}
{{ $.Scratch.Add "noAuthors" 1 }}
{{ end }}
{{ end }}
{{ $.Scratch.Set "cats" (slice ) }}
{{ $.Scratch.Set "nocat" 0 }}
{{ range where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
{{ with .Params.categories }}
{{ if eq ( printf "%T" . ) "[]string" }}
{{ if ( not ( in ($.Scratch.Get "cats") . ) ) }}
{{ $.Scratch.Add "cats" . }}
{{ end }}
{{ end }}
{{ else }}
{{ $.Scratch.Add "nocat" 1 }}
{{ end }}
{{ end }}
{{ $tags := $.Site.Taxonomies.tags.ByCount }}
{{ $.Scratch.Set "untagged" 0 }}
{{ range $pages }}
{{ with .Params.tags }}{{ else }}{{ $.Scratch.Add "untagged" 1 }}{{ end }}
{{ end }}
<div class="filter-buttons-container">
<div class="filter-buttons-container-header">
<div><span id="selectedItemCount"></span> Items</div>
<a href="" class="load-all">Load all Items</a>
</div>
<div class="filter-buttons">
<button xx id="selectAllSections" onclick="htf.showAll('section')">
All Sections
</button>
{{ range $sections }}
<button xx class="sect-button filter-button" id="sect-{{ . | urlize }}" onclick="htf.checkFilter('{{ . | urlize }}', 'sect-')">
{{ . | title }} <span id="ssect-{{ . | urlize }}"> -count-</span> | <span id="csect-{{ . | urlize }}"> -count-</span>
</button>
{{ end }}
</div>
<div class="filter-buttons">
<button xx id="selectAllAuthors" onclick="htf.showAll('authors')">
All Authors
</button>
{{ range .Site.Taxonomies.authors }}
<button xx class="auth-button filter-button" id="auth-{{ .Page.Title | replaceRE "[.]" "_" | urlize }}" onclick="htf.checkFilter('{{ .Page.Title | replaceRE "[.]" "_" | urlize }}', 'auth-')">
{{ .Page.Title }} <span id="sauth-{{ .Page.Title | replaceRE "[.]" "_" | urlize }}"> -count-</span> | <span id="cauth-{{ .Page.Title | replaceRE "[.]" "_" | urlize }}"> -count-</span>
</button>
{{ end }}
{{ if gt ( $.Scratch.Get "noAuthors") 0 }}
<button xx class="auth-button" id="auth-no-author" onclick="htf.checkFilter('no-author', 'auth-')">
No Author <span id="sauth-no-author"> -count-</span> | <span id="cauth-no-author"> -count-</span>
</button>
{{ end }}
</div>
<div class="filter-buttons">
<button xx id="selectAllCats" onclick="htf.showAll('cats')">
All Categories
</button>
{{ range .Site.Taxonomies.categories }}
<button xx class="cat-button filter-button" id="cat-{{ .Page.Title | replaceRE "[.]" "_" | urlize }}" onclick="htf.checkFilter('{{ .Page.Title | replaceRE "[.]" "_" | urlize }}', 'cat-')">
{{ .Page.Title }} <span id="scat-{{ .Page.Title | replaceRE "[.]" "_" | urlize }}"> -count-</span> | <span id="ccat-{{ .Page.Title | replaceRE "[.]" "_" | urlize }}"> -count-</span>
</button>
{{ end }}
{{ if gt ( $.Scratch.Get "nocat") 0 }}
<button xx class="cat-button" id="cat-no-cat" onclick="htf.checkFilter('no-cat', 'cat-')">
No Categories <span id="scat-no-cat"> -count-</span> | <span id="ccat-no-cat"> -count-</span>
</button>
{{ end }}
</div>
<div class="filter-buttons">
<button xx class="" id="selectAllTags" onclick="htf.showAll('tags')">
All Tags
</button>
{{ range $tags }}
{{ if .Term }}
<button xx class="tag-button filter-button" id="tag-{{ .Term | replaceRE "[.]" "_" | urlize }}" onclick="htf.checkFilter('{{ .Term | replaceRE "[.]" "_" | urlize }}', 'tag-')">
<span>{{.Term | humanize | title }}</span>
<span id="stags-{{ .Term | urlize }}"> -count-</span> | <span id="ctags-{{ .Term | urlize }}"> -count-</span>
</button>
{{ end }}
{{ end }}
{{ if gt ( $.Scratch.Get "untagged") 0 }}
<button xx class="tag-button" id="tag-tfuntagged" onclick="htf.checkFilter('tfuntagged', 'tag-')">
Untagged <span id="stags-tfuntagged"> -count-</span> | <span id="ctags-tfuntagged"> -count-</span>
</button>
{{ end }}
</div>
</div>

@ -1,36 +1,26 @@
<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>
</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
<ul class="submenu"> <ul class="submenu">
<li><a href="/about/">about us</a></li> <li><a href="/about/">about us</a></li>
<li><a href="/contributors/">contributors</a></li> <li><a href="/ls-contributors/">contributors</a></li>
</ul> </ul>
</li> </li>
<li><a href="/calendar/">calendar</a></li> <li><a href="/events/">calendar</a></li>
<li><a href="/tv/">tv</a></li> <li><a href="/tv/">tv</a></li>
<li><a href="/social/">social</a></li> <li><a href="/social/">social</a></li>
<li><a href="/pen/">pen</a></li> <li><a href="/sources/pen.lumbung.space/">pen</a></li>
<li><a href="/shouts/">shouts</a></li> <li><a href="/shouts/">shouts</a></li>
<li class="has-submenu">ekonomi <li class="has-submenu">ekonomi
<ul class="submenu"> <ul class="submenu">
@ -38,32 +28,15 @@
<li><a href="/tags/lumbunggallery/">gallery</a></li> <li><a href="/tags/lumbunggallery/">gallery</a></li>
</ul> </ul>
</li> </li>
<li><a href="https://books.lumbung.space">books</a></li> <li><a href="https://members.lumbung.space" class="login-link">Login</a></li>
</ul> </ul>
</nav> </nav>
<aside class="drawer"> <div class="mobile-menu-button">
<ul> <div class="mobile-menu-button--line"></div>
<li><a href="/">home</a></li> <div class="mobile-menu-button--line"></div>
<li><a href="/timeline/">harvest</a></li> <div class="mobile-menu-button--line"></div>
<li class="has-submenu">about </div>
<ul class="submenu">
<li><a href="/about/">about us</a></li> </div>
<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> </header>

@ -1,47 +0,0 @@
<div class='network card {{ .Params.feed_name }}'>
<article class="h-entry network">
<header>
{{ $postPermalink := .Permalink}}
<time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
<h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
</header>
<div class="network-source"><span class="from p-author">From {{ if .Params.authors }}<b>{{range .Params.authors}} <a href='{{ "/authors/" | relLangURL }}{{ . | urlize }}/'> {{ . }}</a> {{end}}</b> at {{ end }}<a href="{{ "/categories/" | relLangURL }}{{ .Params.feed_name | urlize }}">{{ .Params.feed_name }}</a></span></div>
{{ if .Params.featured_image }}
{{ $img := .Resources.GetMatch .Params.featured_image }}
{{ $height := add $img.Height 0.0}}
{{ $ratio := div $height $img.Width}}
{{ $thumb := $img.Fit "540x540 q80 webp"}}
<div class="p-summary{{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
<div class="summary-image {{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
<a href="{{ $postPermalink }}"><img src="{{ $thumb.Permalink }}" alt="{{ .Title }}"> </a>
</div>
{{ else if (.Resources.ByType "image") }}
{{ with (index (.Resources.ByType "image") 0) }}
{{ $img := . }}
{{ $height := add .Height 0.0}}
{{ $ratio := div $height .Width}}
{{ $thumb := .Fit "540x540 q80 webp"}}
<div class="p-summary{{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
<div class="summary-image {{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
<a href="{{ $postPermalink }}"><img src="{{ $thumb.Permalink }}" alt="{{ .Title }}"> </a>
</div>
{{ end }}
{{ else }}
<div class="p-summary">
{{ end }}
<div class="summary-text">
{{ .Summary }}
</div>
</div>
<footer class='post-footer'>
<a href="{{ .RelPermalink }}">
<svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2172 3.892C9.86979 3.02585 9.33722 2.34509 8.61023 1.77874C8.23826 1.49028 7.72957 1.04191 7.21547 0.839212C7.21382 0.703503 7.14487 0.575079 6.97767 0.503871C5.42624 -0.162284 3.69503 0.311299 2.52647 1.51482C1.94635 2.11223 1.51951 2.8478 1.21108 3.62501C0.914861 4.3676 0.507572 5.32483 0.948415 6.07996C1.00646 6.17836 1.09356 6.24193 1.1908 6.27306C1.2735 7.35573 1.57765 8.46801 2.37847 9.21874C3.2325 10.0162 4.43613 10.3053 5.5673 10.1773C6.72371 10.0468 7.96432 9.57061 8.8816 8.82474C9.01086 8.71974 9.1274 8.60844 9.23337 8.49296C9.27968 8.4924 9.32805 8.4875 9.37839 8.4718C11.3643 7.82491 10.8101 5.37347 10.2172 3.892Z" />
</svg>
</a>
</footer>
</article>
</div>

@ -1,7 +1,7 @@
<div class='pen card {{ .Params.feed_name }}'> <div class='pen card {{ .Params.feed_name }}'>
<article class="h-entry pen"> <article class="h-entry pen">
<header> <header>
<div class="pen-source"><span class="from p-author">From {{ if .Params.author }}<b>{{.Params.author}}</b> at {{ end }}<a href="{{ "/categories/" | relLangURL }}{{ .Params.feed_name | urlize }}">{{ .Params.feed_name }}</a></span></div> <div class="pen-source"><span class="from p-author">From {{ if .Params.contributors }}<b>{{range .Params.contributors}} <a href='{{ "/contributors/" | relLangURL }}{{ . | urlize }}/'> {{ . }}</a> {{end}}</b> at {{ end }}<a href="{{ "/sources/" | relLangURL }}{{ .Params.feed_name | urlize }}">{{ .Params.feed_name }}</a></span></div>
{{ $postPermalink := .Permalink}} {{ $postPermalink := .Permalink}}
<time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time> <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>

@ -2,22 +2,25 @@
<article class="h-entry shout"> <article class="h-entry shout">
<header> <header>
{{ $postPermalink := .Permalink}} {{ $postPermalink := .Permalink}}
<h2 class="p-name"><a href="{{ .Permalink }}" class="u-url"> <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
{{ range $i, $e := .Params.tags -}} <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
{{- if $i -}} {{ end -}}
<a href='{{ "/tags/" | relLangURL }}{{ . | urlize }}'>#{{ $e | humanize | lower }}</a>
{{- end -}}
</a></h2>
</header> </header>
{{ with (index (.Resources.ByType "video") 0) }} <div class="shout-source"><span class="from p-author">From {{ if .Params.contributors }}<b>{{range .Params.contributors}} <a href='{{ "/contributors/" | relLangURL }}{{ . | urlize }}/'> {{ . }}</a> {{end}}</b> at {{ end }}<a href="{{ "/sources/" | relLangURL }}{{ .Params.feed_name | urlize }}">{{ .Params.feed_name }}</a></span></div>
{{/* TODO this current logic does not suport video & image mixed */}}
<div class="p-summary"> {{ if .Params.featured_image }}
<video controls width="540px" preload="none" poster="{{ $postPermalink }}/thumbnail.png"> {{ with $img := .Resources.GetMatch .Params.featured_image }}
<source src="{{.Permalink}}" type="video/mp4"> {{ $height := add $img.Height 0.0}}
</video> {{ $ratio := div $height $img.Width}}
{{ else}} {{ $thumb := $img.Fit "540x540 q80 webp"}}
<div class="p-summary{{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
<div class="summary-image {{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
<a href="{{ $postPermalink }}"><img src="{{ $thumb.Permalink }}" alt="{{ .Title }}"> </a>
</div>
{{end}}
{{ else if (.Resources.ByType "image") }}
{{ with (index (.Resources.ByType "image") 0) }} {{ with (index (.Resources.ByType "image") 0) }}
{{ $img := . }}
{{ $height := add .Height 0.0}} {{ $height := add .Height 0.0}}
{{ $ratio := div $height .Width}} {{ $ratio := div $height .Width}}
{{ $thumb := .Fit "540x540 q80 webp"}} {{ $thumb := .Fit "540x540 q80 webp"}}
@ -25,25 +28,21 @@
<div class="summary-image {{if gt $ratio 1 }} portrait {{else}} landscape {{end}}"> <div class="summary-image {{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
<a href="{{ $postPermalink }}"><img src="{{ $thumb.Permalink }}" alt="{{ .Title }}"> </a> <a href="{{ $postPermalink }}"><img src="{{ $thumb.Permalink }}" alt="{{ .Title }}"> </a>
</div> </div>
{{ end }}
{{ else }} {{ else }}
<div class="p-summary"> <div class="p-summary">
{{ end }}
{{ end }} {{ end }}
<div class="summary-text"> <div class="summary-text">
{{ .Summary }} {{ .Summary }}
</div> </div>
</div> </div>
<div class="shout-source"></div>
<footer class='post-footer'> <footer class='post-footer'>
<div class='footer-metadata'> <a href="{{ .RelPermalink }}">
<span class="from p-author">{{ if .Params.authors }}From {{range .Params.authors}}<b> <a href='{{ "/authors/" | relLangURL }}{{ . | urlize }}/'> {{ . }}</a> {{end}}</b> on{{ end }}</span> <svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
<time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time> <path d="M10.2172 3.892C9.86979 3.02585 9.33722 2.34509 8.61023 1.77874C8.23826 1.49028 7.72957 1.04191 7.21547 0.839212C7.21382 0.703503 7.14487 0.575079 6.97767 0.503871C5.42624 -0.162284 3.69503 0.311299 2.52647 1.51482C1.94635 2.11223 1.51951 2.8478 1.21108 3.62501C0.914861 4.3676 0.507572 5.32483 0.948415 6.07996C1.00646 6.17836 1.09356 6.24193 1.1908 6.27306C1.2735 7.35573 1.57765 8.46801 2.37847 9.21874C3.2325 10.0162 4.43613 10.3053 5.5673 10.1773C6.72371 10.0468 7.96432 9.57061 8.8816 8.82474C9.01086 8.71974 9.1274 8.60844 9.23337 8.49296C9.27968 8.4924 9.32805 8.4875 9.37839 8.4718C11.3643 7.82491 10.8101 5.37347 10.2172 3.892Z" />
</div> </svg>
{{ if .Truncated }} </a>
<div class="footer-filler"></div>
<div class='read-more'><a href="{{ .RelPermalink }}">Read More…</a></div>
{{ end }}
</footer> </footer>
</article> </article>
</div> </div>

@ -0,0 +1,49 @@
<div class='social card {{ range .Params.tags }}{{ if or (eq . "lumbungkios") (eq . "lumbunggallery")}}{{.}}{{ end }}{{ end }}'>
<article class="h-entry social">
<header>
{{ $postPermalink := .Permalink}}
<h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">
{{ range $i, $e := .Params.tags -}}
{{- if $i -}} {{ end -}}
<a href='{{ "/tags/" | relLangURL }}{{ . | urlize }}'>#{{ $e | humanize | lower }}</a>
{{- end -}}
</a></h2>
</header>
{{ with (index (.Resources.ByType "video") 0) }}
{{/* TODO this current logic does not suport video & image mixed */}}
<div class="p-summary">
<video controls width="540px" preload="none" poster="{{ $postPermalink }}/thumbnail.png">
<source src="{{.Permalink}}" type="video/mp4">
</video>
{{ else}}
{{ with (index (.Resources.ByType "image") 0) }}
{{ $height := add .Height 0.0}}
{{ $ratio := div $height .Width}}
{{ $thumb := .Fit "540x540 q80 webp"}}
<div class="p-summary{{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
<div class="summary-image {{if gt $ratio 1 }} portrait {{else}} landscape {{end}}">
<a href="{{ $postPermalink }}"><img src="{{ $thumb.Permalink }}" alt="{{ .Title }}"> </a>
</div>
{{ else }}
<div class="p-summary">
{{ end }}
{{ end }}
<div class="summary-text">
{{ .Summary }}
</div>
</div>
<div class="social-source"></div>
<footer class='post-footer'>
<div class='footer-metadata'>
<span class="from p-author">{{ if .Params.contributors }}From {{range .Params.contributors}}<b> <a href='{{ "/contributors/" | relLangURL }}{{ . | urlize }}/'> {{ . }}</a> {{end}}</b> on{{ end }}</span>
<time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
</div>
{{ if .Truncated }}
<div class="footer-filler"></div>
<div class='read-more'><a href="{{ .RelPermalink }}">Read More…</a></div>
{{ end }}
</footer>
</article>
</div>

@ -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: 50%;
padding: 0;
margin: auto;
} }
.logo { .logo {
width: 283px; display: block;
margin-top: 2rem; width: 100%;
height: auto;
} }
#top-menu a { .login-link {
background: #009d9b;
padding: 5px 30px;
color: #fff;
font-weight: 900;
}
.menu-row {
margin: 0 auto;
max-width: 80%;
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*/
@ -338,6 +408,7 @@ body > iframe {
.h-entry header h2 a { .h-entry header h2 a {
text-decoration: none; text-decoration: none;
color: var(--border-color); color: var(--border-color);
word-wrap: anywhere;
} }
.h-entry header .header-metadata { .h-entry header .header-metadata {
@ -405,9 +476,9 @@ footer.post-footer {
} }
/* network cards */ /* shout cards */
.card.network { .card.shout {
border: 2px solid var(--shouts-dark); border: 2px solid var(--shouts-dark);
background-color: var(--shouts-light); background-color: var(--shouts-light);
max-width: min-content; max-width: min-content;
@ -419,70 +490,70 @@ footer.post-footer {
} }
.h-entry.network header { .h-entry.shout header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.h-entry.network header h2 { .h-entry.shout header h2 {
padding: 0.2em 0.5em 0.5em 0.5em; padding: 0.2em 0.5em 0.5em 0.5em;
margin: 0; margin: 0;
border: none; border: none;
} }
.h-entry.network header h2:hover { .h-entry.shout header h2:hover {
cursor: pointer; cursor: pointer;
} }
.h-entry.network header h2 a { .h-entry.shout header h2 a {
text-decoration: none; text-decoration: none;
color: var(--shouts-dark); color: var(--shouts-dark);
} }
.h-entry.network header time { .h-entry.shout header time {
text-align: right; text-align: right;
padding: 0.6em 0.8em; padding: 0.6em 0.8em;
font-size: 1rem; font-size: 1rem;
} }
.network .header-metadata { .shout .header-metadata {
align-items: center; align-items: center;
} }
.network .header-metadata .dt-published { .shout .header-metadata .dt-published {
border-bottom: 2px solid var(--shouts-dark); border-bottom: 2px solid var(--shouts-dark);
} }
.network .filler { .shout .filler {
min-height: 1rem; min-height: 1rem;
} }
.network .author.p-author { .shout .author.p-author {
border-color: var(--shouts-dark); border-color: var(--shouts-dark);
padding: 0.5em 1.2em 0.5em 1.2em; padding: 0.5em 1.2em 0.5em 1.2em;
} }
.network .p-summary { .shout .p-summary {
display: flex; display: flex;
} }
.network .p-summary.portrait { .shout .p-summary.portrait {
/* flex-direction: row; */ /* flex-direction: row; */
} }
.network .p-summary.landscape { .shout .p-summary.landscape {
flex-direction: column; flex-direction: column;
} }
.network .summary-image > img { .shout .summary-image > img {
display: inherit; display: inherit;
} }
.network .summary-text { .shout .summary-text {
font-size: 18px; font-size: 18px;
} }
div.network-source { div.shout-source {
padding: 1em; padding: 1em;
padding-right: 2em; padding-right: 2em;
width: fit-content; width: fit-content;
@ -495,29 +566,28 @@ div.network-source {
right: 1em; right: 1em;
} }
.network-source::before { .shout-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 { .shout-source a {
font-weight: bold; font-weight: bold;
color: white; color: white;
} }
.network .footer-filler { .shout .footer-filler {
border-left: 2px solid var(--shouts-dark); border-left: 2px solid var(--shouts-dark);
border-top: none; border-top: none;
} }
.network footer.post-footer { .shout footer.post-footer {
border-top: 2px solid var(--shouts-dark); border-top: 2px solid var(--shouts-dark);
flex-flow: row; flex-flow: row;
font-size: 0.9rem; font-size: 0.9rem;
@ -526,17 +596,17 @@ div.network-source {
padding: 1em; padding: 1em;
} }
.network footer svg { .shout footer svg {
fill: var(--shouts-dark) fill: var(--shouts-dark)
} }
.network .read-more { .shout .read-more {
border: none; border: none;
border-left: 2px solid var(--shouts-dark); border-left: 2px solid var(--shouts-dark);
padding: 0.5em 1.2em 0.5em 1.2em; padding: 0.5em 1.2em 0.5em 1.2em;
} }
.network .footer-metadata { .shout .footer-metadata {
padding: 0.5em 1.2em 0.5em 1.2em; padding: 0.5em 1.2em 0.5em 1.2em;
} }
@ -667,9 +737,9 @@ div.pen-source {
padding: 0.5em 1.2em 0.5em 1.2em; padding: 0.5em 1.2em 0.5em 1.2em;
} }
/* shouts cards */ /* social / hashtag cards */
.card.shout { .card.social {
border-color: steelblue; border-color: steelblue;
border: 2px solid; border: 2px solid;
background-color: aliceblue; background-color: aliceblue;
@ -681,24 +751,24 @@ div.pen-source {
color: steelblue; color: steelblue;
} }
.card.shout h2 a { .card.social h2 a {
color: var(--social-dark); color: var(--social-dark);
cursor: pointer; cursor: pointer;
display: block; display: block;
word-wrap: anywhere; word-wrap: anywhere;
} }
.card .card.shout h2 a:hover { .card .card.social h2 a:hover {
border: none; border: none;
text-decoration: none; text-decoration: none;
} }
.card.shout .post-footer { .card.social .post-footer {
background: var(--social-light); background: var(--social-light);
color: var(--social-dark); color: var(--social-dark);
} }
.card.shout .post-footer a{ .card.social .post-footer a{
background: var(--social-light); background: var(--social-light);
color: var(--social-dark); color: var(--social-dark);
text-decoration: underline; text-decoration: underline;
@ -706,42 +776,42 @@ div.pen-source {
/* gallery cards */ /* gallery cards */
.card.shout.lumbung-gallery { .card.social.lumbunggallery {
border-color: var(--gallery-dark); border-color: var(--gallery-dark);
background-color: var(--gallery-light); background-color: var(--gallery-light);
color: var(--gallery-dark); color: var(--gallery-dark);
} }
.card.shout.lumbung-gallery h2 a { .card.social.lumbunggallery h2 a {
color: var(--gallery-dark); color: var(--gallery-dark);
} }
.card.shout.lumbung-gallery .post-footer { .card.social.lumbunggallery .post-footer {
background: var(--gallery-light); background: var(--gallery-light);
color: var(--gallery-dark); color: var(--gallery-dark);
border-top: 2px solid; border-top: 2px solid;
} }
/* kios cards */ /* kios cards */
.card.shout.lumbung-kios { .card.social.lumbungkios {
border-color: var(--kios-dark); border-color: var(--kios-dark);
background-color: var(--kios-light); background-color: var(--kios-light);
color: var(--kios-dark); color: var(--kios-dark);
} }
.card.shout.lumbung-kios h2 a { .card.social.lumbungkios h2 a {
color: var(--kios-dark); color: var(--kios-dark);
} }
.card.shout.lumbung-kios .post-footer { .card.social.lumbungkios .post-footer {
background: var(--kios-light); background: var(--kios-light);
color: var(--kios-dark); color: var(--kios-dark);
border-top: 2px solid; border-top: 2px solid;
} }
.card.shout.lumbung-kios .post-footer a { .card.social.lumbungkios .post-footer a {
background: none; background: none;
color: var(--kios-dark); color: var(--kios-dark);
} }
@ -1011,6 +1081,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 +1747,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 {
@ -1679,7 +1912,7 @@ a.timeline-url {
/* card styles */ /* card styles */
.card, .card,
.card.network { .card.shout {
max-width: 83vw; max-width: 83vw;
} }

@ -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>

Після

Ширина:  |  Висота:  |  Розмір: 804 B

Різницю між файлами не показано, оскільки один чи декілька рядків занадто довгі

Перед

Ширина:  |  Висота:  |  Розмір: 15 KiB

Після

Ширина:  |  Висота:  |  Розмір: 28 KiB

@ -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]
);