diff --git a/Gallus_Pub_v1/src/components/Drinks.astro b/Gallus_Pub_v1/src/components/Drinks.astro
index 6534194..6e8ed4f 100644
--- a/Gallus_Pub_v1/src/components/Drinks.astro
+++ b/Gallus_Pub_v1/src/components/Drinks.astro
@@ -1,25 +1,33 @@
---
import "../../styles/components/Drinks.css"
---
-
-
Drinks
+
+ Drinks
Getränkekarte
- Monats Hit
+ Monats Hit
-
+
+ Mate Vodka
+
Mate Vodka
-
-
-
+
+ Bier
+
+
+ Wein
+
+
+ Cocktails
+
- Wir bieten eine Auswahl...
-
-
+ Wir bieten eine Auswahl an erlesenen Getränken für jeden Geschmack. Besuche uns und entdecke unsere saisonalen Spezialitäten und Klassiker.
+
+
diff --git a/Gallus_Pub_v1/src/components/EventsGrid.astro b/Gallus_Pub_v1/src/components/EventsGrid.astro
index 84314b9..2dc709a 100644
--- a/Gallus_Pub_v1/src/components/EventsGrid.astro
+++ b/Gallus_Pub_v1/src/components/EventsGrid.astro
@@ -9,7 +9,7 @@ interface Event {
description: string;
}
const { events = [] }: { events?: Event[] } = Astro.props as { events?: Event[] };
-import '/styles/components/EventsGrid.css';
+import '../../styles/components/EventsGrid.css';
---
diff --git a/Gallus_Pub_v1/src/components/Hero.astro b/Gallus_Pub_v1/src/components/Hero.astro
index d18d991..c3931eb 100644
--- a/Gallus_Pub_v1/src/components/Hero.astro
+++ b/Gallus_Pub_v1/src/components/Hero.astro
@@ -11,7 +11,7 @@ import "../../styles/components/Hero.css"
Dein Irish Pub
- Dein Irish Pub
+ Im Herzen von St.Gallen
Aktuelles ↓
diff --git a/Gallus_Pub_v1/src/components/Layout.astro b/Gallus_Pub_v1/src/components/Layout.astro
index df8d1ce..45eec31 100644
--- a/Gallus_Pub_v1/src/components/Layout.astro
+++ b/Gallus_Pub_v1/src/components/Layout.astro
@@ -13,7 +13,8 @@ import Footer from "./Footer.astro";
Gallus Pub
-
+
+
diff --git a/Gallus_Pub_v1/src/pages/index.astro b/Gallus_Pub_v1/src/pages/index.astro
index 2529120..cbc0ab3 100644
--- a/Gallus_Pub_v1/src/pages/index.astro
+++ b/Gallus_Pub_v1/src/pages/index.astro
@@ -1,6 +1,5 @@
---
// src/pages/index.astro
-import "../../styles/index.css"
import Layout from "../components/Layout.astro";
import Hero from "../components/Hero.astro";
import Welcome from "../components/Welcome.astro";
diff --git a/Gallus_Pub_v1/styles/components/Drinks.css b/Gallus_Pub_v1/styles/components/Drinks.css
index 3709508..40dc813 100644
--- a/Gallus_Pub_v1/styles/components/Drinks.css
+++ b/Gallus_Pub_v1/styles/components/Drinks.css
@@ -1,6 +1,195 @@
.Drinks {
+ font-family: var(--font-family-primary);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 2rem;
+ text-align: center;
+ background-color: var(--color-accent-green);
+ color: var(--color-accent-beige);
+ padding: 2rem;
width: 100%;
- max-width: 1600px;
- margin: 0 auto;
- padding: 2rem 0;
-}
\ No newline at end of file
+ border-radius: var(--border-radius);
+ box-shadow: var(--box-shadow);
+}
+
+.title {
+ font-size: var(--font-size-large);
+ margin-bottom: 1.5rem;
+ font-weight: bold;
+ color: var(--color-text);
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+.card-link {
+ border: 2px solid var(--color-accent-beige);
+ padding: 0.75rem 1.5rem;
+ margin-bottom: 2.5rem;
+ color: var(--color-text);
+ background-color: var(--color-background);
+ text-decoration: none;
+ border-radius: var(--border-radius);
+ font-weight: bold;
+ transition: all var(--transition-standard);
+ display: inline-block;
+}
+
+.card-link:hover {
+ background-color: var(--color-accent-beige);
+ color: var(--color-accent-green);
+ transform: translateY(-3px);
+ box-shadow: var(--box-shadow);
+}
+
+.monats-hit {
+ margin-bottom: 1.5rem;
+ font-size: var(--font-size-medium);
+ color: var(--color-text);
+ font-weight: bold;
+ position: relative;
+ padding-bottom: 0.5rem;
+}
+
+.monats-hit::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 50px;
+ height: 2px;
+ background-color: var(--color-accent-beige);
+}
+
+.mate-vodka {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 1.5rem;
+ padding: 1rem;
+ background-color: rgba(0, 0, 0, 0.2);
+ border-radius: var(--border-radius);
+ width: 80%;
+ max-width: 300px;
+}
+
+.mate-vodka div:not(.circle) {
+ margin-top: 0.5rem;
+ font-weight: bold;
+ color: var(--color-accent-beige);
+}
+
+.circle {
+ height: 6em;
+ width: 6em;
+ border: 2px solid var(--color-accent-beige);
+ border-radius: 50%;
+ margin: 0.5rem;
+ background: radial-gradient(circle at 30% 30%, rgba(206, 179, 155, 0.2), transparent 70%);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+ transition: all var(--transition-standard);
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+}
+
+.circle:hover {
+ transform: scale(1.05);
+ border-color: var(--color-text);
+}
+
+.circle-label {
+ opacity: 0;
+ color: var(--color-text);
+ font-weight: bold;
+ font-size: 0.8rem;
+ text-align: center;
+ transition: opacity var(--transition-standard);
+ position: absolute;
+}
+
+.circle:hover .circle-label {
+ opacity: 1;
+}
+
+.circle-row {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 1.5rem;
+ margin: 1.5rem 0;
+}
+
+.note {
+ margin-top: 2rem;
+ font-style: italic;
+ text-align: center;
+ color: var(--color-text);
+ max-width: 80%;
+ line-height: 1.6;
+ padding: 1rem;
+ border-top: 1px solid rgba(206, 179, 155, 0.3);
+ border-bottom: 1px solid rgba(206, 179, 155, 0.3);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .Drinks {
+ padding: 1.5rem;
+ }
+
+ .title {
+ font-size: calc(var(--font-size-medium) + 0.2rem);
+ }
+
+ .mate-vodka {
+ width: 90%;
+ }
+
+ .circle {
+ height: 5em;
+ width: 5em;
+ }
+
+ .circle-label {
+ font-size: 0.7rem;
+ }
+
+ /* Make labels always visible on touch devices */
+ .circle-label {
+ opacity: 1;
+ background-color: rgba(0, 0, 0, 0.5);
+ padding: 2px 5px;
+ border-radius: 3px;
+ }
+
+ .circle-row {
+ gap: 1rem;
+ }
+
+ .note {
+ max-width: 95%;
+ }
+}
+
+@media (max-width: 480px) {
+ .circle-row {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .card-link {
+ padding: 0.5rem 1rem;
+ }
+
+ .circle {
+ margin: 1rem 0;
+ }
+
+ .mate-vodka {
+ padding: 0.8rem;
+ }
+}
diff --git a/Gallus_Pub_v1/styles/components/EventsGrid.css b/Gallus_Pub_v1/styles/components/EventsGrid.css
index 6f56e97..04d6ef7 100644
--- a/Gallus_Pub_v1/styles/components/EventsGrid.css
+++ b/Gallus_Pub_v1/styles/components/EventsGrid.css
@@ -2,8 +2,8 @@
display: flex;
flex-wrap: wrap;
justify-content: center;
- gap: 30px;
- padding: 2rem 0;
+ gap: var(--gap-standard);
+ padding: var(--padding-vertical) var(--padding-horizontal);
width: 100%;
}
@@ -17,4 +17,4 @@
.events-gird {
justify-content: space-around;
}
-}
\ No newline at end of file
+}
diff --git a/Gallus_Pub_v1/styles/components/HoverCard.css b/Gallus_Pub_v1/styles/components/HoverCard.css
index 57832b8..00dbac5 100644
--- a/Gallus_Pub_v1/styles/components/HoverCard.css
+++ b/Gallus_Pub_v1/styles/components/HoverCard.css
@@ -2,12 +2,12 @@
position: relative;
width: 350px;
height: 400px;
- border-radius: 8px;
- background-color: #213b28;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
- transition: transform 0.3s ease;
+ border-radius: var(--border-radius);
+ background-color: var(--color-accent-green);
+ box-shadow: var(--box-shadow);
+ transition: transform var(--transition-standard);
overflow: hidden;
- margin: 1rem;
+ margin: var(--margin-standard);
display: flex;
flex-direction: column;
}
@@ -19,8 +19,8 @@
.card-title {
padding: 15px 15px 5px 15px;
margin: 0;
- color: #ceb39b;
- font-size: 1.5rem;
+ color: var(--color-accent-beige);
+ font-size: var(--font-size-medium);
text-align: center;
order: -2;
}
@@ -28,8 +28,8 @@
.card_date {
padding: 0 15px 15px 15px;
margin: 0;
- color: #ceb39b;
- font-size: 1rem;
+ color: var(--color-accent-beige);
+ font-size: var(--font-size-small);
text-align: center;
font-style: italic;
order: -1;
@@ -54,17 +54,17 @@
left: 0;
width: 100%;
height: 100%;
- background-color: rgba(33, 59, 40, 0.95);
+ background-color: var(--color-accent-green-transparent);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
opacity: 0;
- transition: opacity 0.3s ease;
+ transition: opacity var(--transition-standard);
}
.hover-text div {
- color: #ceb39b;
+ color: var(--color-accent-beige);
text-align: center;
max-height: 100%;
width: 100%;
@@ -82,13 +82,13 @@
}
.hover-text div::-webkit-scrollbar-thumb {
- background: #ceb39b;
+ background: var(--color-accent-beige);
border-radius: 10px;
}
.hover-text div {
scrollbar-width: thin;
- scrollbar-color: #ceb39b rgba(0, 0, 0, 0.1);
+ scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
}
.hover-card:hover .hover-text {
@@ -109,4 +109,4 @@
width: 100%;
max-width: 350px;
}
-}
\ No newline at end of file
+}
diff --git a/Gallus_Pub_v1/styles/index.css b/Gallus_Pub_v1/styles/index.css
index dbfe7ed..03c1db2 100644
--- a/Gallus_Pub_v1/styles/index.css
+++ b/Gallus_Pub_v1/styles/index.css
@@ -6,15 +6,15 @@
}
body {
- font-family: 'Georgia', serif;
- background-color: #1f1414;
- color: #f5f5f5;
- line-height: 1.6;
+ font-family: var(--font-family-primary);
+ background-color: var(--color-background);
+ color: var(--color-text);
+ line-height: var(--line-height);
}
/* === Container für zentralen Content === */
.container {
- max-width: 1600px;
- width: 90%;
+ max-width: var(--container-max-width);
+ width: var(--container-width);
margin: 0 auto;
-}
\ No newline at end of file
+}
diff --git a/Gallus_Pub_v1/styles/variables.css b/Gallus_Pub_v1/styles/variables.css
new file mode 100644
index 0000000..7a1af35
--- /dev/null
+++ b/Gallus_Pub_v1/styles/variables.css
@@ -0,0 +1,30 @@
+: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);
+
+ --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;
+
+
+ --breakpoint-mobile: 768px;
+ --breakpoint-desktop: 1600px;
+}
\ No newline at end of file