From b137e873f87d45f56ee3f112c53af78de743892c Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Sat, 3 Feb 2024 00:31:06 +0100
Subject: [PATCH] Add div wrapper

---
 src/Eventindex.ce.vue | 41 +++++++++++++++++++++++------------------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/Eventindex.ce.vue b/src/Eventindex.ce.vue
index 0f5d093..7b48f3e 100644
--- a/src/Eventindex.ce.vue
+++ b/src/Eventindex.ce.vue
@@ -1,24 +1,29 @@
 <template>
-  <div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fit,minmax(280px,max-content))] font-nunito justify-center">
-    <a v-for="(event, index) in events" :key="index" href="#" @click.prevent="makeVisible(event)"
-      class="relative top-0 transition-all duration-200 hover:top-[-10px] shadow-lg hover:shadow-2xl rounded-lg bg-white flex flex-col overflow-hidden group max-w-[400px]">
-      <img :src="event.image"
-        class="flex-none w-full h-auto transition-all transition-linear duration-200 [clip-path:circle(200%_at_50%_-90%)] group-hover:[clip-path:circle(200%_at_50%_-102%)]" />
-      <div class="p-6 flex flex-col grow">
-        <h2 class="font-arvo flex-none text-primary text-sm md:text-base" v-text="event.name"></h2>
-        <div class="flex items-baseline text-sm">
-          <calendar-icon class="w-3 h-3 text-secondary"></calendar-icon>
-          <span class="text-sm font-semibold text-gray-800 ml-2" v-text="event.dates"></span>
+  <div>
+    <div
+      class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fit,minmax(280px,max-content))] font-nunito justify-center">
+      <a v-for="(event, index) in events" :key="index" href="#" @click.prevent="makeVisible(event)"
+        class="relative top-0 transition-all duration-200 hover:top-[-10px] shadow-lg hover:shadow-2xl rounded-lg bg-white flex flex-col overflow-hidden group max-w-[400px]">
+        <img :src="event.image"
+          class="flex-none w-full h-auto transition-all transition-linear duration-200 [clip-path:circle(200%_at_50%_-90%)] group-hover:[clip-path:circle(200%_at_50%_-102%)]" />
+        <div class="p-6 flex flex-col grow">
+          <h2 class="font-arvo flex-none text-primary text-sm md:text-base" v-text="event.name"></h2>
+          <div class="flex items-baseline text-sm">
+            <calendar-icon class="w-3 h-3 text-secondary"></calendar-icon>
+            <span class="text-sm font-semibold text-gray-800 ml-2" v-text="event.dates"></span>
+          </div>
+          <div class="grow text-sm leading-normal text-gray-800 mt-3" v-text="event.excerpt"></div>
+          <div
+            class="bg-primaryfg text-primary focus:ring-2 text-font rounded-lg text-xs sm:text-sm py-1 text-center mt-3">
+            Zur Veranstaltung
+          </div>
         </div>
-        <div class="grow text-sm leading-normal text-gray-800 mt-3" v-text="event.excerpt"></div>
-        <div class="bg-primaryfg text-primary focus:ring-2 text-font rounded-lg text-xs sm:text-sm py-1 text-center mt-3">
-          Zur Veranstaltung
-        </div>
-      </div>
-    </a>
-  </div>
+      </a>
+    </div>
 
-  <popup v-if="visibleEvent !== null" :event="visibleEvent" :register-url="props.registerUrl" @close="hideEvent"></popup>
+    <popup v-if="visibleEvent !== null" :event="visibleEvent" :register-url="props.registerUrl" @close="hideEvent">
+    </popup>
+  </div>
 </template>
 
 <script setup>