Kenzo/Gallus_Pub
2
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Introduce CSS variables for consistent theming

Browse Source 
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.
This commit is contained in:
Kenzo
2025-07-19 16:45:51 +02:00
parent 3b011bc463
commit b830f2edaf
10 changed files with 271 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
Gallus_Pub_v1/src/components/Drinks.astro
View File

@ -1,25 +1,33 @@
--- ---
import "../../styles/components/Drinks.css" import "../../styles/components/Drinks.css"
--- ---
<div class="Drinks"> <section class="Drinks">
<div class="title">Drinks</div> <h2 class="title">Drinks</h2>
<a href="/pdf/Menu.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a> <a href="/pdf/Menu.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>
<div class="monats-hit">Monats Hit</div> <h3 class="monats-hit">Monats Hit</h3>
<div class="mate-vodka"> <div class="mate-vodka">
<div class="circle"></div> <div class="circle" title="Mate Vodka">
<span class="circle-label">Mate Vodka</span>
</div>
<div>Mate Vodka</div> <div>Mate Vodka</div>
</div> </div>
<div class="circle-row"> <div class="circle-row">
<div class="circle"></div> <div class="circle" title="Bier">
<div class="circle"></div> <span class="circle-label">Bier</span>
<div class="circle"></div> </div>
<div class="circle" title="Wein">
<span class="circle-label">Wein</span>
</div>
<div class="circle" title="Cocktails">
<span class="circle-label">Cocktails</span>
</div>
</div> </div>
<div class="note"> <p class="note">
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.
</div> </p>
</div> </section>

2
Gallus_Pub_v1/src/components/EventsGrid.astro
View File

@ -9,7 +9,7 @@ interface Event {
description: string; description: string;
} }
const { events = [] }: { events?: Event[] } = Astro.props as { events?: Event[] }; const { events = [] }: { events?: Event[] } = Astro.props as { events?: Event[] };
import '/styles/components/EventsGrid.css'; import '../../styles/components/EventsGrid.css';
--- ---
<section class="events-gird container"> <section class="events-gird container">

2
Gallus_Pub_v1/src/components/Hero.astro
View File

@ -11,7 +11,7 @@ import "../../styles/components/Hero.css"
<h1>Dein Irish Pub</h1> <h1>Dein Irish Pub</h1>
<p>Dein Irish Pub</p> <p>Im Herzen von St.Gallen</p>
<a href="#" class="button">Aktuelles ↓</a> <a href="#" class="button">Aktuelles ↓</a>
</div> </div>

3
Gallus_Pub_v1/src/components/Layout.astro
View File

@ -13,7 +13,8 @@ import Footer from "./Footer.astro";
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gallus Pub</title> <title>Gallus Pub</title>
<link rel="stylesheet" href="/Gallus_Pub_v1/styles/index.css" /> <link rel="stylesheet" href="/styles/variables.css" />
<link rel="stylesheet" href="/styles/index.css" />
</head> </head>
<body> <body>

1
Gallus_Pub_v1/src/pages/index.astro
View File

@ -1,6 +1,5 @@
--- ---
// src/pages/index.astro // src/pages/index.astro
import "../../styles/index.css"
import Layout from "../components/Layout.astro"; import Layout from "../components/Layout.astro";
import Hero from "../components/Hero.astro"; import Hero from "../components/Hero.astro";
import Welcome from "../components/Welcome.astro"; import Welcome from "../components/Welcome.astro";

195
Gallus_Pub_v1/styles/components/Drinks.css
View File

@ -1,6 +1,195 @@
.Drinks { .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%; width: 100%;
max-width: 1600px; border-radius: var(--border-radius);
margin: 0 auto; box-shadow: var(--box-shadow);
padding: 2rem 0; }
.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;
}
} }

4
Gallus_Pub_v1/styles/components/EventsGrid.css
View File

@ -2,8 +2,8 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 30px; gap: var(--gap-standard);
padding: 2rem 0; padding: var(--padding-vertical) var(--padding-horizontal);
width: 100%; width: 100%;
} }

28
Gallus_Pub_v1/styles/components/HoverCard.css
View File

@ -2,12 +2,12 @@
position: relative; position: relative;
width: 350px; width: 350px;
height: 400px; height: 400px;
border-radius: 8px; border-radius: var(--border-radius);
background-color: #213b28; background-color: var(--color-accent-green);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: var(--box-shadow);
transition: transform 0.3s ease; transition: transform var(--transition-standard);
overflow: hidden; overflow: hidden;
margin: 1rem; margin: var(--margin-standard);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -19,8 +19,8 @@
.card-title { .card-title {
padding: 15px 15px 5px 15px; padding: 15px 15px 5px 15px;
margin: 0; margin: 0;
color: #ceb39b; color: var(--color-accent-beige);
font-size: 1.5rem; font-size: var(--font-size-medium);
text-align: center; text-align: center;
order: -2; order: -2;
} }
@ -28,8 +28,8 @@
.card_date { .card_date {
padding: 0 15px 15px 15px; padding: 0 15px 15px 15px;
margin: 0; margin: 0;
color: #ceb39b; color: var(--color-accent-beige);
font-size: 1rem; font-size: var(--font-size-small);
text-align: center; text-align: center;
font-style: italic; font-style: italic;
order: -1; order: -1;
@ -54,17 +54,17 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(33, 59, 40, 0.95); background-color: var(--color-accent-green-transparent);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity var(--transition-standard);
} }
.hover-text div { .hover-text div {
color: #ceb39b; color: var(--color-accent-beige);
text-align: center; text-align: center;
max-height: 100%; max-height: 100%;
width: 100%; width: 100%;
@ -82,13 +82,13 @@
} }
.hover-text div::-webkit-scrollbar-thumb { .hover-text div::-webkit-scrollbar-thumb {
background: #ceb39b; background: var(--color-accent-beige);
border-radius: 10px; border-radius: 10px;
} }
.hover-text div { .hover-text div {
scrollbar-width: thin; 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 { .hover-card:hover .hover-text {

12
Gallus_Pub_v1/styles/index.css
View File

@ -6,15 +6,15 @@
} }
body { body {
font-family: 'Georgia', serif; font-family: var(--font-family-primary);
background-color: #1f1414; background-color: var(--color-background);
color: #f5f5f5; color: var(--color-text);
line-height: 1.6; line-height: var(--line-height);
} }
/* === Container für zentralen Content === */ /* === Container für zentralen Content === */
.container { .container {
max-width: 1600px; max-width: var(--container-max-width);
width: 90%; width: var(--container-width);
margin: 0 auto; margin: 0 auto;
} }

30
Gallus_Pub_v1/styles/variables.css Normal file
View File

@ -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;
}