diff --git a/public/images/crepes_sucette.jpg b/public/images/crepes_sucette.jpg
new file mode 100644
index 0000000..90b5edf
Binary files /dev/null and b/public/images/crepes_sucette.jpg differ
diff --git a/public/images/karaoke.jpg b/public/images/karaoke.jpg
new file mode 100644
index 0000000..aaa6441
Binary files /dev/null and b/public/images/karaoke.jpg differ
diff --git a/public/images/pub_quiz.jpg b/public/images/pub_quiz.jpg
new file mode 100644
index 0000000..5c9f055
Binary files /dev/null and b/public/images/pub_quiz.jpg differ
diff --git a/src/components/EventsGrid.astro b/src/components/EventsGrid.astro
index e2a90a9..2557c4a 100644
--- a/src/components/EventsGrid.astro
+++ b/src/components/EventsGrid.astro
@@ -3,26 +3,28 @@
import HoverCard from "./HoverCard.astro";
interface Event {
- image: string;
- title: string;
- date: Date;
- description: string;
+ image: string;
+ title: string;
+ date: string;
+ description: string;
}
-const { events = [], id }: { events?: Event[], id?: string } = Astro.props as { events?: Event[], id?: string };
-import '../../styles/components/EventsGrid.css';
+const { events = [], id }: { events?: Event[]; id?: string } = Astro.props as {
+ events?: Event[];
+ id?: string;
+};
+import "../../styles/components/EventsGrid.css";
---
Events
-
- {events.map((event: Event) => (
-
-
- ))}
-
+ {
+ events.map((event: Event) => (
+
+ ))
+ }
diff --git a/src/components/HoverCard.astro b/src/components/HoverCard.astro
index 45309d3..467d542 100644
--- a/src/components/HoverCard.astro
+++ b/src/components/HoverCard.astro
@@ -1,7 +1,7 @@
---
// src/components/HoverCard.astro
-import "../../styles/components/HoverCard.css"
-const { title, description, image = "", date} = Astro.props;
+import "../../styles/components/HoverCard.css";
+const { title, description, image = "", date } = Astro.props;
---
@@ -9,13 +9,10 @@ const { title, description, image = "", date} = Astro.props;
- {title}
+
{date}
-
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9b92a01..8455187 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,34 +3,59 @@
import Layout from "../components/Layout.astro";
import Hero from "../components/Hero.astro";
import Welcome from "../components/Welcome.astro";
-import EventsGrid from '../components/EventsGrid.astro';
+import EventsGrid from "../components/EventsGrid.astro";
import Drinks from "../components/Drinks.astro";
import ImageCarousel from "../components/ImageCarousel.astro";
const events = [
- {image: '/images/Logo.png', title: 'Karaoke Night', date: 'Mi, 23. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
- {image: '/images/Logo.png', title: 'Pub Quiz', date: 'Fr, 25. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptuaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
- {image: '/images/Logo.png', title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' },
- {image: '/images/Logo.png', title: 'Cocktail-Abend', date: 'So, 27. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' }
+ {
+ image: "/images/karaoke.jpg",
+ title: "Karaoke",
+ date: "Mittwoch - Samstag",
+ description: `
+ Bei uns gibt es Karaoke Mi-Sa!!
+ Seid ihr eine Gruppe und lieber unter euch? ..unseren 2.Stock kannst du auch mieten ;)
+ Reserviere am besten gleich per Whatsapp 077 232 27 70
+ `,
+ },
+ {
+ image: "/images/pub_quiz.jpg",
+ title: "Pub Quiz",
+ date: "Jeden Freitag",
+ description: `
+ Jeden Freitag findet unser Pub Quiz statt. Gespielt wird tischweise in 3-4 Runden.
+ Jede Woche gibt es ein anderes Thema. Es geht um Ruhm und Ehre und zusätzlich werden die Sieger der Herzen durch das Publikum gekürt! <3
+ Auch Einzelpersonen sind herzlich willkommen!
+ *zum mitmachen minimum 1 Getränk konsumieren oder 5CHF
+ `,
+ },
+ {
+ image: "/images/crepes_sucette.jpg",
+ title: "Crepes Sucette
Live Music im Gallus Pub!",
+ date: "Do, 04. September 2025",
+ description: `
+ 20:00 Uhr
+ Metzgergasse 13, 9000 St. Gallen
+ Erlebt einen musikalischen Abend mit der Band Crepes Sucette
+ Jetzt reservieren: 077 232 27 70`,
+ },
];
const images = [
- { src: '/images/Logo.png', alt: 'Erstes Bild' },
- { src: '/images/Logo.png', alt: 'Zweites Bild' },
- { src: '/images/Logo.png', alt: 'Drittes Bild' },
- { src: '/images/Logo.png', alt: 'Viertes Bild' },
- { src: '/images/Logo.png', alt: 'Fünftes Bild' },
- { src: '/images/Logo.png', alt: 'Sechstes Bild' },
- { src: '/images/Logo.png', alt: 'Siebtes Bild' },
- { src: '/images/Logo.png', alt: 'Achtes Bild' },
- { src: '/images/Logo.png', alt: 'Neuntes Bild' },
- { src: '/images/Logo.png', alt: 'Zehntes Bild' }
+ { src: "/images/Logo.png", alt: "Erstes Bild" },
+ { src: "/images/Logo.png", alt: "Zweites Bild" },
+ { src: "/images/Logo.png", alt: "Drittes Bild" },
+ { src: "/images/Logo.png", alt: "Viertes Bild" },
+ { src: "/images/Logo.png", alt: "Fünftes Bild" },
+ { src: "/images/Logo.png", alt: "Sechstes Bild" },
+ { src: "/images/Logo.png", alt: "Siebtes Bild" },
+ { src: "/images/Logo.png", alt: "Achtes Bild" },
+ { src: "/images/Logo.png", alt: "Neuntes Bild" },
+ { src: "/images/Logo.png", alt: "Zehntes Bild" },
];
-
---
-
diff --git a/styles/components/HoverCard.css b/styles/components/HoverCard.css
index 00dbac5..1979ee2 100644
--- a/styles/components/HoverCard.css
+++ b/styles/components/HoverCard.css
@@ -1,112 +1,114 @@
.hover-card {
- position: relative;
- width: 350px;
- height: 400px;
- border-radius: var(--border-radius);
- background-color: var(--color-accent-green);
- box-shadow: var(--box-shadow);
- transition: transform var(--transition-standard);
- overflow: hidden;
- margin: var(--margin-standard);
- display: flex;
- flex-direction: column;
+ position: relative;
+ width: 350px;
+ height: 400px;
+ border-radius: var(--border-radius);
+ background-color: var(--color-accent-green);
+ box-shadow: var(--box-shadow);
+ transition: transform var(--transition-standard);
+ overflow: hidden;
+ margin: var(--margin-standard);
+ display: flex;
+ flex-direction: column;
}
.hover-card:hover {
- transform: translateY(-5px);
+ transform: translateY(-5px);
}
.card-title {
- padding: 15px 15px 5px 15px;
- margin: 0;
- color: var(--color-accent-beige);
- font-size: var(--font-size-medium);
- text-align: center;
- order: -2;
+ padding: 15px 15px 5px 15px;
+ margin: 0;
+ color: var(--color-accent-beige);
+ font-size: var(--font-size-medium);
+ text-align: center;
+ order: -2;
}
.card_date {
- padding: 0 15px 15px 15px;
- margin: 0;
- color: var(--color-accent-beige);
- font-size: var(--font-size-small);
- text-align: center;
- font-style: italic;
- order: -1;
+ padding: 0 15px 15px 15px;
+ margin: 0;
+ color: var(--color-accent-beige);
+ font-size: var(--font-size-small);
+ text-align: center;
+ font-style: italic;
+ order: -1;
}
.image-container {
- flex-grow: 1;
- position: relative;
- overflow: hidden;
+ flex-grow: 1;
+ position: relative;
+ overflow: hidden;
}
.card-image {
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: opacity 0.3s ease;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: opacity 0.3s ease;
}
.hover-text {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: var(--color-accent-green-transparent);
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 20px;
- opacity: 0;
- transition: opacity var(--transition-standard);
+ font-size: var(--font-size-small-medium);
+ text-align: center;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: var(--color-accent-green-transparent);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
+ opacity: 0;
+ transition: opacity var(--transition-standard);
}
.hover-text div {
- color: var(--color-accent-beige);
- text-align: center;
- max-height: 100%;
- width: 100%;
- overflow-y: auto;
- padding-right: 5px;
+ color: var(--color-accent-beige);
+ text-align: center;
+ max-height: 100%;
+ width: 100%;
+ overflow-y: auto;
+ padding-right: 5px;
}
.hover-text div::-webkit-scrollbar {
- width: 5px;
+ width: 5px;
}
.hover-text div::-webkit-scrollbar-track {
- background: rgba(0, 0, 0, 0.1);
- border-radius: 10px;
+ background: rgba(0, 0, 0, 0.1);
+ border-radius: 10px;
}
.hover-text div::-webkit-scrollbar-thumb {
- background: var(--color-accent-beige);
- border-radius: 10px;
+ background: var(--color-accent-beige);
+ border-radius: 10px;
}
.hover-text div {
- scrollbar-width: thin;
- scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
+ scrollbar-width: thin;
+ scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
}
.hover-card:hover .hover-text {
- opacity: 1;
+ opacity: 1;
}
.hover-card:hover .card-image {
- opacity: 0.1;
+ opacity: 0.1;
}
.hover-text p {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
}
@media (max-width: 768px) {
- .hover-card {
- width: 100%;
- max-width: 350px;
- }
-}
+ .hover-card {
+ width: 100%;
+ max-width: 350px;
+ }
+}
\ No newline at end of file
diff --git a/styles/index.css b/styles/index.css
index 8a4d2b2..1a5e731 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -23,3 +23,12 @@ body {
width: var(--container-width);
margin: 0 auto;
}
+
+
+a {
+ color: #ffa500;
+}
+
+a:hover {
+ text-decoration: none;
+}
\ No newline at end of file
diff --git a/styles/variables.css b/styles/variables.css
index 7a1af35..1d34f72 100644
--- a/styles/variables.css
+++ b/styles/variables.css
@@ -1,30 +1,34 @@
:root {
- /* Colors */
- --color-background: #000;
- --color-text: #f5f5f5;
- --color-accent-green: #213b28;
- --color-accent-beige: #ceb39b;
- --color-accent-green-transparent: rgba(33, 59, 40, 0.95);
- --color-shadow: rgba(0, 0, 0, 0.2);
+ /* Colors */
+ --color-background: #000;
+ --color-text: #f5f5f5;
+ --color-accent-green: #213b28;
+ --color-accent-beige: #ceb39b;
+ --color-accent-green-transparent: rgba(33, 59, 40, 0.95);
+ --color-shadow: rgba(0, 0, 0, 0.2);
+ --color-orange1: #ffa500;
- --font-family-primary: 'Georgia', serif;
- --font-size-small: 1rem;
- --font-size-medium: 1.5rem;
- --font-size-large: 2rem;
- --line-height: 1.6;
-
- --container-width: 100%;
- --container-max-width: 1600px;
- --padding-vertical: 2rem;
- --padding-horizontal: 0;
- --margin-standard: 1rem;
- --gap-standard: 30px;
-
- --border-radius: 8px;
- --box-shadow: 0 4px 8px var(--color-shadow);
- --transition-standard: 0.3s ease;
+ /* Font Sizes */
+ --font-family-primary: 'Georgia', serif;
+ --font-size-small: 1rem;
+ --font-size-small-medium: 1.2rem;
+ --font-size-medium: 1.5rem;
+ --font-size-large: 2rem;
+ --line-height: 1.6;
- --breakpoint-mobile: 768px;
- --breakpoint-desktop: 1600px;
+ --container-width: 100%;
+ --container-max-width: 1600px;
+ --padding-vertical: 2rem;
+ --padding-horizontal: 0;
+ --margin-standard: 1rem;
+ --gap-standard: 30px;
+
+ --border-radius: 8px;
+ --box-shadow: 0 4px 8px var(--color-shadow);
+ --transition-standard: 0.3s ease;
+
+
+ --breakpoint-mobile: 768px;
+ --breakpoint-desktop: 1600px;
}
\ No newline at end of file