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,7 +19,6 @@
     line-height: 1em;
     flex: 1 1 100%;
   }
-
   p {
     flex: 1 1 100%;
     font-size: .6em;
@@ -30,16 +29,26 @@
       font-size: 1.25em;
     }
   }
-  date {
+  @media screen and (max-width: 1024px) {
-   font-size: .5em;
+    h2 {
+      font-size: 8em;
+    }
+    p {
+      font-size: .9em;
+      max-width: unset;
+    }
+      strong {
+        font-size: 1.5em;
+    }
   }
+
+
   figure {
-    padding: 20px;
+    padding: 4px;
     margin: auto;
-    height: 75vh;
+
-    display: flex;
+
-    flex-wrap: wrap;
+
-    align-content: start;
     border-style: double;
     border-color: purple;
     border-width: 10px;
@@ -47,99 +56,58 @@
     img {
       width: 100%;
       object-fit: cover;
-      height: 250px;
+      border-style: double;
+      border-color: purple;
+      border-width: 10px;
+      max-height: 300px;
     }
 
-    figcaption {
-      margin-top: 20px;
-      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;
-
-
-      }
-    }
   }
+  figcaption {
+    font-family: Outward, 'Arial', 'Helvetica', sans-serif;
+    font-size: 9em;
+    line-height: 0.3em;
 
-
+    font-weight: bold;
-
+/*    font-style: italic;*/
-
+    background-color: black;
-  @media screen and (max-width: 1024px) {
+    color: white;
-    h2 {
+    padding: 20px;
-      font-size: 8em;
+    text-align: center;
-    }
+    border-style: double;
-    p {
+    border-color: purple;
-      font-size: .9em;
+    border-width: 10px;
-      max-width: unset !important;
+    color: orange;
-
+    z-index: 100;
-      strong {
+    position: relative;
-        font-size: 1.5em;
+    text-decoration: none;
-      }
+    margin-bottom: 4px;
-    }
+    text-transform: lowercase;
+ }
+ @media screen and (max-width: 1024px) {
     figcaption {
-      font-size: .9em;
+      font-size: 7em;
-      p { font-size: .9em;}
+        line-height: 0.35em;
-      date {
-        font-size: .7em;
-      }
     }
   }
 }
 
-
-
 </style>
 
 <section id="gancio">
   <article class="section-headers">
     <h2>Agenda</h2>
-    <p><strong>Outernational events</strong> <br />
+    <p><strong>Outnernational 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>
 
- {{ $data := dict }}
+  <div >
-  {{ $url := "https://do.basspistol.org/api/events" }}
+    <script src="https://do.basspistol.org/gancio-events.es.js"></script>
-
+    <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>