make agenda follow the style

themes/basspistol2025/layouts/partials/body/gancio.html

@@ -6,12 +6,12 @@
   justify-content: space-between;
 
   a {
-
+    flex: 1 1 300px;
+    text-decoration: none;
   }
   article {
     margin:2px;
     flex: 1 1 300px;
-
   }
   h2 {
     font-size: 12em;
@@ -19,6 +19,7 @@
     line-height: 1em;
     flex: 1 1 100%;
   }
+
   p {
     flex: 1 1 100%;
     font-size: .6em;
@@ -29,26 +30,16 @@
       font-size: 1.25em;
     }
   }
-  @media screen and (max-width: 1024px) {
+  date {
-    h2 {
+   font-size: .5em;
-      font-size: 8em;
-    }
-    p {
-      font-size: .9em;
-      max-width: unset;
-    }
-      strong {
-        font-size: 1.5em;
-    }
   }
-
-
   figure {
-    padding: 4px;
+    padding: 20px;
     margin: auto;
-
+    height: 75vh;
-
+    display: flex;
-
+    flex-wrap: wrap;
+    align-content: start;
     border-style: double;
     border-color: purple;
     border-width: 10px;
@@ -56,58 +47,99 @@
     img {
       width: 100%;
       object-fit: cover;
-      border-style: double;
+      height: 250px;
-      border-color: purple;
-      border-width: 10px;
-      max-height: 300px;
     }
 
-
-  }
-  figcaption {
-    font-family: Outward, 'Arial', 'Helvetica', sans-serif;
-    font-size: 9em;
-    line-height: 0.3em;
-
-    font-weight: bold;
-/*    font-style: italic;*/
-    background-color: black;
-    color: white;
-    padding: 20px;
-    text-align: center;
-    border-style: double;
-    border-color: purple;
-    border-width: 10px;
-    color: orange;
-    z-index: 100;
-    position: relative;
-    text-decoration: none;
-    margin-bottom: 4px;
-    text-transform: lowercase;
- }
- @media screen and (max-width: 1024px) {
     figcaption {
-      font-size: 7em;
+      margin-top: 20px;
-        line-height: 0.35em;
+      font-size: 0.9em;
+      h4 {
+        font-family: Sigoil,Space-Grotesk,arial,helvetica,sans-serif;
+        text-transform: uppercase;
+      }
+      p {
+        flex: 1 1 100%;
+
+        max-width: 33vw;
+
+
+      }
+    }
+  }
+
+
+
+
+  @media screen and (max-width: 1024px) {
+    h2 {
+      font-size: 8em;
+    }
+    p {
+      font-size: .9em;
+      max-width: unset !important;
+
+      strong {
+        font-size: 1.5em;
+      }
+    }
+    figcaption {
+      font-size: .9em;
+      p { font-size: .9em;}
+      date {
+        font-size: .7em;
+      }
     }
   }
 }
 
+
+
 </style>
 
 <section id="gancio">
   <article class="section-headers">
     <h2>Agenda</h2>
-    <p><strong>Outnernational events</strong> <br />
+    <p><strong>Outernational events</strong> <br />
     Through the power of federation, we aggregate event data from the deep-web to keep you in the loop of what's happening below the radars.
     <br /><br />
     Want your event featured here? <a href="https://do.basspistol.org/add" target="_blank">Head over to this page</a>. No account required.</p>
+    <a class="button" href="https://do.basspistol.org/">Full agenda 🗓️</a>
   </article>
 
-  <div >
+ {{ $data := dict }}
-    <script src="https://do.basspistol.org/gancio-events.es.js"></script>
+  {{ $url := "https://do.basspistol.org/api/events" }}
-    <gancio-events baseurl="https://do.basspistol.org" collection="Music" show_recurrent="true" maxlength=7 sidebar="false" theme="dark"></gancio-events>
+
+     {{ with try (resources.GetRemote $url) }}
+    {{ with .Err }}
+      {{ errorf "%s" . }}
+    {{ else with .Value }}
+      {{ $data = .Content | transform.Unmarshal }}
+    {{ else }}
+      {{ errorf "Unable to get remote resource %q" $url }}
+    {{ end }}
+  {{ end }}
+
+  {{ with $data }}
+  {{ range . | first 7 }}
+
+  <a href="https://do.basspistol.org/event/{{ .slug }}">
+  <article>
+    <figure>
+      {{ range .media }}<img src="https://do.basspistol.org/media/thumb/{{ .url }}" />{{ end }}
+      <figcaption>
+        <date>{{ .start_datetime | int | dateFormat "2006-01-02 15:04 CET" }}</date>
+        <h4>{{ .title }}</h4>
+        <p><b>Organizer:</b> {{ .place.name }}</p>
+        <p>{{ .place.address }}</p>
+        <!--    <p>{{ range .tags }}#{{ . }} {{ end }}</p>-->
+      </figcaption>
+    </figure>
+  </article>
+  </a>
+  {{ end }}
+<!--  <pre>{{ debug.Dump $data }}</pre>-->
+  {{ end }}
+
 
-  </div>
   <article class="section-footers"></article>
 </section>