make navigation responsive on ipad

Reviewed-on: #40

.dockerignore

@@ -0,0 +1,2 @@
+/content/
+/public/

.drone.yml

@@ -2,16 +2,29 @@
 kind: pipeline
 name: continuous deployment
 steps:
-  - name: build image
+  - name: push hugo image
     image: plugins/docker
     settings:
       username:
         from_secret: docker_reg_username
       password:
         from_secret: docker_reg_passwd
+      dockerfile: Dockerfile.hugo
       repo: decentral1se/beta.lumbung.space
       tags: latest
 
+  - name: push scripts image
+    image: plugins/docker
+    settings:
+      no_cache: true
+      username:
+        from_secret: docker_reg_username
+      password:
+        from_secret: docker_reg_passwd
+      dockerfile: Dockerfile.scripts
+      repo: decentral1se/beta.lumbung.space-scripts
+      tags: latest
+
   - name: deploy stack
     image: decentral1se/stack-ssh-deploy:latest
     settings:
@@ -19,6 +32,9 @@ steps:
       host: lumbung.space
       deploy_key:
         from_secret: drone_ssh_lumbung.space
+    depends_on:
+      - push hugo image
+      - push scripts image
 trigger:
   branch:
     - main

.gitignore

@@ -1,5 +1,11 @@
 *.lock
 .env
 .venv/
-/content/
+/content/calendar/
+/content/pen/
+/content/shouts/
+/content/social/
+/content/tv/
 /public/
+resources
+/etags/

Dockerfile.hugo

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

Dockerfile.scripts

@@ -0,0 +1,11 @@
+FROM python:3.9.9-alpine
+
+RUN apk add --no-cache git bash
+
+WORKDIR /src/
+
+RUN git clone https://git.autonomic.zone/ruangrupa/lumbunglib /src/
+
+RUN pip install -U -I setuptools pip
+
+RUN pip install -I .

README.md

@@ -1,19 +1,47 @@
-# living room
+# lumbung.space
 
-[![Build Status](https://drone.autonomic.zone/api/badges/ruangrupa/living-room/status.svg?ref=refs/heads/main)](https://drone.autonomic.zone/ruangrupa/living-room)
+[![Build Status](https://drone.autonomic.zone/api/badges/ruangrupa/lumbung.space/status.svg?ref=refs/heads/main)](https://drone.autonomic.zone/ruangrupa/lumbung.space)
 
 > A new attempt to bring together the ideas of the "splash" page, "portal" page
 > and a comfortable digital "living room" experience for lumbung[dot]space.
 > This is a work in progress. The end goal of this is to have a new design and
 > implementation for [`lumbung.space`](https://lumbung.space) for January 2022.
 
-## Hacking
+## FAQ
 
-[Install Hugo](https://gohugo.io/getting-started/installing/).
+### How does the CI/CD work?
+
+The [`.drone.yml`](./.drone.yml) triggers a build on [drone.autonomic.zone](https://drone.autonomic.zone/ruangrupa/lumbung.space) of the [`Dockerfile.hugo`](./Dockerfile.hugo) and the [`Dockerfile.scripts`](./Dockerfile.scripts) and then deploys the [`compose.yml`](./compose.yml) stack using `docker stack deploy`.
+
+### How often is the content regenerated?
+
+See the `sleep ...` statements in the [`compose.yml`](./compose.yml).
+
+### How do I see if content generation is working?
+
+(requires `lumbung.space` docker context)
+
+- `docker service logs -f beta_lumbung_space_peertube`
+- `docker service logs -f beta_lumbung_space_calendar`
+- `docker service logs -f beta_lumbung_space_feed`
+
+Where `beta_lumbung_space_<service-name>` and you see the service name in the [`compose.yml`](./compose.yml).
+
+### How do I add a feed?
+
+Add your RSS feed URL to [`feeds_list.txt`](./feeds_list.txt) and don't forget [this deploy step](https://git.autonomic.zone/ruangrupa/lumbung.space#deploy-a-new-feeds_list-txt).
+
+### How do I wipe all the generated content?
+
+(requires `lumbung.space` docker context)
+
+`docker exec -it $(docker container ls -q -f name=beta_lumbung_space_app) bash -c "rm -rf /src/content/*"`
+
+## Hacking
 
 ### Generate the site
 
-`hugo serve --watch`
+[Install Hugo](https://gohugo.io/getting-started/installing/) and `hugo serve --watch`
 
 ### Generate `lumbung[dot]space` posts
 
@@ -28,8 +56,33 @@ export CALENDAR_URL="https://cloud.lumbung.space/remote.php/dav/public-calendars
 export OUTPUT_DIR=content/calendar
 lumbunglib-cal
 
-export OUTPUT_DIR=content/video
+export OUTPUT_DIR=content/tv
 lumbunglib-vid
+
+export OUTPUT_DIR=content/shouts
+lumbunglib-feed  # reads ./feeds_list.txt
+
+export OUTPUT_DIR=content/social
+export MASTODON_AUTH_TOKEN=foobar
+lumbunglib-hash
 ```
 
 Afterwards, you can automatically run it with `make gen`.
+
+After a `git pull`, you may need to run `pip install git+https://git.autonomic.zone/ruangrupa/lumbunglib` again.
+
+### Manually deploying new images
+
+- `docker login -u decentral1se -p $(logins/dockerhub/decentral1se)`
+- `make push-hugo`
+- `make push-scripts`
+
+### Manually deploy the site
+
+(requires `lumbung.space` docker context)
+
+- `make deploy`
+
+### Deploy a new `feeds_list.txt`
+
+Increment the `_v<n>` (e.g. `v1` -> `v2`) in [`compose.yml`](./compose.yml) `configs` to avoid any deployment error.

compose.yml

@@ -18,9 +18,10 @@ services:
       server
       --appendPort='false'
       --bind 0.0.0.0
-      --baseUrl='https://beta.lumbung.space'
+      --baseUrl='https://lumbung.space'
       --port='1313'
       --buildFuture
+      --minify
       --watch
     deploy:
       update_config:
@@ -28,14 +29,117 @@ services:
         order: start-first
       labels:
         - "traefik.enable=true"
-        - "traefik.http.routers.coop-cloud-site.rule=Host(`beta.lumbung.space`)"
+        - "traefik.http.routers.coop-cloud-site.rule=Host(`lumbung.space`)"
         - "traefik.http.routers.coop-cloud-site.entrypoints=web-secure"
         - "traefik.http.services.coop-cloud-site.loadbalancer.server.port=1313"
         - "traefik.http.routers.coop-cloud-site.tls.certresolver=production"
 
+  tv:
+    image: decentral1se/beta.lumbung.space-scripts:latest
+    volumes:
+      - content:/src/content
+    environment:
+      OUTPUT_DIR: /src/content/tv
+    command: |
+      bash -c "
+        while true
+        do
+          echo 'generating tv posts...'
+          /usr/local/bin/lumbunglib-vid
+          sleep 300
+        done
+      "
+
+  calendar:
+    image: decentral1se/beta.lumbung.space-scripts:latest
+    volumes:
+      - content:/src/content
+    environment:
+      OUTPUT_DIR: /src/content/calendar
+      CALENDAR_URL: "https://cloud.lumbung.space/remote.php/dav/public-calendars/WbnHM8YdCkKT6bcT?export"
+    command: |
+      bash -c "
+        while true
+        do
+          echo 'generating calendar posts...'
+          /usr/local/bin/lumbunglib-cal
+          sleep 400
+        done
+      "
+
+  shouts:
+    image: decentral1se/beta.lumbung.space-scripts:latest
+    volumes:
+      - content:/src/content
+    configs:
+      - source: feeds_list
+        target: /src/feeds_list.txt
+    environment:
+      OUTPUT_DIR: /src/content/shouts
+    command: |
+      bash -c "
+        while true
+        do
+          echo 'generating shouts posts...'
+          /usr/local/bin/lumbunglib-feed
+          sleep 500
+        done
+      "
+
+  pen:
+    image: decentral1se/beta.lumbung.space-scripts:latest
+    volumes:
+      - content:/src/content
+    configs:
+      - source: feeds_list_pen
+        target: /src/feeds_list.txt
+    environment:
+      OUTPUT_DIR: /src/content/pen
+    command: |
+      bash -c "
+        while true
+        do
+          echo 'generating pen posts...'
+          /usr/local/bin/lumbunglib-feed
+          sleep 600
+        done
+      "
+
+  social:
+    image: decentral1se/beta.lumbung.space-scripts:latest
+    volumes:
+      - content:/src/content/
+    secrets:
+      - masto_key
+    environment:
+      OUTPUT_DIR: /src/content/social
+    command: |
+      bash -c "
+        export MASTODON_AUTH_TOKEN=`cat /run/secrets/masto_key`;
+        while true
+        do
+          echo 'generating social posts...'
+          /usr/local/bin/lumbunglib-hash
+          sleep 700
+        done
+      "
+
 volumes:
   content:
 
 networks:
   proxy:
     external: true
+
+configs:
+  feeds_list:
+    name: beta_lumbung_space_feeds_list_v1
+    file: feeds_list.txt
+  feeds_list_pen:
+    name: beta_lumbung_space_feeds_list_pen_v1
+    file: feeds_list_pen.txt
+
+secrets:
+  masto_key:
+    name: beta_lumbung_space_masto_key_v1
+    external: true

config.toml

@@ -1,4 +1,15 @@
-baseURL = "https://beta.lumbung.space"
+baseURL = "https://lumbung.space"
 languageCode = "en-gb"
-title = "beta.lumbung.space"
+title = "lumbung.space"
 theme = "lumbung-theme"
+pluralizeListTitles = "false"
+
+[params]
+    logo = "/img/logo.svg"
+    favicon = "/img/favicon.ico"
+    description = 'a digital living room for artists'
+    images = ['/img/logo.png']
+    title = 'lumbung dot space'
+
+[markup.goldmark.renderer]
+unsafe = true

content/about.md

@@ -0,0 +1,11 @@
+---
+title: "About"
+date: 2022-01-17T11:11:58+01:00
+hidden: true
+---
+
+<img id="about-img" src="/img/ade.jpeg" />
+
+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 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.

feeds_list.txt

@@ -0,0 +1,13 @@
+http://artscollaboratory.org/feed/
+http://www.festivalsegou.org/spip.php?page=backend&lang=fr
+https://artivismo.org/feed/
+https://brittoartstrust.org/feed/
+https://documenta-fifteen.de/en/feed/
+https://fafswag.wordpress.com/feed/
+https://gudskul.art/feed/
+https://inland.org/feed/
+https://jatiwangiartfactory.tumblr.com/rss/
+https://projectartworks.org/feed/
+https://wajukuuarts.wordpress.com/feed/
+https://www.masartemasaccion.org/feed/
+https://ruangrupa.id/feed/

feeds_list_pen.txt

@@ -0,0 +1 @@
+https://pen.lumbung.space/feed/

makefile

@@ -7,10 +7,18 @@ gen:
 	@CALENDAR_URL="https://cloud.lumbung.space/remote.php/dav/public-calendars/WbnHM8YdCkKT6bcT?export"; \
 	OUTPUT_DIR=content/calendar; \
 	lumbunglib-cal && \
-	OUTPUT_DIR=content/video lumbunglib-vid
+	OUTPUT_DIR=content/tv lumbunglib-vid && \
+	OUTPUT_DIR=content/shouts lumbunglib-feed
 
 push-hugo:
 	@docker build -t decentral1se/beta.lumbung.space -f Dockerfile.hugo . && \
 		docker push decentral1se/beta.lumbung.space
 
-.PHONY: serve gen push-hugo
+push-scripts:
+	@docker build --no-cache -t decentral1se/beta.lumbung.space-scripts -f Dockerfile.scripts . && \
+		docker push decentral1se/beta.lumbung.space-scripts
+
+deploy:
+	@DOCKER_CONTEXT=lumbung.space docker stack deploy -c compose.yml beta_lumbung_space
+
+.PHONY: serve gen push-hugo push-scripts deploy

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

@@ -3,9 +3,12 @@
     {{- partial "head.html" . -}}
     <body>
         {{- partial "header.html" . -}}
+        
         <div id="content">
             {{- block "main" . }}{{- end }}
         </div>
+        
+        {{- partial "news-ticker.html" . -}}
         {{- partial "footer.html" . -}}
     </body>
     <script>

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

@@ -1,7 +1,8 @@
 {{ define "main" }}
-<section class='entries'>
+  <main>
+    <section class='entries'>
       <div class="h-feed">
-    {{ range (.Paginator 13).Pages }}
+        {{ range where (.Paginator 13).Pages "Params.hidden" "ne" "true" }}
 
           {{ if in .Params.categories "tv"}}
         
@@ -19,6 +20,10 @@
 
             {{- partial "shout_card.html" . -}}
           
+          {{ else if in .Params.categories "page" }}
+
+            {{- partial "blank.html" . -}}
+
           {{ else }}
 
             {{- partial "card.html" . -}}
@@ -31,6 +36,5 @@
       <nav class="pagination">
         {{ template "_internal/pagination.html" . }}
       </nav>
-
-</main>
+  </main>
 {{ end }}

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

@@ -1,5 +1,5 @@
 {{ define "main" }}
-    <main class="main">
+    <main class="main single">
       <article class="h-entry">
       <header>
         <h1 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h1>

themes/lumbung-theme/layouts/index.html

@@ -1,7 +1,8 @@
 {{ define "main" }}
-<section class='entries'>
+  <main>
+    <section class='entries'>
       <div class="h-feed">
-    {{ range (.Paginator 13).Pages }}
+        {{ range where (.Paginator 13).Pages "Params.hidden" "ne" "true" }}
 
           {{ if in .Params.categories "tv"}}
         
@@ -31,7 +32,6 @@
       <nav class="pagination">
         {{ template "_internal/pagination.html" . }}
       </nav>
-
-</main>
+  </main>
 {{ end }}
 

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

@@ -1,5 +1,6 @@
 {{  $t := (time .Params.event_end) }} 
-    <div class='card calendar {{ if $t.Before now }}past{{end}}'>
+<div class='card calendar {{ if $t.Before now }}past{{end}}'>
+  <div class='date tape-label'><span> {{ substr .Params.date 0 11}}</span></div>
   <article class="h-event calendar ">
     <header>
       <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
@@ -22,9 +23,5 @@
         {{.Content}}
       </div>
     </div>  
-
-
-
   </article>
-    </div>
-        
+</div>

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

@@ -1,5 +1,5 @@
-<footer class="bar">
+<footer>
 	<div>
-		Imprint - Privacy Policy - Copyright
+		<a href="https://panduan.lumbung.space/share/684ea8a2-bc47-4111-acf2-f88a200b640f">Imprint</a> - <a href="https://panduan.lumbung.space/share/8a742222-2561-4d67-a9f1-6c7c4fe8bead">Privacy Policy</a> - <a href="https://panduan.lumbung.space/share/272026ff-57fd-4894-8d68-58606c77044c/doc/frequently-asked-questions-faq-pl8OTF58Od">FAQ</a> - <a href="https://panduan.lumbung.space/share/ece8e392-7b21-4379-bd82-a11e06ebf1fb">Community Guidelines</a> - <a href="https://panduan.lumbung.space/share/507566f6-6b7e-402e-bfd4-034feebdcba6">Glossary</a> - <a href="https://panduan.lumbung.space/share/ef6f6638-856d-4c9a-ab89-d82af567aba4">Terms of Use</a>
 	</div>
 </footer>

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

@@ -2,7 +2,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>{{ if .IsHome }} {{ .Site.Title }} {{ else }} {{ .Title }} | {{ .Site.Title }} {{ end }}</title>
+    <title>{{ if .IsHome }} {{ .Site.Title | lower }} {{ else }} {{ .Title | lower }} | {{ .Site.Title | lower }} {{ end }}</title>
   
     {{- if or .Description .Site.Params.description }}
     <meta name="description" content="{{ .Description | default .Site.Params.description }}">

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

@@ -1,34 +1,62 @@
-    <header class="bar" id="top-menu">
-            <h1 class="logo"><a href="/"><img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}"/></a></h1>
+<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"/>
+                    <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">
+        <img class="logo" src="{{ .Site.Params.Logo }}" alt="{{ .Site.Title }}">
+    </a>
+
     <nav class="menu">
         <ul>
-              {{ $currentPage := . }}
-              {{ range .Site.Menus.main }}
-              {{ if .HasChildren }}
-                <details class="menu-dropdown">
-                <summary class="menu-nav-item {{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
-                    <a href="#">
-                        {{ .Pre }}
-                        <span>{{ .Name }}</span>
-                    </a>
-                </summary>
-                <ul class="sub-menu">
-                    {{ range .Children }}
-                        <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
-                            <a href="{{ .URL }}">{{ .Name }}</a>
-                        </li>
-                    {{ end }}
+            <li><a href="/">home</a></li>
+            <li><a href="/about/">about</a></li>
+            <li class="has-submenu">harvest
+                <ul class="submenu">
+                    <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><a href="/kios/">kios</a></li>
+                    <li><a href="/gallery/">gallery</a></li>
                 </ul>
-              </details>
-            {{ else }}
-                <li class="menu-nav-item">
-                    <a href="{{ .URL }}">
-                        {{ .Pre }}
-                        <span>{{ .Name }}</span>
-                    </a>
             </li>
-            {{ end }}
-        {{ end }}
         </ul>
     </nav>
-    </header>
+
+    <aside class="drawer">
+        <ul>
+            <li><a href="/">home</a></li>
+            <li><a href="/about/">about</a></li>
+            <li class="has-submenu" onclick="this.classList.toggle('opened')">harvest
+                <ul class="submenu">
+                    <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><a href="/tags/lumbungkios/">kios</a></li>
+                    <li><a href="/tags/lumbunggallery/">gallery</a></li>
+                </ul>
+            </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>

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

@@ -1,17 +1,17 @@
-    <div class='network card'>
+    <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.author }}<b>{{.Params.author}}</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}}
-              {{ $thumb := .Fit "540x360"}}
+        {{ $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>
@@ -25,13 +25,11 @@
           </div>
           
           <footer class='post-footer'>
-              <div class='footer-metadata'>
-               <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 }}
+            <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/news-ticker.html

@@ -0,0 +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>

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

@@ -1,14 +1,19 @@
-    <div class='shout card'>
+    <div class='shout card {{ .Params.feed_name }}'>
           <article class="h-entry shout">
             <header>
               {{ $postPermalink := .Permalink}}
-              <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
+              <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 "image") 0) }}
               {{ $height := add .Height 0.0}}
               {{ $ratio := div $height .Width}}
-              {{ $thumb := .Fit "540x360"}}
+              {{ $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>

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

@@ -1,4 +1,5 @@
 <div class='video-box'>
+  <div class='video channel tape-label'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></div>
   <div class='media' id='media-{{ .Params.uuid }}'>
     <span class='video-thumbnail' id='thumb-{{ .Params.uuid }}'
      href="https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}"
@@ -21,10 +22,13 @@
   </div>
   <div class='video metadata'>
     <div class='title'>{{ .Title }}</div>
-    <div class='video channel'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></div>
     <input class='descr_button' type='checkbox' id='toggle-{{ .Params.uuid }}'/>
-    <label class='video' for='toggle-{{ .Params.uuid }}'>↕</label>
-    <div class='video date'> <a href='https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}'> {{ .Date.Format "Jan 02, 2006" }}</a></div>
+    <label class='video' for='toggle-{{ .Params.uuid }}'>
+      <svg class="dot" 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>
+    </label>
+    <div class='video date' style="display: none;"> <a href='https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}'> {{ .Date.Format "Jan 02, 2006" }}</a></div>
     <div class="description video" id='vid-{{ .Params.uuid }}'> {{ .Content }}
       <ul>
     {{ range (.GetTerms "categories") }}

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

@@ -1,17 +1,3 @@
-/*nice body-border color combos
-
-antiquewhite - burlywood
-peachpuff - tomato
-lightpink - crimson
-lightblue - cornflowerblue
-palegreen - lightseagreen
-steelblue - aliceblue
-
-fonts
-bungeeshade
-allerta
-*/
-
 @font-face {
     font-family: BarrioRegular;
     src: url(fonts/Barrio_Regular.woff);
@@ -27,23 +13,61 @@ allerta
     src: url(fonts/Anonymous_Pro_Regular.woff);
 }
 
-h1, h2, h3 {
-  font-family: BarrioRegular;
+@font-face {
+    font-family: Gudea;
+    font-style: normal;
+    font-weight: 400;
+    src: url(fonts/gudea.woff2) format("woff2");
+}
+
+@font-face {
+    font-family: Gudea;
+    font-style: italic;
+    font-weight: 400;
+    src: url(fonts/gudea-italic.woff2) format("woff2");
+}
+
+@font-face {
+    font-family: Gudea;
+    font-style: normal;
+    font-weight: 700;
+    src: url(fonts/gudea-bold.woff2) format("woff2");
 }
 
 :root {
     --border-color: tomato;
+
+    --tv-dark: #237D0F;
+    --tv-light: #E2FAD7;
+
+    --pen-dark: #E0005C;
+    --pen-light: #FEDAE9;
+
+    --social-light: #C2E4F2;
+    --social-dark: #0163A4;
+
+    --gallery-light: #FCF4B9;
+    --gallery-dark: #846A00;
+
+    --shouts-dark: #CB001D;
+    --shouts-light: #FFD9DD;
+
+    --calendar-light: #B6EDFF;
+    --calendar-dark: #0E64C8;
 }
 
+
 /*Main Stuff*/
-body {
-  font-size:24px;
-  font-family: ZenMaruGothic;
-  color: maroon;
-}
 
-a {
-  color: #1B4C8A;
+body {
+    font-size: 21px;
+    font-family: Gudea, sans-serif;
+    margin: 0;
+
+    /* pushes footer to bottom */
+    display: grid;
+    grid-template-rows: auto auto 1fr auto;
+    min-height: 100vh;
 }
 
 * {
@@ -58,14 +82,12 @@ a {
 
 .card {
     border: 2px solid var(--border-color);
-  box-shadow:1em 1em 0 #d2d1c8;
     background-color: #fff09d;
     max-width: 600px;
     margin-bottom: 2em;
     flex: auto;
     margin: 0 3em 3em 0;
     align-self: start;
-  
 }
 
 .card {
@@ -77,7 +99,6 @@ a {
     max-width: 400px;
 }
 
-
 .card:nth-child(even) {
     transform: rotate(-1deg);
 }
@@ -90,16 +111,15 @@ a {
     transform: rotate(2deg);
 }
 
-
 .video.box {
-  margin-top:3em;
+    margin-top: 3em;
 }
 
 .bar {
     border: 2px solid var(--border-color);
     box-shadow: 0.6em 0.6em 0 #d2d1c8;
     margin-bottom: 2em;
-  margin-top:3em;
+    margin-top: 3em;
     display: inline-block;
     background-color: #fff09d;
 }
@@ -108,27 +128,81 @@ a {
     display: flex;
     flex-flow: row wrap;
     width: 100%;
-  
 }
 
-.entries {
-  padding-top: 10%;
+.p-name {
+    padding-right: 1em;
 }
 
-
 /* base header & menu */
 
 #top-menu {
-  position: fixed;
-  left: 5%;
-  transform: translate(-50%);
-  width: 30%;
-  z-index: 1;
-  margin-top: 1em;
-  transform: rotate(-3deg);
+    padding: 1.5rem 1rem 0;
+    display: grid;
+    grid-template-columns: 300px 1fr auto;
+    align-items: flex-start;
 }
 
-.menu-dropdown summary{
+.home-link {
+    text-decoration: none;
+}
+
+.logo {
+    width: 283px;
+    margin-top: 2rem;
+}
+
+#top-menu ul {
+    margin: 0 3rem;
+}
+
+#top-menu a {
+    text-decoration: none;
+    color: #333;
+}
+
+#top-menu a:hover,
+#top-menu a:focus {
+    color: black;
+}
+
+#top-menu #login {
+    font-weight: bold;
+    margin-top: 8px;    
+}
+
+#top-menu div {
+    display: flex;
+}
+
+#top-menu div.mobile-menu,
+.drawer {
+    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;
+    margin-right: 2rem;
+    font-size: 13px;
+    margin-left: 5px;
+}
+
+#top-menu input:focus,
+#top-menu input:hover {
+    outline: none;
+    border-bottom: 1px solid #333;
+}
+
+.menu-dropdown summary {
     list-style: none;
     cursor: pointer;
 }
@@ -137,29 +211,18 @@ a {
     display: none;
 }
 
-.logo {
-  margin-left: 0.5em;
-  margin-right: 0.5em;
-  margin-top: 0.2em;
-  margin-bottom: 0.2em;
-}
-
-.logo a {
-  text-decoration: none;
-}
-
 .menu {
-  border-top: 2px solid var(--border-color);
-  margin: 0px;
-  padding: 0px;
-  
+    margin-top: 8px;
 }
 
 .menu ul {
     list-style-type: none;
-  margin: 0;
+    margin: 0 auto;
     padding: 0;
     display: flex;
+    justify-content: space-between;
+    text-transform: lowercase;
+    max-width: 1320px;
 }
 
 .menu-nav-item {
@@ -167,11 +230,77 @@ a {
     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.5s 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 {
+    visibility: hidden;
+}
+
+#top-menu .drawer .submenu li {
+   padding: 0;
+   padding-top: 1em; 
+}
+
+#top-menu .drawer .opened .submenu {
+    visibility: visible;
+}
+
+.drawer .has-submenu {
+    padding-left: 2rem;
+    margin-left: 5px;
+}
+
+
 /*Article Summary Cards*/
 
 .h-entry header {
     display: flex;
-  border-bottom: 2px solid var(--border-color);
     justify-content: space-between;
 }
 
@@ -180,12 +309,10 @@ a {
     margin: 0;
     padding-right: 0.3em;
     padding-left: 0.3em;
-  border-left: 2px solid var(--border-color);
     flex-grow: 1;
 }
 
 .h-entry header h2:hover {
-  box-shadow: inset 4px 4px 0px tomato;
     cursor: pointer;
 }
 
@@ -194,7 +321,6 @@ a {
     color: var(--border-color);
 }
 
-
 .h-entry header .header-metadata {
     margin: 0;
     display: flex;
@@ -202,7 +328,12 @@ a {
     font-size: 0.8rem;
 }
 
-.header-metadata .dt-published{
+.h-entry img {
+    max-width: 100%;
+    width: 100%;
+}
+
+.header-metadata .dt-published {
     padding: 0.5em 1.2em 0.5em 1.2em;
 }
 
@@ -211,7 +342,6 @@ a {
     padding: 0.5em 1.2em 0.5em 1.2em;
 }
 
-
 .p-summary.truncated.image {
     display: flex;
     flex-direction: row-reverse;
@@ -230,27 +360,16 @@ a {
     overflow: hidden;
 }
 
-.summary-image > img {
-  /*    height: 100%;
-  object-fit: cover;
-  max-width: 100%;*/
-  
-}
-
 .summary-image > a {
     display: flex;
 }
 
-.summary-image {
-  border-right: 2px solid var(--border-color);
-}
-
 footer.post-footer {
     display: flex;
     flex-flow: row-reverse;
 }
 
-.footer-filler{
+.footer-filler {
     border-top: 2px solid var(--border-color);
     flex-grow: 1;
 }
@@ -263,49 +382,52 @@ footer.post-footer {
     font-size: 0.9rem;
 }
 
+
 /* network cards */
 
 .card.network {
-  border: 2px solid darkcyan;
-  box-shadow:1em 1em 0 #d2d1c8;
-  background-color: lightgreen;
+    border: 2px solid var(--shouts-dark);
+    background-color: var(--shouts-light);
     max-width: min-content;
     margin-bottom: 2em;
     flex: auto;
     margin: 0 3em 3em 0;
     align-self: start;
-  color: darkcyan;
+    color: var(--shouts-dark);
 }
 
 .h-entry.network header {
     display: flex;
-  border-bottom: 2px solid darkcyan;
-  flex-direction: row-reverse;
+    flex-direction: column;
 }
 
 .h-entry.network header h2 {
-  padding: 0.2em 0.5em 0.2em 0.5em;
+    padding: 0.2em 0.5em 0.5em 0.5em;
     margin: 0;
     border: none;
 }
 
 .h-entry.network header h2:hover {
-  box-shadow: inset 4px 4px 0px darkcyan;
     cursor: pointer;
 }
 
 .h-entry.network header h2 a {
     text-decoration: none;
-  color: darkcyan;
+    color: var(--shouts-dark);
+}
+
+.h-entry.network header time {
+    text-align: right;
+    padding: 0.6em 0.8em;
+    font-size: 1rem;
 }
 
 .network .header-metadata {
     align-items: center;
 }
 
-.network .header-metadata .dt-published{
-  
-  border-bottom: 2px solid darkcyan;
+.network .header-metadata .dt-published {
+    border-bottom: 2px solid var(--shouts-dark);
 }
 
 .network .filler {
@@ -313,7 +435,7 @@ footer.post-footer {
 }
 
 .network .author.p-author {
-  border-color:  darkcyan;
+    border-color: var(--shouts-dark);
     padding: 0.5em 1.2em 0.5em 1.2em;
 }
 
@@ -324,52 +446,70 @@ footer.post-footer {
 .network .p-summary.portrait {
     flex-direction: row;
 }
-.network .p-summary.landscape{
+
+.network .p-summary.landscape {
     flex-direction: column;
 }
-.network .summary-image.portrait {
-  border-right: 2px solid darkcyan;
-}
-.network .summary-image.landscape {
-  border-bottom: 2px solid darkcyan;
-  border-right: none;
-}
-
 
 .network .summary-image > img {
     display: inherit;
 }
+
 .network .summary-text {
     font-size: 18px;
 }
 
 div.network-source {
-  padding: 0.5em 1em 0.5em 1em;
-  border-bottom: 2px solid darkcyan;
+    padding: 1em;
+    padding-right: 2em;
+    width: fit-content;
     font-size: 14px;
     display: flex;
     justify-content: space-between;
+    background-color: var(--shouts-dark);
+    color: white;
+    position: relative;
+    right: 1em;
+}
+
+.network-source::before {
+    content: "";
+    position: absolute;
+    right: -20px;
+    bottom: 0;
+    width: 0;
+    height: 0;
+    border-left: 20px solid var(--shouts-dark);
+    border-top: 23px solid transparent;
+    border-bottom: 23px solid transparent;
 }
 
 .network-source a {
     font-weight: bold;
-  color: darkcyan;
+    color: white;
 }
 
 .network .footer-filler {
-  border-left: 2px solid darkcyan;
+    border-left: 2px solid var(--shouts-dark);
     border-top: none;
 }
 
 .network footer.post-footer {
-  border-top: 2px solid darkcyan;
+    border-top: 2px solid var(--shouts-dark);
     flex-flow: row;
     font-size: 0.9rem;
+    background-color: var(--shouts-light);
+    color: var(--shouts-dark);
+    padding: 1em;
+}
+
+.network footer svg {
+    fill: var(--shouts-dark)
 }
 
 .network .read-more {
     border: none;
-  border-left: 2px solid darkcyan;
+    border-left: 2px solid var(--shouts-dark);
     padding: 0.5em 1.2em 0.5em 1.2em;
 }
 
@@ -377,12 +517,12 @@ div.network-source {
     padding: 0.5em 1.2em 0.5em 1.2em;
 }
 
+
 /* shouts cards */
 
 .card.shout {
     border-color: steelblue;
     border: 2px solid;
-  box-shadow:1em 1em 0 #d2d1c8;
     background-color: aliceblue;
     max-width: min-content;
     margin-bottom: 2em;
@@ -392,28 +532,52 @@ div.network-source {
     color: steelblue;
 }
 
+.card.shout h2 a {
+    color: var(--social-dark);
+    cursor: pointer;
+    display: block;
+}
+
+.card .card.shout h2 a:hover {
+    border: none;
+    text-decoration: none;
+}
+
+.card.shout .post-footer {
+    background: var(--social-light);
+    color: var(--social-dark);
+}
+
+
 /* calendar cards */
 
 .card.calendar {
-  border: 2px solid cornflowerblue;
-  box-shadow:1em 1em 0 #d2d1c8;
-  background-color: lightblue;
+    border: 2px solid var(--calendar-dark);
+    background-color: var(--calendar-light);
     max-width: 360px;
     margin-bottom: 2em;
     flex: auto;
     margin: 0 3em 3em 0;
     align-self: start;
-  color: royalblue;
-  
+    color: var(--calendar-dark);
 }
 
-.card.calendar.past {
+.calendar .tape-label {
+    background-color: var(--calendar-light);
+}
+
+.calendar .tape-label span {
+    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;
@@ -427,13 +591,16 @@ div.network-source {
 }
 
 .h-event.calendar header h2:hover {
-  box-shadow: inset 4px 4px 0px royalblue;
     cursor: pointer;
 }
 
 .h-event.calendar header h2 a {
     text-decoration: none;
-  color: royalblue;
+    color: var(--calendar-dark);
+}
+
+.h-event.calendar .calendar-location a {
+    color: var(--calendar-dark);
 }
 
 .header-filler {
@@ -458,7 +625,8 @@ div.network-source {
     flex-flow: row-reverse;
     border-bottom: 2px solid cornflowerblue;
 }
-.start-scroller marquee{
+
+.start-scroller marquee {
     font-size: 0.8rem;
     padding-top: 0.2em;
     padding-bottom: 0.2em;
@@ -468,7 +636,7 @@ div.network-source {
     border-top: 2px solid cornflowerblue;
 }
 
-.calendar-image-holder{
+.calendar-image-holder {
     border-bottom: 2px solid cornflowerblue;
 }
 
@@ -476,13 +644,33 @@ div.network-source {
     display: inherit;
 }
 
-.calendar-image{
+.calendar-image {
+    width: 100%;
     max-width: 100%;
     display: inherit;
 }
 
+
 /* Card metadata (video & calendar) */
 
+.tape-label {
+    display: flex;
+    justify-content: center;
+    border: none;
+    font-size: 1rem;
+}
+
+.tape-label a,
+.tape-label span {
+    width: max-content;
+    padding: 0.5em;
+    position: relative;
+    bottom: 19px;
+    z-index: 1;
+    transform: rotate(2deg);
+    color: white;
+}
+
 .metadata {
     display: flex;
     justify-content: space-between;
@@ -490,24 +678,23 @@ div.network-source {
 }
 
 .description p:first-of-type {
-  margin:0;
+    margin: 0;
 }
 
 .description ul:first-of-type {
-  margin:0;
+    margin: 0;
 }
 
-input + label +.calendar-location+.description{
+input+label+.calendar-location+.description {
     display: none;
 }
 
-input:checked + label +.calendar-location+.description {
+input:checked+label+.calendar-location+.description {
     display: block;
     transition: ease .5s;
 }
 
 .metadata label {
-  text-align: center;
     vertical-align: sub;
     flex-grow: 1;
     font-weight: normal;
@@ -532,6 +719,7 @@ label:hover {
     text-align: center;
 }
 
+
 /* Paginator */
 
 nav.pagination {
@@ -543,34 +731,39 @@ nav.pagination {
 
 ul.pagination {
     display: flex;
-  justify-content: space-evenly; /* align horizontal */
-  align-items: center; /* align vertical */
+    justify-content: space-evenly;
+    /* align horizontal */
+    align-items: center;
+    /* align vertical */
 }
 
 .page-item {
     display: block;
     text-align: center;
     font-size: 38px;
-  border: 2px solid #1B4C8A;
-  box-shadow:0.4em 0.4em 0 #d2d1c8;
-  
+    border-bottom: 2px solid black;
+    cursor: pointer;
 }
 
 li.page-item {
-  background-color: lightblue;
     padding: 0.4em;
+    position: relative;
 }
 
-li.page-item.active {
-  background-color: peachpuff;
-  border: 2px solid tomato;
-  padding: 0.4em;
+li.page-item a {
+    color: black;
+}
+
+li.page-item.active a {
+    text-decoration: underline;
 }
 
 li.page-item.disabled {
     display: none;
 }
 
+
+/*
 li.page-item:nth-child(even) {
   transform: rotate(-1deg);
 }
@@ -585,17 +778,197 @@ li.page-item:nth-child(5) {
 
 li.page-item:nth-child(8) {
   transform: rotate(-3deg);
+} */
+
+li.page-item:first-child,
+li.page-item:last-child {
+    border: none;
+    text-decoration: none;
 }
 
+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:nth-last-child(2)::before,
+li.page-item:nth-last-child(2)::after {
+    display: none;
+}
+
+li.page-item a {
+    text-decoration: none;
+}
+
+li.page-item:hover a {
+    text-decoration: underline;
+}
+
+li.page-item:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 50%;
+    width: 50%;
+    border-left: 2px solid black;
+    z-index: -100;
+}
+
+li.page-item:after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 50%;
+    width: 50%;
+    border-right: 2px solid black;
+    z-index: -100;
+}
 
 
 /* Page footer */
 
-footer.bar {
-  margin-top: 0;
-  width: 80%;
-  margin-left: auto;
-  display: block;
-  margin-right: auto;
-  margin-bottom: 2em;
+footer {
+    background: #AFAFAF;
+    color: #333333;
+    font-size: 15px;
+    padding: 1em 4em;
+}
+
+footer a {
+    color: #333333;
+    text-decoration: none;
+}
+
+footer a:hover {
+    cursor: pointer;
+    text-decoration: underline;
+}
+
+
+/* mobile styles */
+
+@media (max-width: 768px) {
+    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;
+        border-right: 1px dotted;
+    }
+
+    .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 {
+    width: 50%;
+    height: auto;
+    display:block;
+    margin:auto;
+}
+
+
+/* single page styles */
+.single header {
+    flex-direction: column;
+    margin-bottom: 4rem;
+}
+
+.single .h-entry img {
+    object-fit: contain;
 }

themes/lumbung-theme/static/css/video-box.css

@@ -1,14 +1,18 @@
 :root {
-  --video-border-color: burlywood;
-  --video-background-color: antiquewhite;
+  --tv-dark: #237D0F;
+  --tv-light: #E2FAD7;
 }
+
 .video-box {
-  border:2px solid var(--video-border-color);
-  max-width:560px;
-  margin:auto;
-  box-shadow:1em 1em 0 #d2d1c8;
+  border-top: 1px solid var(--tv-dark);
+  max-width: 560px;
+  margin: auto;
   margin-bottom: 2em;
-  color: chocolate;
+  color: var(--tv-dark);
+}
+
+.video-box a {
+  color: var(--tv-dark);
 }
 
 .video-box:nth-child(even){
@@ -37,7 +41,7 @@
 }
 
 .video {
-  background-color: var(--video-background-color);
+  background-color: var(--tv-light);
 }
 
 .video .metadata{
@@ -48,29 +52,30 @@
 
 .metadata .title{
   margin-top:0;
-  border-top: 2px solid var(--video-border-color);
-  border-bottom: 2px solid var(--video-border-color);
+  border-top: 2px solid var(--tv-dark);
+  border-bottom: 2px solid var(--tv-dark);
   padding:0.5em;
   font-weight:700;
   font-size:1.3rem;
   flex-basis: 100%;
+  padding-bottom: 100px;
 }
 
 .video.channel{
-  border-right: 2px solid var(--video-border-color);
+  border-right: 2px solid var(--tv-dark);
   padding: 0.5em 0.9em 0.5em 0.9em;
   font-size: 0.8rem;
 }
 
 .video.date {
   float:right;
-  border-left: 2px solid var(--video-border-color);
+  border-left: 2px solid var(--tv-dark);
   padding: 0.5em 0.9em 0.5em 0.9em;
   font-size: 0.8rem;
 }
 
 .video.description {
-  border-top: 2px solid var(--video-border-color);
+  border-top: 2px solid var(--tv-dark);
   padding: 0.8em 0.8em 0.8em 0.8em;
   
 }
@@ -120,8 +125,8 @@ input:checked + label + .video.date +.description {
 
 .video-thumbnail-duration-overlay {
   display: inline-block;
-  background-color: var(--video-background-color);
-  color: chocolate;
+  background-color: var(--tv-dark);
+  color: white;
   font-size: 14px;
   line-height: 1.1;
   z-index: 10;
@@ -129,7 +134,7 @@ input:checked + label + .video.date +.description {
   padding: 1px 3px 1px 3px;
   right: 5px;
   bottom: 5px;
-  border: 2px solid var(--video-border-color);
+  border: 2px solid var(--tv-dark);
 }
 
 .play-overlay {
@@ -153,3 +158,25 @@ input:checked + label + .video.date +.description {
 .video-thumbnail:hover .play-overlay .play-icon {
   transform:translate(-50%,-50%) scale(1);
 }
+
+.video-box .dot {
+  fill: var(--tv-dark);
+}
+
+.video.channel a {
+  width: max-content;
+  background: var(--tv-dark);
+  padding: 0.5em;
+  position: relative;
+  bottom: 19px;
+  z-index: 1;
+  transform: rotate(2deg);
+  color: white;
+}
+
+.video.channel {
+  background: var(--tv-light);
+  display: flex;
+  justify-content: center;
+  border: none;
+}

themes/lumbung-theme/static/img/dot.svg

@@ -0,0 +1,3 @@
+<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>

themes/lumbung-theme/static/img/logo.svg

@@ -0,0 +1,21 @@
+<svg width="333" height="103" viewBox="0 0 333 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M62.0719 1.63379C60.1034 1.63379 58.9314 2.6408 58.9314 4.32484V42.4945C58.9314 46.3519 57.9699 49.2875 56.0753 51.2162C54.1921 53.1392 51.3418 54.1121 47.5982 54.1121C44.4577 54.1121 41.926 53.3782 40.0826 51.9274C37.659 50.0215 36.4358 46.8696 36.4358 42.5514V25.6826C36.4358 23.697 34.7745 22.9915 33.3465 22.9915C30.4506 22.9915 30.1377 24.8747 30.1377 25.6826V42.7107C30.1377 48.1668 31.6681 52.4167 34.6778 55.3524C37.6874 58.2824 42.0511 59.7673 47.6551 59.7673C53.3046 59.7673 57.6911 58.2937 60.695 55.3922C63.699 52.4736 65.2237 48.2123 65.2237 42.7164V4.32484C65.2237 2.61235 64.0745 1.63379 62.0719 1.63379Z" fill="#F04B1E"/>
+<path d="M329.596 12.7454C329.47 12.5917 329.328 12.5007 329.209 12.4268C329.146 12.3869 329.084 12.3471 329.055 12.3187C329.032 12.2902 328.981 12.1992 328.953 12.1423C328.873 12.0001 328.788 11.8351 328.64 11.7042C328.333 11.4368 327.883 11.1751 327.445 10.9191C327.297 10.8337 327.149 10.7484 327.007 10.6574C325.858 9.96328 324.14 9.17246 322.49 10.3217L322.41 10.3786L322.353 10.4583C321.756 11.323 321.682 12.5007 321.608 13.741C321.579 14.2303 321.545 14.7366 321.483 15.2373C321.426 15.6867 321.375 16.1874 321.323 16.7165C321.204 17.8828 321.073 19.2084 320.863 19.9139C320.828 20.0277 320.618 20.2041 320.453 20.3406C320.259 20.4999 320.06 20.6649 319.907 20.8811C319.81 21.0176 319.742 21.1599 319.679 21.3021C319.628 21.4102 319.582 21.5069 319.537 21.5752C319.4 21.7743 319.247 21.9279 319.082 22.0872C318.928 22.2351 318.775 22.3888 318.638 22.5765C318.382 22.9292 318.291 23.3389 318.206 23.6973C318.16 23.9078 318.115 24.1012 318.041 24.2833C317.944 24.5336 317.677 24.8522 317.506 25.0571C317.341 25.2562 317.159 25.5122 316.988 25.7625C316.834 25.9844 316.675 26.2063 316.578 26.3201C316.51 26.3997 316.391 26.4794 316.271 26.5704C316.072 26.7126 315.845 26.8719 315.668 27.1166C315.549 27.2816 315.48 27.4352 315.424 27.5604C315.372 27.6798 315.338 27.7481 315.293 27.7936C315.162 27.9245 314.968 28.0383 314.764 28.152C314.564 28.2658 314.36 28.3853 314.166 28.5446C314.041 28.6527 313.95 28.7608 313.876 28.8518C313.825 28.9144 313.779 28.9713 313.745 28.9941C313.7 29.0282 313.626 29.0623 313.54 29.1022C313.427 29.1591 313.29 29.2159 313.153 29.3127C312.92 29.472 312.744 29.6711 312.567 29.8645C312.465 29.9783 312.368 30.0921 312.266 30.1774C311.959 30.4505 311.64 30.7009 311.333 30.9455C310.923 31.2698 310.502 31.6055 310.115 31.9866C309.791 32.1346 309.438 32.1858 309.029 32.2427C308.733 32.2825 308.397 32.3337 308.039 32.4247C307.476 32.5726 306.747 32.8742 306.19 33.1928C305.41 33.6422 303.789 34.581 304.506 36.2081C304.921 37.1525 305.951 38.188 306.793 38.5237C307.123 38.6545 307.436 38.7114 307.732 38.7114C308.539 38.7114 309.228 38.3018 309.859 37.9263C310.297 37.6646 310.713 37.4199 311.134 37.3232C312.203 37.0729 313.432 36.7372 314.456 36.1285L314.53 36.083L314.587 36.0204C315.321 35.167 316.169 34.4274 316.988 33.7048C318.183 32.658 319.412 31.5713 320.396 30.0978C320.584 29.9783 320.732 29.8304 320.863 29.6938C321.005 29.5459 321.096 29.4663 321.175 29.4264C321.244 29.6085 321.158 29.8759 320.948 30.3993C320.8 30.7578 320.652 31.1219 320.618 31.5144C320.561 32.1687 320.868 32.8856 321.443 33.4374C321.995 33.9608 322.66 34.2169 323.269 34.1315L323.337 34.1201L323.4 34.0974C324.709 33.5683 324.777 31.9241 324.839 30.4733C324.873 29.6995 324.908 28.8973 325.112 28.3682C325.482 27.9302 325.738 27.3669 325.983 26.8264C326.256 26.2234 326.54 25.5975 326.933 25.3074L327.001 25.2562L327.052 25.1879C327.456 24.636 327.701 23.9021 327.934 23.191C327.968 23.0942 327.997 23.0032 328.031 22.9065C328.611 22.3546 328.975 21.5752 329.334 20.8242C329.533 20.4032 329.721 20.0049 329.926 19.6863L329.965 19.6294L329.988 19.5612C330.876 16.8246 330.722 14.1449 329.596 12.7454Z" fill="#F0D5C0"/>
+<path d="M301.735 27.9755C301.798 27.8105 301.866 27.6171 301.923 27.4066C302.111 26.7011 302.156 25.9558 302.207 25.2446C302.247 24.6529 302.281 24.1011 302.389 23.6004C302.475 23.1965 302.611 22.7868 302.753 22.3545C303.049 21.4555 303.379 20.4372 303.396 19.1741C303.635 18.736 303.834 18.2525 304.028 17.7859C304.227 17.308 304.415 16.8586 304.631 16.4603C305.291 16.0052 305.814 15.4135 306.315 14.8389C307.254 13.775 308.062 12.8476 309.598 12.9102C309.763 12.9159 309.95 12.9329 310.127 12.95C310.821 13.0183 311.691 13.1036 312.072 12.4209C312.562 11.5504 312.067 10.4467 310.741 9.46814C309.928 8.86507 308.904 8.41562 307.766 8.17098C307.555 8.12546 307.339 8.07426 307.123 8.02306C306.104 7.78979 305.052 7.54515 304.056 7.58498C303.482 7.60773 302.918 7.86944 302.372 8.11977C302.23 8.18805 302.082 8.25063 301.934 8.3189C301.746 8.39855 301.553 8.47251 301.365 8.54647C300.87 8.73991 300.409 8.91628 300.091 9.1723C299.681 9.50228 299.294 10.1167 298.953 10.6686C298.788 10.9303 298.634 11.1806 298.515 11.3342C297.957 12.0511 297.838 12.9102 297.707 13.8205C297.644 14.2586 297.582 14.7137 297.468 15.203C297.394 15.5102 297.314 15.8117 297.235 16.1019C297.024 16.8756 296.802 17.6778 296.774 18.6052C296.757 19.1002 296.785 19.6008 296.814 20.0844C296.854 20.7614 296.888 21.4043 296.808 22.0017C296.785 22.1895 296.711 22.4 296.637 22.6162C296.558 22.8437 296.472 23.0998 296.416 23.3785C296.29 24.0101 296.216 24.835 296.171 25.3926C296.154 25.6088 296.125 25.8306 296.097 26.0525C296.046 26.4849 296 26.8888 296.006 27.2188C296.023 27.8731 296.279 28.4307 296.507 28.9256C296.592 29.1191 296.677 29.2954 296.734 29.4604C296.865 29.8302 296.984 30.1943 297.104 30.5414C297.491 31.702 297.855 32.8001 298.469 33.7559C299.004 34.5922 300.074 36.2592 301.957 36.2592C302.128 36.2592 302.304 36.2478 302.492 36.2136L302.64 36.1909L302.753 36.0942C304.181 34.8937 303.482 33.3348 302.918 32.0832L302.827 31.8841C302.668 31.5256 302.475 31.1957 302.293 30.8771C301.866 30.1431 301.496 29.5059 301.559 28.6582C301.57 28.4307 301.644 28.2201 301.735 27.9755Z" fill="#F0D5C0"/>
+<path d="M324.708 40.6229C324.89 40.0539 325.118 39.3485 325.01 38.6601C324.97 38.4268 324.686 37.6758 324.441 37.3231C324.1 36.8395 323.343 36.2421 322.888 36.0999C322.359 35.9349 321.79 36.0145 321.289 36.3218C320.64 36.72 320.157 37.4824 320.02 38.3073C319.98 38.5406 319.992 38.7625 320.003 38.9787C320.009 39.1152 320.015 39.2404 320.009 39.3542C319.958 40.1393 319.833 40.9756 319.702 41.8518C319.531 42.9726 319.36 44.1275 319.355 45.2028C319.349 45.8741 319.531 46.4374 319.685 46.938C319.833 47.3989 319.958 47.8028 319.935 48.2409C319.918 48.605 319.833 48.9065 319.736 49.2308C319.645 49.538 319.554 49.8566 319.525 50.2265C319.474 50.858 319.656 51.4553 319.838 52.03C319.969 52.451 320.094 52.8435 320.123 53.2418C320.157 53.6685 320.168 54.1692 320.151 54.7779C320.077 57.5088 319.77 59.6309 319.355 60.3079C318.82 61.1784 318.501 61.7985 318.171 62.6406L318.086 62.7145C317.42 63.2835 316.846 63.7727 316.339 64.4725C315.952 65.0073 315.827 65.525 315.696 66.0712C315.611 66.4353 315.52 66.8165 315.338 67.2489C315.247 67.4708 315.071 67.6187 314.854 67.8065C314.729 67.9146 314.593 68.0283 314.468 68.1706C313.938 68.7395 313.187 69.6157 312.67 70.7251C312.163 71.0551 311.839 71.533 311.52 72.0052C311.327 72.284 311.151 72.5514 310.94 72.7619C310.536 73.1772 309.723 73.5527 309.063 73.8485C308.812 73.9623 308.573 74.0704 308.369 74.1785C308.312 74.2069 308.164 74.2866 308.078 74.3606C306.867 75.4188 306.758 77.5181 307.475 78.6844C307.777 79.1851 308.221 79.5151 308.642 79.8337C308.886 80.0157 309.114 80.1921 309.319 80.3912C309.341 80.4197 309.387 80.5107 309.415 80.5733C309.478 80.7098 309.552 80.8691 309.666 81.0057C309.797 81.1593 309.922 81.2617 310.024 81.3414C310.104 81.4039 310.155 81.4438 310.178 81.4779C310.246 81.5803 310.297 81.7112 310.309 81.8136L310.365 82.2687L310.826 82.2801C311.065 82.2858 311.395 82.3711 311.742 82.4678C312.197 82.593 312.687 82.7239 313.176 82.7239C313.421 82.7239 313.665 82.6897 313.899 82.6044C314.308 82.4565 314.49 82.0867 314.65 81.7624C314.724 81.6088 314.803 81.4551 314.906 81.3015C315.105 81.0171 315.383 80.7155 315.657 80.4254C315.913 80.1523 316.18 79.8678 316.396 79.5777C316.726 79.1282 316.971 78.5763 317.21 78.0415C317.403 77.5978 317.591 77.1768 317.79 76.898C317.91 76.733 318.131 76.5623 318.353 76.3973C318.649 76.1698 318.956 75.9422 319.144 75.6293C319.298 75.3733 319.366 75.0888 319.423 74.8385C319.457 74.6792 319.491 74.5312 319.542 74.4231C319.559 74.3833 319.633 74.2866 319.685 74.2183C319.764 74.1102 319.861 73.9851 319.935 73.8485C320.1 73.5527 320.254 73.1999 320.407 72.8586C320.612 72.4034 320.822 71.9312 321.016 71.6581C321.13 71.5045 321.283 71.3452 321.443 71.1859C321.756 70.8673 322.114 70.5146 322.279 70.0082C322.552 69.1548 322.558 68.364 322.563 67.6016C322.569 66.8051 322.569 66.0485 322.899 65.2975C322.996 65.0756 323.161 64.8765 323.331 64.666C323.525 64.4327 323.724 64.1937 323.855 63.8865C324.168 63.1697 324.39 62.1342 324.515 61.3889C324.748 60.0348 324.657 58.9254 324.572 57.9469C324.509 57.2129 324.452 56.5188 324.526 55.7849C324.566 55.4151 324.617 55.0453 324.668 54.6926C324.771 53.9871 324.873 53.2589 324.862 52.5193C324.851 51.7171 324.72 50.9547 324.594 50.2151C324.418 49.1796 324.259 48.2067 324.395 47.1713L324.401 47.1258V47.0803C324.39 46.847 324.378 46.6024 324.361 46.3406C324.276 44.85 324.162 42.8133 324.566 41.1577C324.589 40.987 324.646 40.8106 324.708 40.6229Z" fill="#F0D5C0"/>
+<path d="M187.409 66.8901C190.635 67.8232 193.889 67.6241 197.132 66.9982C202.167 66.0254 206.275 63.2831 210.155 60.1142C210.434 59.8866 210.633 59.4883 211.105 59.5566C211.304 60.0573 210.98 60.4669 210.855 60.8879C210.542 61.9347 210.365 62.9816 210.445 64.0739C210.593 66.0595 211.941 67.4306 213.921 67.5842C215.639 67.7208 217.198 67.2656 218.615 66.2985C220.76 64.8363 221.903 62.6801 222.688 60.2962C226.586 48.3885 230.471 36.475 234.369 24.5673C234.824 23.1677 235.182 21.7568 235.029 20.2662C234.841 18.3944 233.652 17.1825 231.774 16.9379C229.601 16.6534 227.667 17.2224 225.914 18.5195C223.695 20.1637 222.649 22.5248 221.801 25.0452C219.417 32.1511 217.358 39.3652 214.644 46.3574C213.591 49.0712 212.288 51.6314 210.024 53.5714C207.054 56.1146 203.76 57.9295 199.721 57.8498C196.165 57.7815 194.361 55.8472 194.424 52.2857C194.458 50.3854 194.805 48.525 195.38 46.7272C197.735 39.3709 200.13 32.026 202.503 24.6754C202.941 23.3213 203.362 21.9559 203.288 20.5051C203.197 18.6333 202.07 17.3191 200.25 16.9493C198.042 16.4998 196.057 17.0289 194.236 18.3033C191.995 19.8679 190.959 22.2176 190.146 24.6981C187.995 31.275 185.822 37.8405 183.717 44.4287C182.454 48.3771 180.974 52.2629 180.514 56.4389C179.95 61.4625 182.533 65.4849 187.409 66.8901Z" fill="#C2C2FF"/>
+<path d="M111.916 26.2914C111.927 27.5317 112.178 28.7776 111.706 30.0065C111.45 42.4718 111.222 54.9371 110.903 67.4024C110.869 68.7622 111.011 69.2913 112.559 69.2344C116.331 69.1036 120.114 69.1149 123.886 69.2287C125.314 69.2742 125.548 68.785 125.508 67.5049C125.337 62.265 125.189 57.0194 125.178 51.7796C125.144 36.8736 125.047 21.9618 125.451 7.05582C125.491 5.61642 125.121 5.22386 123.67 5.25799C118.868 5.35471 114.067 5.32057 109.27 5.27506C108.303 5.26368 107.763 5.42867 107.592 6.50395C106.141 15.6581 103.268 24.5163 101.914 33.6875C101.544 36.1795 101.106 38.6657 100.691 41.1974C100.139 40.9471 100.23 40.5204 100.19 40.1734C98.859 28.789 95.8096 17.7461 93.6305 6.52671C93.4769 5.74158 93.2664 5.27506 92.3163 5.28075C86.553 5.31488 80.7954 5.3092 75.0322 5.29213C74.2812 5.29213 74.1219 5.51401 74.1446 6.29345C74.2641 9.74687 74.321 13.2003 74.3153 16.6537C74.2869 33.7387 74.2527 50.8295 74.1503 67.9145C74.1446 68.9499 74.2925 69.2287 75.3052 69.2173C78.7587 69.1718 82.2178 69.1548 85.6769 69.2287C86.8375 69.2515 87.0821 68.8134 87.0139 67.7836C86.8773 65.7412 86.7863 63.6987 86.7465 61.6562C86.5473 51.7454 86.7977 41.8233 86.2401 31.9125C85.8305 30.0122 85.8931 28.0892 85.9443 25.7851C86.4848 26.5816 86.809 27.0538 86.6042 27.7251C88.7491 41.4307 92.5268 54.7665 95.599 68.2672C95.7811 69.0523 96.2192 69.3425 96.9588 69.206C98.7623 68.8646 100.719 69.957 102.398 68.6143C102.512 68.5232 102.472 68.2502 102.512 68.0624C105.572 54.7608 109.225 41.59 111.319 28.0722C111.199 27.4008 111.376 26.8205 111.916 26.2914Z" fill="#C2E4F2"/>
+<path d="M21.3406 71.9197L3.12338 66.9416C1.79208 66.5832 0.460779 66.219 0.142177 65.5193C-0.244696 64.6943 0.244585 63.3004 0.580255 62.0715L17.2443 1.05355C17.6084 -0.277749 18.1375 -0.340332 22.4102 0.825979C27.2518 2.15159 27.7866 2.40192 27.3713 3.92097L13.2162 55.7336C12.8806 56.9625 12.3458 58.5498 12.8806 59.2098C13.2788 59.6251 14.3882 60.0234 15.3384 60.2908L23.787 62.5949C25.0159 62.9306 24.9818 63.4313 23.8951 67.4252C22.6491 71.971 22.4785 72.2327 21.3406 71.9197Z" fill="#BCE1D1"/>
+<path d="M270.928 5.61072C263.793 5.61072 256.426 8.58054 252.739 15.1233L251.669 7.15821H239.187V68.9784H254.048V43.7747C254.048 38.5405 253.928 32.123 256.067 27.2472C258.087 22.7299 261.535 19.4016 266.769 19.4016C274.614 19.4016 276.993 23.7995 276.993 31.0534V68.9784H291.853V27.7251C291.853 14.8843 284.121 5.61072 270.928 5.61072Z" fill="#007F76"/>
+<path d="M163.035 39.3596C164.463 39.7295 165.208 40.4748 165.947 41.1632C166.687 41.9028 167.375 42.9667 167.751 43.7063C168.121 44.7645 168.121 45.8796 168.121 46.9947C168.121 47.7343 168.121 48.7982 167.751 49.9076C167.381 50.6473 166.693 51.7112 165.947 52.4508C165.208 53.1904 164.519 53.8788 163.035 54.2543C162.295 54.6241 160.861 54.9939 159.376 54.9939H143.054V38.6712H159.376C160.861 38.6143 162.346 38.6143 163.035 39.3596ZM143.111 17.5809H157.63C160.173 17.5809 161.976 17.9507 163.086 19.3844C164.514 20.4995 164.889 22.2974 164.889 24.1009C164.889 25.9044 164.519 27.3893 163.086 28.8173C162.028 30.2454 160.173 30.6208 157.63 30.6208H143.111V17.5809ZM164.15 10.6912C162.346 9.95155 159.803 9.57605 157.26 9.57605H138.764C137.336 9.57605 136.591 9.94586 135.475 10.6912C134.736 11.4308 134.417 12.4947 134.417 13.9796V58.6009C134.417 59.716 134.787 60.7743 135.475 61.5139C136.591 62.5721 137.279 62.9419 138.764 62.9419H158.745C161.288 62.9419 163.831 62.5721 166.374 61.8837C168.547 61.1441 170.351 59.7103 171.83 58.5952C173.634 57.537 174.743 55.6823 175.488 53.8788C176.547 52.0753 176.916 50.2775 176.916 47.7343C176.916 44.8214 175.858 41.9028 174.373 39.3596C172.57 36.8165 170.396 35.013 167.114 34.2734C169.287 33.2152 170.715 31.3605 171.83 29.5569C173.258 27.3836 173.634 25.2103 173.634 22.6672C173.634 20.4939 173.264 19.0089 172.576 17.5809C171.836 15.7774 170.772 14.2925 169.287 13.2343C167.751 12.1192 166.323 11.061 164.15 10.6912Z" fill="#F0D5C0"/>
+<g clip-path="url(#clip0_827_1780)">
+<path d="M289.439 82H240.693H23V102H290V82H289.439Z" stroke="#333333" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M39.4355 87.6528C38.7921 86.7678 37.7627 86.2046 36.3955 86.3816C35.7843 86.1241 35.1087 86.0598 34.4331 86.3172C32.6316 86.9931 31.3287 88.2482 30.444 89.9379C29.3503 92.0137 30.0741 95.4413 32.3742 96.4711C32.4064 96.4872 32.4386 96.4872 32.4547 96.5033C32.6638 96.632 32.8729 96.7447 33.0981 96.8412C33.3876 97.3079 33.8219 97.6941 34.417 97.9194C35.9129 98.4826 37.7145 97.9838 38.8726 96.9056C39.6125 96.455 40.1594 95.747 40.4811 94.9263C41.2692 94.17 41.8 93.1079 41.9126 92.1264C42.1217 90.3241 41.2692 88.2804 39.4355 87.6528Z" fill="#333333"/>
+</g>
+<rect x="23" y="82" width="267" height="20" stroke="#333333" stroke-width="2"/>
+<defs>
+<clipPath id="clip0_827_1780">
+<rect x="23" y="82" width="267" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

themes/lumbung-theme/static/img/search.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="6" r="5" stroke="#333333" stroke-width="2"/>
+<line x1="10.4142" y1="10" x2="14" y2="13.5858" stroke="#333333" stroke-width="2" stroke-linecap="round"/>
+</svg>