Turn 'authors' in to a taxonomy item

trying to clean the cache

.gitignore

@@ -9,3 +9,5 @@
 /public/
 resources
 /etags/
+.gitignore
+.todo

Dockerfile.hugo

@@ -1,4 +1,4 @@
-FROM klakegg/hugo:alpine
+FROM klakegg/hugo:ext-alpine
 
 RUN apk add --no-cache curl git
 

compose.yml

@@ -21,6 +21,7 @@ services:
       --baseUrl='https://lumbung.space'
       --port='1313'
       --buildFuture
+      --disableFastRender 
       --minify
       --watch
     deploy:

config.toml

@@ -13,3 +13,8 @@ pluralizeListTitles = "false"
 
 [markup.goldmark.renderer]
 unsafe = true
+
+[taxonomies]
+    author = "authors"
+    tag = "tags"
+    category = "categories"

content/about.md

@@ -1,11 +1,73 @@
 ---
-title: "About"
-date: 2022-01-17T11:11:58+01:00
+title: "About lumbung.space"
+date: 2022-04-28T11:11:58+01:00
 hidden: true
 ---
 
-<img id="about-img" src="/img/ade.jpeg" />
+<div style="max-width:65ch">
 
-lumbung.space is an experimental social and publishing platform by and for the lumbung artists and lumbung members. It is a (digital) living room for our collective lumbung building process that allows us to connect, support each other, and also share knowledge collectively. It is built on open platforms, cooperative governance, and as a community infrastructure meant for our practices to develop and thrive. As a project, lumbung.space is an experiment for artist-initiated digital platforms and part of the process towards documenta fifteen. After documenta—the strive is for lumbung.space to be sustained as a shared resources for the lumbung inter-lokal. 
+## lumbung.space = 
+1. a hangout space, digital living room
+2. a publishing tool (for video, music, books, social media)
+3. a library, learning center
+4. pantry (storage) as a shared resource between the lumbung inter-lokal 
+5. takes care of the user's privacy and is aware of their political vulnerability 
+6. slow growing and to be unstable is part of the deal
+7. is an initiative for a community-governed digital platform
 
-lumbung.space is a space for learning: currently, the working group is trying to find out what a social platform for a lumbung practice looks like; as we recognize that we don't want our practices to be subject to, or dependent upon extractive, exploitative digital infrastructures. Making lumbung.space to be a platform that is owned and operated by the community of users themselves: which means us! (and not a service that is run by a corporation). We are working with [Autonomic Co-operative](https://autonomic.zone) who is part of the [Co-op Cloud](https://coopcloud.tech) initiative where our learnings feedback into, allowing other collectives to set up similar infrastructures.
+<img src="/img/alt-lumbung-logo.jpeg" style="margin:auto; width:60%">
+
+## What
+lumbung.space is an online platform by and for the lumbung-interlokal and lumbung artists. Many of the artists and collectives invited for documenta fifteen are located far away from each other, with their own contextual realities and vulnerabilities. To be able to work together over such distances, the act of documenting the process, writing together, and keeping each other informed within the network is one of the most important parts of the process of building the lumbung. This process is known as harvesting. Thus, lumbung.space was made to provide a number of tools and a collective publishing outlet for this diverse network to experiment and share the collective processes through harvests. Like a vibrant archive and a digital living room, it allows connection, support, and sharing of knowledge.
+
+The aim is to have a digital infrastructure for the network that is not extractive and  exploitative. The covid pandemic, and the ensuing digitization of so many aspects of creative practice, offered an extra reason to look into the often-overlooked networked media practices. As diverse, joyful, and often political practices all get mediated through the same corporate tools, lumbung.space, therefore, is an urgent experiment that tries out what an artist-run digital space could be like.  The challenge now is making lumbung.space a platform that is owned and operated by the community of users themselves: which means us! (and not a service that is run by a corporation). A digital space that is built, owned, and maintained by the lumbung network around slow-growth and lumbung values.
+
+After documenta fifteen, lumbung.space will persist as a living room where members of the network can continue to connect, support, and learn from each other.
+
+## How
+
+Currently, lumbung.space consists of a variety of tools for self-publishing and sharing knowledge, which are loosely linked together. The infrastructure allows for private, semi-public, and public communication. On lumbung tv, videos or live streams can be watched, shared, and archived. Lumbung social, is an internal social network where lumbung members can hang out and share aspects of their everyday lives or work with one another, but also publish parts of it to a wider audience. nongkrong.lumbung.space is an easy way to connect through a chat room that can also be used for meetings via video call. For the publication of long-form texts, there is pen.lumbung.space and panduan.lumbung.space is a shared notebook for writing, discussing, editing, and improving collective documentation. There is also a digital library to read and exchange literature by and for the network called books.lumbung.space. Finally, cloud.lumbung.space is shared file storage where documents and files can be stored.
+
+While most of these tools are private, it is possible to selectively publish material to a wider audience from them. Additionally, it is possible to publish content to the shared front page of lumbung.space. This shared front page also collects updates from the own websites of lumbung-interlokal members, known as lumbung shouts. 
+ 
+## Who
+
+lumbung.space was conceptualized and developed together with [Roel Roscam Abbing](https://roelof.info), an artist and doctoral candidate in Interaction Design at Malmö University and [Autonomic](https://autonomic.zone) technology cooperative. Their work for lumbung.space is part of the Co-op Cloud initiative, a set of reusable recipes for installing software, which allows other collectives to set up similar infrastructure.
+
+__This digital infrastructure is also realized with the valuable contributions of the people involved in the process__
+
+* Arief Syarifuddin (Al Ghori)
+* Autonomic Co-operative
+* Cem
+* Greistina Kusumaningrum
+* Indra Ameng
+* JJ Adibrata
+* Julia Sarisetiati
+* Katalin Székely
+* Malene Saalmann
+* Matthias Einhoff 
+* Mirwan Andan
+* Rahmat Arham
+* reinaart vanhoe
+* Roel Roscam Abbing
+* Theresa Franke
+* Yazan Khalili
+
+__Infrastructure Set Up & Maintenance Support__
+
+Autonomic Co-operative
+
+__Visual Design__
+
+Studio 4oo2
+
+__With Special Thanks to__
+* [Manetta Berends](https://manettaberends.nl/), for her work on [web-to-print functionality for social.lumbung.space](https://git.vvvvvvaria.org/mb/lumbung-web-to-print)
+
+* [Chocobozzz](https://github.com/Chocobozzz/), for their work on implementing additional features for tv.lumbung.space
+
+
+__The lumbung network is supported by__
+
+<img src="/img/goethe-institut.png" style="width: 200px">
+</div>

themes/lumbung-theme/layouts/_default/baseof.html

@@ -4,7 +4,7 @@
     <body>
         {{- partial "header.html" . -}}
         
-        <div id="content">
+        <div class="container">
             {{- block "main" . }}{{- end }}
         </div>
         
@@ -12,10 +12,11 @@
         {{- partial "footer.html" . -}}
     </body>
     <script>
-        function toggleDescription(id){
+        function toggleDescription(id) {
             document.querySelector(id).classList.toggle("collapsed");
         }
-        function loadPlayer(id, embed_path){
+        
+        function loadPlayer(id, embed_path) {
             media = document.querySelector('#media-'+ id)
 
             var iframe = document.createElement('iframe');
@@ -27,6 +28,17 @@
             media.appendChild(iframe);
             document.querySelector('#thumb-'+ id).remove();
         }
+        
+        // remove box around "previous" page nav link (couldn't handle this with CSS nth-child)
+        document.querySelector('[aria-label="Previous"]').parentElement.classList.add('previous-page-link')
+
+        // for toggling submenus in mobile navigation drawer
+        let submenuLinks = document.querySelectorAll('.drawer .has-submenu');
+        [...submenuLinks].forEach(submenuLink => {
+            submenuLink.addEventListener('click', function() {
+                submenuLink.querySelector('.submenu').classList.toggle('opened')
+            })
+        })
     </script>
 
 </html>

themes/lumbung-theme/layouts/_default/list.html

@@ -19,6 +19,10 @@
           {{ else if in .Params.categories "shouts" }}
 
             {{- partial "shout_card.html" . -}}
+
+          {{ else if in .Params.categories "pen" }}
+
+            {{- partial "pen_card.html" . -}}
           
           {{ else if in .Params.categories "page" }}
 

themes/lumbung-theme/layouts/index.html

@@ -16,6 +16,10 @@
 
             {{- partial "network_card.html" . -}}
 
+          {{ else if in .Params.categories "pen" }}
+
+            {{- partial "pen_card.html" . -}}
+
           {{ else if in .Params.categories "shouts" }}
 
             {{- partial "shout_card.html" . -}}
@@ -29,9 +33,16 @@
         {{ end }}
       </div>
 
-      <nav class="pagination">
+      <nav class="pagination-container">
         {{ template "_internal/pagination.html" . }}
       </nav>
+
+      <div class="lumbung-radio-player" onclick="window.open('https://lumbungradio.stationofcommons.org', 'Lumbung Radio', 'height=800,width=450')">
+        <svg class="lumbung-radio-play-button" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M7 4V20L20 12L7 4Z" fill="#CA14D4" stroke="#CA14D4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <span>lumbung radio</span>
+      </div>
   </main>
 {{ end }}
 

themes/lumbung-theme/layouts/partials/header.html

@@ -1,6 +1,6 @@
-    <header id="top-menu">
-        <div class="mobile-menu">
-            <button class="hamburger" onclick="this.classList.toggle('opened'); document.querySelector('.drawer').classList.toggle('opened');">
+<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"/>
@@ -9,42 +9,64 @@
                   </g>
                 </svg>
             </button>
-            <a href="https://members.lumbung.space" id="login">login</a>
-        </div>
+        <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><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>
+    <a href="/" class="home-link">
+        <img class="logo" src="{{ .Site.Params.Logo }}" alt="{{ .Site.Title }}">
+    </a>
 
-        <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>
+    <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">harvest
+                <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="/tags/lumbungkios/">kios</a></li>
+                    <li><a href="/tags/lumbunggallery/">gallery</a></li>
+                </ul>
+            </li>
+            <li><a href="https://books.lumbung.space">books</a></li>
+            <li class="has-submenu">ekonomi
+                <ul class="submenu">
+                    <li><a href="/tags/lumbungkios/">kios</a></li>
+                    <li><a href="/tags/lumbunggallery/">gallery</a></li>
+                </ul>
+            </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 class="has-submenu">harvest
+                <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="/tags/lumbungkios/">kios</a></li>
+                    <li><a href="/tags/lumbunggallery/">gallery</a></li>
+                </ul>
+            </li>
+            <li><a href="https://books.lumbung.space">books</a></li>
+            <li class="has-submenu">ekonomi
+                <ul class="submenu">
+                    <li><a href="/tags/lumbungkios/">kios</a></li>
+                    <li><a href="/tags/lumbunggallery/">gallery</a></li>
+                </ul>
+            </li>
+            <li><a href="/shouts/">shouts</a></li>
+        </ul>
+    </aside>
+
+    <div>
+        <a href="https://members.lumbung.space" id="login">login</a>
+    </div>
+</header>

themes/lumbung-theme/layouts/partials/network_card.html

@@ -7,7 +7,7 @@
           
         </header>
         
-        <div class="network-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="network-source"><span class="from p-author">From {{ if .Params.authors }}<b>{{range .Params.authors}} {{.}} {{end}}</b> at {{ end }}<a href="{{ "/categories/" | relLangURL }}{{ .Params.feed_name | urlize }}">{{ .Params.feed_name }}</a></span></div>
         {{ with (index (.Resources.ByType "image") 0) }}
         {{ $height := add .Height 0.0}}
         {{ $ratio := div $height .Width}}

themes/lumbung-theme/layouts/partials/news-ticker.html

@@ -1 +1 @@
-<iframe src="https://documenta-fifteen.de/en/external-ticker-lumbung/" sandbox="allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox" scrolling="no" style="overflow: hidden" width="100%" height="80px" frameborder="0"></iframe>
+<iframe src="https://documenta-fifteen.de/en/external-ticker-lumbung/" sandbox="allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox" scrolling="no" loading="lazy" style="overflow: hidden" width="100%" height="80px" frameborder="0"></iframe>

themes/lumbung-theme/layouts/partials/pen_card.html

@@ -0,0 +1,36 @@
+    <div class='pen card {{ .Params.feed_name }}'>
+      <article class="h-entry pen">
+        <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>
+          
+          {{ $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>
+        
+        {{ 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 }}
+            <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>

themes/lumbung-theme/layouts/partials/shout_card.html

@@ -29,7 +29,7 @@
 
             <footer class='post-footer'>
               <div class='footer-metadata'>
-              <span class="from p-author">From {{ if .Params.author }}<b>{{.Params.author}}</b> on{{ end }}</span>
+              <span class="from p-author">From {{ if .Params.authors }}<b>{{range .Params.authors}} {{.}} {{end}}</b> on{{ end }}</span>
                <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
                </div>
              {{ if .Truncated }}

themes/lumbung-theme/static/css/main.css

@@ -1,18 +1,3 @@
-@font-face {
-    font-family: BarrioRegular;
-    src: url(fonts/Barrio_Regular.woff);
-}
-
-@font-face {
-    font-family: ZenMaruGothic;
-    src: url(fonts/Zen_Maru_Gothic_Regular.woff);
-}
-
-@font-face {
-    font-family: AnonymousPro;
-    src: url(fonts/Anonymous_Pro_Regular.woff);
-}
-
 @font-face {
     font-family: Gudea;
     font-style: normal;
@@ -36,24 +21,27 @@
 
 :root {
     --border-color: tomato;
-    
+
     --tv-dark: #237D0F;
     --tv-light: #E2FAD7;
-    
-    --pen-dark: #E0005C;
-    --pen-light: #FEDAE9;
-    
+
+    --pen-dark: #C5021E;
+    --pen-light: #FFEBD9;
+
     --social-light: #C2E4F2;
     --social-dark: #0163A4;
-    
+
     --gallery-light: #FCF4B9;
     --gallery-dark: #846A00;
-    
+
     --shouts-dark: #CB001D;
     --shouts-light: #FFD9DD;
-    
+
     --calendar-light: #B6EDFF;
     --calendar-dark: #0E64C8;
+
+    --sounds-light: #ECC5EC;
+    --sounds-dark: #CA14D4;
 }
 
 
@@ -74,7 +62,7 @@ body {
     box-sizing: border-box;
 }
 
-#content {
+.container {
     margin: 2em auto;
     max-width: 80%;
     margin-bottom: 0;
@@ -130,10 +118,6 @@ body {
     width: 100%;
 }
 
-.entries {
-    padding-top: 10%;
-}
-
 .p-name {
     padding-right: 1em;
 }
@@ -141,11 +125,10 @@ body {
 /* base header & menu */
 
 #top-menu {
-    padding: 1rem;
+    padding: 1.5rem 1rem 0;
     display: grid;
     grid-template-columns: 300px 1fr auto;
     align-items: flex-start;
-    padding-top: 1.5rem;
 }
 
 .home-link {
@@ -157,15 +140,9 @@ body {
     margin-top: 2rem;
 }
 
-#top-menu ul {
-    margin-left: 3rem;
-}
-
 #top-menu a {
     text-decoration: none;
     color: #333;
-    padding: 5px;
-    margin: 0 2rem;
 }
 
 #top-menu a:hover,
@@ -175,6 +152,7 @@ body {
 
 #top-menu #login {
     font-weight: bold;
+    margin-top: 8px;    
 }
 
 #top-menu div {
@@ -186,14 +164,6 @@ body {
     display: none;
 }
 
-#top-menu .search {
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-    /* temporarily disabling search */
-    display: none;
-}
-
 #top-menu input {
     border: none;
     border-bottom: 1px solid #333;
@@ -223,10 +193,12 @@ body {
 
 .menu ul {
     list-style-type: none;
-    margin: 0;
-    padding: 0;
+    margin: 0 auto;
+    padding: 0 3rem;
     display: flex;
+    justify-content: space-between;
     text-transform: lowercase;
+    max-width: 1100px;
 }
 
 .menu-nav-item {
@@ -234,6 +206,80 @@ body {
     padding: 0.5em;
 }
 
+/* styles for "tools" dropdown menu */
+#top-menu ul.submenu {
+    flex-direction: column;
+    margin-left: 0;
+    position: absolute;
+    background-color: white;
+    z-index: 2;
+}
+
+.menu .submenu {
+    visibility: hidden;
+    transition: all 0.1s ease-in-out;
+}
+
+.menu .submenu li {
+    margin: 2px 0;
+}
+
+.menu .has-submenu {
+    cursor: pointer;
+    color: #333333;
+}
+
+.menu .has-submenu:hover {
+    color: black;
+}
+
+.menu .has-submenu:hover .submenu {
+    visibility: visible;
+}
+
+#top-menu .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 .menu .submenu a {
+    margin: 0;
+    display: flex;
+}
+
+#top-menu .drawer .submenu {
+    position: initial;
+    display: none;
+}
+
+#top-menu .drawer .submenu.opened {
+    display: flex;
+}
+
+#top-menu .drawer .submenu li {
+   padding: 0;
+   padding-top: 1em; 
+}
+
+#top-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*/
 
@@ -271,6 +317,11 @@ body {
     width: 100%;
 }
 
+.portrait .h-entry img {
+    max-width: unset;
+    width: unset;
+}
+
 .header-metadata .dt-published {
     padding: 0.5em 1.2em 0.5em 1.2em;
 }
@@ -334,6 +385,7 @@ footer.post-footer {
     color: var(--shouts-dark);
 }
 
+
 .h-entry.network header {
     display: flex;
     flex-direction: column;
@@ -455,6 +507,128 @@ div.network-source {
     padding: 0.5em 1.2em 0.5em 1.2em;
 }
 
+/* pen cards */
+.card.pen {
+    border: 2px solid var(--pen-dark);
+    background-color: var(--pen-light);
+    max-width: min-content;
+    margin-bottom: 2em;
+    flex: auto;
+    margin: 0 3em 3em 0;
+    align-self: start;
+    color: var(--shouts-dark);
+}
+
+.h-entry.pen header {
+    display: flex;
+    flex-direction: column;
+}
+
+.h-entry.pen header h2 {
+    padding: 0.2em 0.5em 0.5em 0.5em;
+    margin: 0;
+    border: none;
+}
+
+.h-entry.pen header h2:hover {
+    cursor: pointer;
+}
+
+.h-entry.pen header h2 a {
+    text-decoration: none;
+    color: var(--pen-dark);
+}
+
+.h-entry.pen header time {
+    text-align: right;
+    padding: 0.6em 0.8em;
+    padding-top: 0;
+    font-size: 1rem;
+}
+
+.pen .header-metadata {
+    align-items: center;
+}
+
+.pen .header-metadata .dt-published {
+    border-bottom: 2px solid var(--pen-dark);
+}
+
+.pen .filler {
+    min-height: 1rem;
+}
+
+.pen .author.p-author {
+    border-color: var(--pen-dark);
+    padding: 0.5em 1.2em 0.5em 1.2em;
+}
+
+.pen .p-summary {
+    display: flex;
+}
+
+.pen .p-summary.portrait {
+    flex-direction: row;
+}
+
+.pen .p-summary.landscape {
+    flex-direction: column;
+}
+
+.pen .summary-image > img {
+    display: inherit;
+}
+
+.pen .summary-text {
+    font-size: 18px;
+}
+
+div.pen-source {
+    padding: 1em;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--pen-dark);
+    color: white;
+    margin: auto;
+    position: relative;
+    bottom: 21px;
+    transform:  rotate(1deg);
+}
+
+
+.pen-source a {
+    font-weight: bold;
+    color: white;
+}
+
+.pen .footer-filler {
+    border-left: 2px solid var(--pen-dark);
+    border-top: none;
+}
+
+.pen footer.post-footer {
+    border-top: 2px solid var(--pen-dark);
+    flex-flow: row;
+    font-size: 0.9rem;
+    background-color: var(--pen-light);
+    color: var(--pen-dark);
+    padding: 0.25em 0.5em;
+}
+
+.pen footer svg {
+    fill: var(--pen-dark)
+}
+
+.pen .read-more {
+    border: none;
+    border-left: 2px solid var(--pen-dark);
+    padding: 0.5em 1.2em 0.5em 1.2em;
+}
+
+.pen .footer-metadata {
+    padding: 0.5em 1.2em 0.5em 1.2em;
+}
 
 /* shouts cards */
 
@@ -474,6 +648,7 @@ div.network-source {
     color: var(--social-dark);
     cursor: pointer;
     display: block;
+    word-wrap: anywhere;
 }
 
 .card .card.shout h2 a:hover {
@@ -508,15 +683,6 @@ div.network-source {
     background-color: var(--calendar-dark);
 }
 
-/* disabling temporarily since all the events are past events atm */
-/* .card.calendar.past {
-    opacity: 0.3;
-}
-
-.card.calendar.past:hover {
-    opacity: 1;
-} */
-
 .h-event.calendar header {
     display: flex;
     border-bottom: 2px solid cornflowerblue;
@@ -583,13 +749,14 @@ div.network-source {
 }
 
 .calendar-image {
+    width: 100%;
     max-width: 100%;
     display: inherit;
 }
 
 
 /* Card metadata (video & calendar) */
-  
+
 .tape-label {
     display: flex;
     justify-content: center;
@@ -641,7 +808,7 @@ input:checked+label+.calendar-location+.description {
 }
 
 label:hover {
-    box-shadow: inset 2px 2px 0px #95948c;
+    box-shadow: inset 2px 2px 0px var(--calendar-dark);
 }
 
 .description {
@@ -659,7 +826,7 @@ label:hover {
 
 /* Paginator */
 
-nav.pagination {
+.pagination-container {
     width: 60%;
     margin: auto;
     margin-top: 2em;
@@ -699,26 +866,10 @@ li.page-item.disabled {
     display: none;
 }
 
-
-/* 
-li.page-item:nth-child(even) {
-  transform: rotate(-1deg);
-}
-
-li.page-item:nth-child(odd) {
-  transform: rotate(1deg);
-}
-
-li.page-item:nth-child(5) {
-  transform: rotate(2deg); 
-}
-
-li.page-item:nth-child(8) {
-  transform: rotate(-3deg);
-} */
-
 li.page-item:first-child,
-li.page-item:last-child {
+li.page-item:last-child,
+li.page-item:nth-last-child(2),
+.previous-page-link {
     border: none;
     text-decoration: none;
 }
@@ -726,17 +877,11 @@ li.page-item:last-child {
 li.page-item:first-child::before,
 li.page-item:first-child::after,
 li.page-item:last-child::before,
-li.page-item:last-child::after {
-    display: none;
-}
-
-li.page-item:nth-last-child(2) {
-    border: none;
-    text-decoration: none;
-}
-
+li.page-item:last-child::after,
 li.page-item:nth-last-child(2)::before,
-li.page-item:nth-last-child(2)::after {
+li.page-item:nth-last-child(2)::after,
+.previous-page-link::before,
+.previous-page-link::after {
     display: none;
 }
 
@@ -790,105 +935,6 @@ footer a:hover {
     text-decoration: underline;
 }
 
-
-/* mobile styles */
-
-@media (max-width: 480px) {
-    body {
-        display: initial;
-    }
-
-    #top-menu {
-        grid-template-columns: 1fr;
-    }
-    
-    .menu,
-    #top-menu .search,
-    #login {
-        display: none;
-    }
-
-    /* menu styles */
-    #top-menu div.mobile-menu {
-        display: flex;
-        justify-content: space-between;
-    }
-    
-    .mobile-menu #login {
-        display: inline-flex;
-    }
-    
-    .hamburger {
-        border: none;
-        background: none;
-        position: relative;
-        z-index: 3;
-    }
-    
-    .drawer {
-        display: block;
-        position: fixed;
-        background: white;
-        top: 0;
-        left: 0;
-        height: 100vh;
-        width: 0;
-        z-index: 2;
-        transition: 0.2s all ease-in-out;
-        padding-top: 120px;
-    }
-    
-    .drawer * {
-        display: none;
-        opacity: 0;
-    }
-
-    #top-menu .drawer ul {
-        display: flex;
-        flex-direction: column;
-        gap: 14px;
-        width: 100%;
-        margin: 0;
-        padding: 0;
-    }
-    
-    .drawer ul li {
-        padding: 1em 0;
-        /* border-bottom: 1px solid #333; */
-    }
-    
-    .drawer ul li a {
-        color: white;
-        text-decoration: none;
-        text-transform: lowercase;
-        margin-left: 1em;
-    }
-
-    .drawer.opened {
-        width: 80%;
-    }
-    
-    .drawer.opened * {
-        display: block;
-        opacity: 1;
-    }
-    
-    /* card styles */
-    .card,
-    .card.network {
-        max-width: 83vw;
-    }
-
-    .card .summary-text {
-        font-size: 17px;
-        min-width: 30ch;
-    }
-    
-    .card h2 a {
-        font-size: 26px;
-    }
-}
-
 /* about styles */
 
 #about-img {
@@ -908,3 +954,148 @@ footer a:hover {
 .single .h-entry img {
     object-fit: contain;
 }
+
+/* lumbung radio player widget  */
+.lumbung-radio-player {
+    display: flex;
+    color: var(--sounds-dark);
+    border: 1px solid var(--sounds-dark);
+    background: var(--sounds-light);
+    font-style: italic;
+    width: fit-content;
+    padding: 1rem;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    cursor: pointer;
+}
+
+/* mobile styles */
+
+@media (max-width: 768px) {
+    body {
+        display: initial;
+    }
+
+    #top-menu {
+        grid-template-columns: 1fr;
+    }
+
+    .menu,
+    #login {
+        display: none;
+    }
+
+    /* menu styles */
+    #top-menu div.mobile-menu {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .mobile-menu #login {
+        display: inline-flex;
+    }
+
+    .hamburger {
+        border: none;
+        background: none;
+        position: relative;
+        z-index: 3;
+    }
+
+    .hamburger.opened {
+        position: fixed;
+    }
+
+    .drawer {
+        display: block;
+        position: fixed;
+        background: white;
+        top: 0;
+        left: 0;
+        height: 110vh;
+        width: 0;
+        z-index: 2;
+        transition: 0.2s all ease-in-out;
+        padding-top: 120px;
+        border-right: 1px solid;
+    }
+
+    .drawer * {
+        display: none;
+        opacity: 0;
+    }
+
+    #top-menu .drawer ul {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+    }
+
+    #top-menu ul.submenu {
+        position: initial;
+    }
+
+    .drawer ul li {
+        padding: 1em 0;
+        /* border-bottom: 1px solid #333; */
+    }
+
+    .drawer ul li a {
+        color: white;
+        text-decoration: none;
+        text-transform: lowercase;
+        margin-left: 1em;
+    }
+
+    .drawer.opened {
+        width: 80%;
+    }
+
+    .drawer.opened * {
+        display: block;
+        opacity: 1;
+    }
+
+    /* card styles */
+    .card,
+    .card.network {
+        max-width: 83vw;
+    }
+
+    .card .summary-text {
+        font-size: 17px;
+        min-width: 30ch;
+    }
+
+    .card h2 a {
+        font-size: 26px;
+    }
+}
+
+@media (max-width: 480px) {
+    .lumbung-radio-player {
+        display: none;
+    }
+
+    .pagination-container {
+        width: 71vw;
+        margin: 2em 0;
+    }
+
+    .pagination .page-item {
+        font-size: 26px;
+    }
+}
+
+@media (max-width:  960px) {
+    .menu ul:first-child {
+        padding: 0;
+    }
+}