Remove redundant event timing and reservation details from index.astro

- Swapped event titles, dates, and images for better accuracy.
- Replaced `kevin_mcflannigan.png` with `Event4.png`.
- Updated `Menu.pdf`.

src/components/Drinks.astro

@@ -6,20 +6,26 @@ const { id } = Astro.props;
 <section id={id} class="Drinks">
     <h2 class="title">Drinks</h2>
 
-    <a href="/pdf/Menu.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>
+    <p class="note">
+        Ob ein frisch gezapftes Pint, ein edler Tropfen Whiskey oder ein gemütliches Glas Wein – hier kannst du in entspannter
+        Atmosphäre das Leben genießen. Natürlich dürfen auch Cocktails nicht fehlen. Vieles kreieren wir auch selber - Sláinte!
+    </p>
+
+    <a href="/pdf/Getraenke_Gallus_2025.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>
 
     <h3 class="monats-hit">Monats Hit</h3>
 
     <div class="mate-vodka">
         <div class="circle" title="Mate Vodka">
             <img src="/images/MonthlyHit.png" alt="Monats Hit" class="circle-image" />
-            <span class="circle-label">Mate Vodka</span>
+            <span class="circle-label"></span>
         </div>
         <div>Mate Vodka</div>
     </div>
 
-    <p class="note">Ob ein frisch gezapftes Pint, ein edler Tropfen Whiskey oder ein gemütliches Glas Wein – hier kannst du in entspannter
+    <p class="note">
-        Atmosphäre das Leben genießen. Natürlich dürfen auch Cocktails nicht fehlen. Vieles kreieren wir auch selber - Sláinte!</p>
+        Für Whisky-Liebhaber haben wir erlesene Sorten aus Schottland und Irland im Angebot.
+    </p>
 
     <div class="circle-row">
         <div class="circle whiskey-circle" title="Whiskey 1">

src/components/HoverCard.astro

@@ -1,5 +1,4 @@
 ---
-// src/components/HoverCard.astro
 import "../styles/components/HoverCard.css";
 const {title, description, image = "", date} = Astro.props;
 ---
@@ -21,12 +20,29 @@ const {title, description, image = "", date} = Astro.props;
 		const hoverCards = document.querySelectorAll('.hover-card');
 		
 		hoverCards.forEach(card => {
-			card.addEventListener('click', () => {
+			card.addEventListener('click', (e) => {
 				// Only toggle on mobile devices
 				if (window.innerWidth <= 768) {
+					e.preventDefault();
+					
+					// Close all other active cards first
+					hoverCards.forEach(otherCard => {
+						if (otherCard !== card) {
+							otherCard.classList.remove('active');
+						}
+					});
+					
+					// Toggle current card
 					card.classList.toggle('active');
 				}
 			});
+
+			// Close card when clicking outside (mobile only)
+			document.addEventListener('click', (e) => {
+				if (window.innerWidth <= 768 && !card.contains(e.target)) {
+					card.classList.remove('active');
+				}
+			});
 		});
 	});
 </script>

src/pages/index.astro

@@ -1,5 +1,4 @@
 ---
-// src/pages/index.astro
 import Layout from "../components/Layout.astro";
 import Hero from "../components/Hero.astro";
 import Welcome from "../components/Welcome.astro";
@@ -31,57 +30,52 @@ const events = [
 			*zum mitmachen minimum 1 Getränk konsumieren oder 5CHF
 		`,
 	},
-	{
-		image: "/images/Event1.png",
-		title: "Crepes Sucette <br /> Live Music im Gallus Pub!",
-		date: "Do, 04. September 2025",
-		description: `
-			<b>20:00 Uhr</b> <br>
-			<a href="Metzgergasse 13, 9000 St. Gallen">Metzgergasse 13, 9000 St. Gallen</a> <br>
-			Erlebt einen musikalischen Abend mit der Band <b>Crepes Sucette</b> <br>
-			Jetzt reservieren: <a href="tel:+41772322770">077 232 27 70</a>`,
-	},
     {
         image: "/images/Event3.png",
-		title: "Karaoke",
+        title: "Karaoke tes",
         date: "Mittwoch - Samstag",
         description: `
-			Bei uns gibt es Karaoke Mi-Sa!! <br>
-			Seid ihr eine Gruppe und lieber unter euch? ..unseren 2.Stock kannst du auch mieten ;) <br>
-			Reserviere am besten gleich per Whatsapp <a href="tel:+41772322770">077 232 27 70</a>
 		`,
     },
     {
         image: "/images/Event2.png",
-		title: "Karaoke",
+        title: "Karaoke test",
         date: "Mittwoch - Samstag",
         description: `
-			Bei uns gibt es Karaoke Mi-Sa!! <br>
-			Seid ihr eine Gruppe und lieber unter euch? ..unseren 2.Stock kannst du auch mieten ;) <br>
-			Reserviere am besten gleich per Whatsapp <a href="tel:+41772322770">077 232 27 70</a>
 		`,
     },
     {
-		image: "/images/kevin_mcflannigan.png",
+        image: "/images/Event1.png",
+        title: "Crepes Sucette <br /> Live Music im Gallus Pub!",
+        date: "Do, 04. September 2025",
+        description: `
+			<b>ab 19 Uhr geht’s los, bis max. 21.30 Uhr</b> <br>
+            Kosten? CHF 10 pro Spielgast
+			Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
+		`,
+    },
+    {
+        image: "/images/Event4.png",
         title: "Kevin McFlannigan <br> Live Music im Gallus Pub!",
         date: "Sa, 27. September 2025",
         description: `
 			<b>ab 20:00 Uhr</b> <br>
-			Singer & Songwriter Kevin McFlannigan <br>
 			Eintritt ist Frei / Hutkollekte <br>
+			Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
 		`,
     },
 ];
 
 const images = [
+	{ src: "/images/Gallery7.png", alt: "Siebtes Bild" },
+	{ src: "/images/Gallery8.png", alt: "Achtes Bild" },
+	{ src: "/images/Gallery9.png", alt: "Neuntes Bild" },
+	{ src: "/images/Gallery6.png", alt: "Sechstes Bild" },
 	{ src: "/images/Gallery1.png", alt: "Erstes Bild" },
 	{ src: "/images/Gallery2.png", alt: "Zweites Bild" },
 	{ src: "/images/Gallery3.png", alt: "Drittes Bild" },
 	{ src: "/images/Gallery4.png", alt: "Viertes Bild" },
 	{ src: "/images/Gallery5.png", alt: "Fünftes Bild" },
-	{ src: "/images/Gallery6.png", alt: "Sechstes Bild" },
-	{ src: "/images/Gallery7.png", alt: "Siebtes Bild" },
-	{ src: "/images/Gallery8.png", alt: "Achtes Bild" },
 ];
 ---
 

src/styles/components/Drinks.css

@@ -15,7 +15,7 @@
 
 .title {
   font-size: var(--font-size-large);
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.5rem;
   font-weight: bold;
   color: var(--color-text);
   text-transform: uppercase;
@@ -25,6 +25,7 @@
 .card-link {
   border: 2px solid var(--color-accent-beige);
   padding: 0.75rem 1.5rem;
+  margin-top: 2.5rem;
   margin-bottom: 2.5rem;
   color: var(--color-text);
   background-color: var(--color-background);
@@ -80,8 +81,8 @@
 }
 
 .circle {
-  height: 12em;
+  height: 35vh;
-  width: 12em;
+  width: 35vh;
   border: 2px solid var(--color-accent-beige);
   border-radius: 50%;
   margin: 0.5rem;
@@ -128,11 +129,6 @@
   z-index: 1;
 }
 
-.whiskey-circle {
-  height: 20em;
-  width: 20em;
-}
-
 .circle-row {
   display: flex;
   justify-content: center;
@@ -167,15 +163,6 @@
     width: 90%;
   }
 
-  .circle {
-    height: 5em;
-    width: 5em;
-  }
-  
-  .whiskey-circle {
-    height: 7em;
-    width: 7em;
-  }
 
   .circle-label {
     font-size: 0.7rem;
@@ -212,11 +199,6 @@
     margin: 1rem 0;
   }
 
-  .whiskey-circle {
-    height: 6em;
-    width: 6em;
-  }
-
   .mate-vodka {
     padding: 0.8rem;
   }

src/styles/components/HoverCard.css

@@ -12,10 +12,21 @@
 	flex-direction: column;
 }
 
+/* Hover effects only for devices that support hover */
+@media (hover: hover) and (pointer: fine) {
 	.hover-card:hover {
 		transform: translateY(-5px);
 	}
 
+	.hover-card:hover .hover-text {
+		opacity: 1;
+	}
+
+	.hover-card:hover .card-image {
+		opacity: 0.1;
+	}
+}
+
 .card-title {
 	padding: 15px 15px 5px 15px;
 	margin: 0;
@@ -93,15 +104,7 @@
 	scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
 }
 
-.hover-card:hover .hover-text {
+/* Active state for mobile tap functionality */
-	opacity: 1;
-}
-
-.hover-card:hover .card-image {
-	opacity: 0.1;
-}
-
-/* Active state for mobile click functionality */
 .hover-card.active .hover-text {
 	opacity: 1;
 }
@@ -122,5 +125,31 @@
 		/* Maintain square aspect ratio */
 		aspect-ratio: 1 / 1;
 		height: auto;
+		/* Add cursor pointer to indicate it's clickable */
+		cursor: pointer;
+	}
+
+	/* Add visual feedback for tap */
+	.hover-card:active {
+		transform: scale(0.98);
+	}
+
+	.hover-card::after {
+		position: absolute;
+		bottom: 10px;
+		right: 10px;
+		background-color: rgba(0, 0, 0, 0.7);
+		color: var(--color-accent-beige);
+		font-size: 0.7rem;
+		padding: 4px 8px;
+		border-radius: 12px;
+		opacity: 0.8;
+		pointer-events: none;
+		z-index: 10;
+	}
+
+	/* Hide the hint when card is active */
+	.hover-card.active::after {
+		display: none;
 	}
 }