From b830f2edaf318c011cfbe88cbdcc55956b854410 Mon Sep 17 00:00:00 2001 From: Kenzo Date: Sat, 19 Jul 2025 16:45:51 +0200 Subject: [PATCH] Introduce CSS variables for consistent theming This commit refactors existing styles to use CSS variables, centralizing values for colors, spacing, typography, and other design elements. It also adds a `variables.css` file for managing these variables. Updated affected components and stylesheets for better maintainability and consistency. --- Gallus_Pub_v1/src/components/Drinks.astro | 30 ++- Gallus_Pub_v1/src/components/EventsGrid.astro | 2 +- Gallus_Pub_v1/src/components/Hero.astro | 2 +- Gallus_Pub_v1/src/components/Layout.astro | 3 +- Gallus_Pub_v1/src/pages/index.astro | 1 - Gallus_Pub_v1/styles/components/Drinks.css | 197 +++++++++++++++++- .../styles/components/EventsGrid.css | 6 +- Gallus_Pub_v1/styles/components/HoverCard.css | 30 +-- Gallus_Pub_v1/styles/index.css | 14 +- Gallus_Pub_v1/styles/variables.css | 30 +++ 10 files changed, 271 insertions(+), 44 deletions(-) create mode 100644 Gallus_Pub_v1/styles/variables.css 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... -
-
\ No newline at end of file +

+ 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