found the culprit

Reviewed-on: #66

compose.yml

@@ -153,7 +153,7 @@ networks:
 
 configs:
   feeds_list:
-    name: beta_lumbung_space_feeds_list_v4
+    name: beta_lumbung_space_feeds_list_v8
     file: feeds_list.txt
   feeds_list_pen:
     name: beta_lumbung_space_feeds_list_pen_v2

config.toml

@@ -4,6 +4,7 @@ title = "lumbung.space"
 theme = "lumbung-theme"
 pluralizeListTitles = "false"
 paginate = 20
+hasCJKlanguage = "true"
 
 [params]
     logo = "/img/logo.svg"

content/shouts/pen.lumbung.space/harvesting-majelis-in-casco-art-institute-15th-16th-march-24/index.html

@@ -0,0 +1,17 @@
+---
+title: "Harvesting: Majelis in Casco Art Institute 15th & 16th March 24"
+date: "2024-04-18 07:39:51+00:00" #2021-06-10T10:46:33+02:00
+draft: false
+summary: ""
+contributors:  ["aline_crater"] 
+original_link: "https://pen.lumbung.space/2024/04/18/harvesting-majelis-in-casco-art-institute-15th-16th-march-24/"
+feed_name: "pen.lumbung.space"
+card_type: "pen"
+sources: ["pen.lumbung.space"]
+tags: ['majelis', 'documentafifteen', 'lumbung', 'lumbungdotspace', 'lumbungkios']
+
+---
+
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-2165" height="724" src="diagrama_2-1024x724.jpg" width="1024"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-2167" height="724" src="diagrama_3-1024x724.jpg" width="1024"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-2168" height="724" src="diagrama_1-1-1024x724.jpg" width="1024"/></figure>

content/shouts/pen.lumbung.space/harvesting-majelis-in-nieuwe-instituut-8th-march-24/index.html

@@ -0,0 +1,20 @@
+---
+title: "Harvesting: Majelis in Nieuwe Instituut 8th March 24"
+date: "2024-03-08 00:08:37+00:00" #2021-06-10T10:46:33+02:00
+draft: false
+summary: ""
+contributors:  ["dianoninoo"] 
+original_link: "https://pen.lumbung.space/2024/03/08/harvesting-majelis-in-nieuwe-instituut-8th-march-24/"
+feed_name: "pen.lumbung.space"
+card_type: "pen"
+sources: ["pen.lumbung.space"]
+tags: ['majelis', 'documentafifteen']
+
+---
+
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-2148" height="701" src="1_diana-cantarey_harvesting-rotterdam-1024x701.png" width="1024"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-2149" height="1024" src="2_diana-cantarey_harvesting-rotterdam-768x1024.png" width="768"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-2152" height="1024" src="3_diana-cantarey_harvesting-rotterdam-768x1024.png" width="768"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-2150" height="706" src="4_diana-cantarey_harvesting-rotterdam-1024x706.png" width="1024"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-2153" height="768" src="5_diana-cantarey_harvesting-rotterdam-1024x768.png" width="1024"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-2151" height="1024" src="6_diana-cantarey_harvesting-rotterdam-768x1024.png" width="768"/></figure>

content/shouts/test-post/index.html

@@ -0,0 +1,25 @@
+---
+title: "test-post"
+date: "2024-11-24" #2021-06-10T10:46:33+02:00
+draft: false
+summary: ""
+contributors:  ["cem"] 
+original_link: "https://pen.lumbung.space/timeline/majelis-akbar-harvest-by-community-immunity-january-2022/"
+feed_name: "pen.lumbung.space"
+sources: ["timeline", "pen.lumbung.space"]
+timelines: ['Community Immunity', 'drawing', 'Majelis Akbar']
+hidden: true
+---
+
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-12 is-layout-flex wp-block-gallery-is-layout-flex">
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-1130" src="doc15Jan26-1.tiff"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-1134" src="doc15Jan26-2.tiff"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-1133" src="doc15Jan26-3.tiff"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-1132" src="doc15Jan26-4.tiff"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-1137" src="doc15Jan26-5.tiff"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-1136" src="doc15Jan26-6.tiff"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-1135" src="doc15Jan26-7.tiff"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-1138" src="doc15Jan26-8.tiff"/></figure>
+<figure class="wp-block-image size-large"><img alt="" class="wp-image-1131" src="doc15Jan26-9.tiff"/></figure>
+</figure>
+<p></p>

data/geojsonContributors.json

@@ -5,7 +5,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [31.501803673432892, 34.46684826773766]
+        "coordinates": [34.46684826773766, 31.501803673432892]
       },
       "properties": {
         "groupName": "The Question of Funding"
@@ -422,7 +422,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [5.560014, -0.200965]
+        "coordinates": [-0.200965, 5.560014]
       },
       "properties": {
         "groupName": "Nubuke Foundation - Arts Collaboratory"
@@ -442,7 +442,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [33.897204, 35.513829]
+        "coordinates": [35.513829, 33.897204]
       },
       "properties": {
         "groupName": "Temporary Art Platform - Arts Collaboratory"
@@ -462,7 +462,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [4.635649, -74.087834]
+        "coordinates": [-74.087834, 4.635649]
       },
       "properties": {
         "groupName": "Lugar a Dudas - Arts Collaboratory"
@@ -472,7 +472,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [3.451646, -76.549099]
+        "coordinates": [-76.549099, 3.451646]
       },
       "properties": {
         "groupName": "Helena Producciones - Arts Collaboratory"
@@ -482,7 +482,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [-33.940484, 18.463735]
+        "coordinates": [18.463735, -33.940484]
       },
       "properties": {
         "groupName": "Gugulective - Arts Collaboratory"
@@ -502,7 +502,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [14.624033, -90.516175]
+        "coordinates": [-90.516175, 14.624033]
       },
       "properties": {
         "groupName": "La Torana - Arts Collaboratory"
@@ -512,7 +512,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [-6.218968, 106.832686]
+        "coordinates": [106.832686, -6.218968]
       },
       "properties": {
         "groupName": "ruangrupa"
@@ -522,7 +522,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [-26.204103, 28.047305]
+        "coordinates": [28.047305, -26.204103]
       },
       "properties": {
         "groupName": "Keleketla! Library - Arts Collaboratory",
@@ -534,7 +534,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [24.861462, 67.063473]
+        "coordinates": [67.063473, 24.861462]
       },
       "properties": {
         "groupName": "Vasl Artists' Association - Arts Collaboratory"
@@ -544,7 +544,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [6.453060, 3.379206]
+        "coordinates": [3.379206, 6.453060]
       },
       "properties": {
         "groupName": "Video Art Network Lagos - Arts Collaboratory"
@@ -554,7 +554,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [-16.507456, -68.122441]
+        "coordinates": [-68.122441, -16.507456]
       },
       "properties": {
         "groupName": "Casa Tres Patios - Arts Collaboratory"
@@ -564,7 +564,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [-12.046374, -77.033966]
+        "coordinates": [-77.033966, -12.046374]
       },
       "properties": {
         "groupName": "Bisagra - Arts Collaboratory"
@@ -574,7 +574,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [14.565859, 121.028812]
+        "coordinates": [121.028812, 14.565859]
       },
       "properties": {
         "groupName": "Green Papaya Art Projects - Arts Collaboratory"
@@ -584,7 +584,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [-25.965053, 32.570926]
+        "coordinates": [32.570926, -25.965053]
       },
       "properties": {
         "groupName": "Nucleo de Arte - Arts Collaboratory"
@@ -594,7 +594,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [19.433735, -99.127662]
+        "coordinates": [-99.127662, 19.433735]
       },
       "properties": {
         "groupName": "Casa Gallina - Arts Collaboratory"
@@ -604,7 +604,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [-34.905134, -56.168350]
+        "coordinates": [-56.168350, -34.905134]
       },
       "properties": {
         "groupName": "Espacio de Arte Contemporáneo - Arts Collaboratory"
@@ -614,7 +614,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [18.964700, 72.825833]
+        "coordinates": [72.825833, 18.964700]
       },
       "properties": {
         "groupName": "Clark House Initiative - Arts Collaboratory"
@@ -624,7 +624,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [11.5636628, 104.9165275]
+        "coordinates": [104.9165275, 11.5636628]
       },
       "properties": {
         "groupName": "SA SA BASSAC - Arts Collaboratory"
@@ -654,7 +654,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [-33.447503, -70.648204]
+        "coordinates": [-70.648204, -33.447503]
       },
       "properties": {
         "groupName": "Metales Pesados - Arts Collaboratory"
@@ -664,7 +664,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [-23.5351122, -46.6523816]
+        "coordinates": [-46.6523816, -23.5351122]
       },
       "properties": {
         "groupName": "Casa do Povo - Arts Collaboratory"
@@ -684,7 +684,7 @@
       "type": "Feature",
       "geometry": {
         "type": "Point",
-        "coordinates": [-7.7830803, 110.3661793]
+        "coordinates": [110.3661793, -7.7830803]
       },
       "properties": {
         "groupName": "KUNCI Cultural Studies Center - Arts Collaboratory"

feeds_list.txt

@@ -12,3 +12,6 @@ https://ruangrupa.id/feed/
 https://wajukuuarts.wordpress.com/feed/
 https://www.masartemasaccion.org/feed/?lang=en
 https://www.ruralschoolofeconomics.info/rss.xml
+https://riwanua.id/feed/
+https://zapier.com/engine/rss/9657521/balik
+

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

@@ -22,6 +22,9 @@
                   {{- partial "partials/shout_card.html" . -}}
                 {{ end }}
 
+            {{ else if in .Params.sources "pen.lumbung.space" }}
+                  {{- partial "partials/pen_card.html" . -}}
+
             {{ else if eq .Section "social" }}
               {{- partial "partials/social_card.html" . -}}
 

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

@@ -2,13 +2,11 @@
     <main class="main single">
       <article class="h-entry">
       <header>
-        <h1 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h1>
-        <p>
-          Published by <a class="p-author" href="/about">{{ $.Param "author" }}</a>
-          on <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
-        </p>
-
+        <h1 class="p-name single"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h1>
+        <div class="metadata"><span class="from p-author">{{ if .Params.contributors }}By <b>{{range .Params.contributors}} <a href='{{ "/contributors/" | relLangURL }}{{ . | urlize }}/'> {{ . }},</a> {{ end }}</b>{{ end }} {{with .Params.original_link }}originally posted on <b><a href="{{ . }}">{{ end }}{{ .Params.feed_name }}</a></b> on <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time></span></div>
+      </header>
       <div class="e-content">
+        {{with .Params.featured_image}}<img src="{{.}}"></img>{{end}}
         {{ .Content }}
       </div>
       </article>

themes/lumbung-theme/layouts/index.html

@@ -23,6 +23,16 @@
                   {{- partial "partials/shout_card.html" . -}}
                 {{ end }}
 
+            {{ else if eq .Section "pen" }}
+                {{ if in .Params.sources "pen.lumbung.space" }}
+                  {{- partial "partials/pen_card.html" . -}}
+                {{ end }}
+
+            {{ else if eq .Section "timeline"}}
+                {{ if in .Params.sources "pen.lumbung.space" }}
+                  {{- partial "partials/pen_card.html" . -}}
+                {{ end }}
+
             {{ else if eq .Section "social" }}
               {{- partial "partials/social_card.html" . -}}
 

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

@@ -25,7 +25,7 @@
             <li><a href="/publishers/">publishers</a></li>
             <li class="has-submenu">ekonomi
                 <ul class="submenu">
-                    {{/*  <li><a href="/tags/lumbungkiosproducts/">kios</a></li>  */}}
+                    <li><a href="/tags/lumbungkiosproducts/">kios</a></li>
                     <li><a href="/tags/lumbunggallery/">gallery</a></li>
                 </ul>
             </li>

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

@@ -1,14 +1,14 @@
     <div class='pen card {{ .Params.feed_name }} filter-item' data-section="{{ .Section }}" data-sources='{{- partial "data/sources.html" . -}}' data-contributors='{{- partial "data/contributors.html" . -}}' data-tags='{{- partial "data/tags.html" . -}}'>
       <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>
+        <div class="pen-source"><span class="from p-author">From {{ if .Params.author }}<b>{{.Params.author}}</b> at {{ end }}<a href="{{ "/sources/" | 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}}
@@ -24,7 +24,19 @@
               {{ .Summary }}
             </div>
           </div>
-          
+          <small>this should show the first image in the content</small>
+          {{$first_image := ""}}
+          {{$matches := findRESubmatch `<img\s.*?src=(?:'|")([^'">]+)(?:'|")` .Content 1 }}
+          {{range $matches}}{{$first_image = index . 1}}{{end}}
+            {{with .Resources.Get $first_image}}
+              {{if .ResourceType}}
+              {{.ResourceType}}
+              {{.MediaType}}
+              <img src="{{ .Permalink }}" alt="">
+              {{/* uncomment below to crash the build*/}}
+              {{.Width}}
+              {{end}}
+              {{end}}
           <footer class='post-footer'>
             <a href="{{ .RelPermalink }}">
               <svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">

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

@@ -19,7 +19,8 @@
         </div>
       {{end}}
     {{ else if (.Resources.ByType "image") }}
-      {{ with (index (.Resources.ByType "image") 0) }}
+      {{/* Somehow the image resources are iterated in reverse, so we need to get the last one*/}}
+      {{ range last 1 (.Resources.ByType "image") }}
         {{ $img := . }}
         {{ $height := add .Height 0.0}}
         {{ $ratio := div $height .Width}}

themes/lumbung-theme/layouts/shortcodes/kios_map.html

@@ -1,8 +1,15 @@
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
-  integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
+  integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
+  crossorigin=""
+/>
 
-<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
-  integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
+<script
+  src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
+  integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
+  crossorigin=""
+></script>
 
 <div id="map"></div>
 
@@ -12,6 +19,11 @@
     padding-bottom: 70%;
     margin-bottom: 80px;
   }
+
+  .black-dot {
+    background-color: black;
+    border-radius: 50%;
+  }
 </style>
 
 <script>
@@ -20,21 +32,33 @@
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
   });
 
+
+  var blackDotIcon = L.divIcon({
+    className: 'black-dot',
+    iconSize: [20, 20],
+    iconAnchor: [10, 10]
+  });
+
+
   // Create makers layer group
   var makers = L.layerGroup();
   {{ with getJSON "https://kios-admin.lumbung.space/api/makers"}}
     {{ range .docs }}
-      var makerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }}));
+    var makerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }}), {
+      icon: blackDotIcon  
+    });
       makerMarker.bindPopup({{ .name }})
       makers.addLayer(makerMarker);
     {{ end }}
   {{ end }}
-  
+
   // Create retailers layer group
   var retailers = L.layerGroup();
   {{ with getJSON "https://kios-admin.lumbung.space/api/retailers"}}
     {{ range .docs }}
-      var retailerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }}));
+      var retailerMarker = L.marker(L.GeoJSON.coordsToLatLng({{ .location }}), {
+        icon: blackDotIcon  
+      });
       retailerMarker.bindPopup({{ .name }})
       retailers.addLayer(retailerMarker);
     {{ end }}
@@ -45,11 +69,11 @@
   {{ with getJSON "https://kios-admin.lumbung.space/api/dispatches"}}
     {{ range .docs }}
       var start = L.GeoJSON.coordsToLatLng({{ .startingPoint.location }});
-      var startMarker = L.marker(start);
+      var startMarker = L.marker(start, {icon: blackDotIcon});
       startMarker.bindPopup({{ .startingPoint.name }});
 
       var end = L.GeoJSON.coordsToLatLng({{ .endPoint.location }});
-      var endMarker = L.marker(end);
+      var endMarker = L.marker(end, {icon: blackDotIcon});
       endMarker.bindPopup({{ .endPoint.name }});
 
       // Add line to display dispatch route
@@ -62,9 +86,9 @@
       productsList.forEach((product, i) => productsString = productsString + product.productTitle + (i + 1 < productsList.length ? ', ' : ""));
 
       route.bindPopup(
-         '<p>Origin: <strong>' + {{ .startingPoint.name }} + '</strong><br />' + 
-         'Destination: <strong>' + {{ .endPoint.name }} + '</strong><br />' + 
-         'Courier: <strong>' + {{ .courier.name }} + '</strong><br />' + 
+         '<p>Origin: <strong>' + {{ .startingPoint.name }} + '</strong><br />' +
+         'Destination: <strong>' + {{ .endPoint.name }} + '</strong><br />' +
+         'Courier: <strong>' + {{ .courier.name }} + '</strong><br />' +
          'Products: <strong>' + productsString + '</strong><br />' +
          'Status: <strong>' + {{ .status }} + '</strong></p>');
 
@@ -75,19 +99,19 @@
   {{ end }}
 
   var map = L.map('map', {
-    center: [0, 0],
-    zoom: 2,
+    center: [-6.1815, 106.8228],
+    zoom: 3,
     layers: [osm, dispatches]
   });
-  
+
   var overlayMaps = {
     "Dispatches": dispatches,
     "Makers": makers,
     "Retailers": retailers
   };
-  
+
   var layerControl = L.control.layers(overlayMaps, null, {collapsed: false, position: "topleft"}).addTo(map);
   window.addEventListener('load', (event) => {
     map.invalidateSize();
   });
-</script>
+</script>

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

@@ -86,6 +86,7 @@ a {
 
 .container .single {
     max-width: 65ch;
+    margin: auto;
 }
 
 .card {
@@ -555,11 +556,11 @@ footer.post-footer {
 }
 
 .shout .p-summary.portrait {
-    /* flex-direction: row; */
+    flex-direction: column; 
 }
 
-.shout .p-summary.landscape {
-    flex-direction: column;
+.shout .p-summary.landscape 
+{    flex-direction: column;
 }
 
 .shout .summary-image > img {
@@ -1011,10 +1012,10 @@ label:hover {
     display: flex;
 }
 
-/* publishers map */
+/* leaflet map */
 #map {
     margin-top: 2rem;
-    margin-bottom: 4rem;
+    margin-bottom: 4rem !important;
 
     /* makes map "break out of container" and take full-width */
     width: 100vw !important;
@@ -1942,6 +1943,10 @@ input:checked + label + .description {
     height: auto;
 }
 
+.single header{
+    margin:0;
+}
+
 .single .h-entry figure{
     margin: 0 0 20px;
 }
@@ -1950,6 +1955,27 @@ input:checked + label + .description {
     margin: 0;
 }
 
+.single h1 {
+  padding: 0.5rem;
+  background: #fff;
+  width:100%;
+}
+
+.e-content{
+    padding:1em;
+}
+
+.single .metadata{
+   border: 2px solid #333;
+  font-size: 14px;
+  padding: 0.5rem;
+  align-items: center;
+  background: #e8e8e8;
+  position:relative;
+  width:calc(100% + 2em);
+  right:1em;
+}
+
 /* lumbung radio player widget  */
 .lumbung-radio-player {
     display: flex;