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

Compare commits

base: Kenzo:f3952e7e81b498f33b862a37868c20c9059ba2ee
Branches Tags
Kenzo:main Kenzo:dev_2 Kenzo:feat/cms Kenzo:perf/improve-image-serving Kenzo:main-backup Kenzo:dev
...
compare: Kenzo:096883b0ee6377aaae21a4c768f6cb274464a2a9
Branches Tags
Kenzo:main Kenzo:dev_2 Kenzo:feat/cms Kenzo:perf/improve-image-serving Kenzo:main-backup Kenzo:dev

3 Commits
f3952e7e81 ... 096883b0ee

Author SHA1 Message Date
k
096883b0ee Add contact form and WhatsApp integration 
- Created a new, styled contact form with input validation.
- Added WhatsApp Chat link for direct communication.
- Introduced `ContactForm.css` with responsive styles to improve usability.
 2025-07-20 14:28:13 +02:00
k
749b3e5079 Event Header fix 2025-07-20 13:59:45 +02:00
k
3c1a6fae2c Update styles and layout for improved responsiveness and consistency: 
- **Global fonts**: Adjusted `font-family` fallback to include `serif`.
- **Header improvements**: Refined structure with flexbox, adjusted heights, and fixed responsive issues (e.g., removed hardcoded margins).
- **New Layout styles**: Added scoped `Layout.css` for better layout control and modularity.
- **Links fix**: Corrected casing in `About` and `Contact` links for proper navigation.
 2025-07-20 13:57:33 +02:00
8 changed files with 199 additions and 27 deletions
Expand all files Collapse all files

2
src/components/EventsGrid.astro
View File

@ -12,8 +12,8 @@ const { events = [], id }: { events?: Event[], id?: string } = Astro.props as {
import '../../styles/components/EventsGrid.css'; import '../../styles/components/EventsGrid.css';
--- ---
<h2 class="section-title">Events</h2>
<section id={id} class="events-gird container"> <section id={id} class="events-gird container">
<h2 class="section-title">Events</h2>
{events.map((event: Event) => ( {events.map((event: Event) => (

4
src/components/Header.astro
View File

@ -35,8 +35,8 @@ import "../../styles/components/Header.css"
</div> </div>
<a href="/about">About</a> <a href="/About">About</a>
<a href="/contact">Contact</a> <a href="/Contact">Contact</a>
</nav> </nav>

1
src/components/Layout.astro
View File

@ -2,6 +2,7 @@
// src/components/Layout.astro // src/components/Layout.astro
import Header from "./Header.astro"; import Header from "./Header.astro";
import Footer from "./Footer.astro"; import Footer from "./Footer.astro";
import "../../styles/components/Layout.css"
--- ---
<!doctype html> <!doctype html>

35
src/pages/Contact.astro
View File

@ -1,11 +1,42 @@
--- ---
import Layout from "../components/Layout.astro"; import Layout from "../components/Layout.astro";
import "../../styles/components/ContactForm.css";
--- ---
<Layout> <Layout>
<div class="contact-container">
<h1 class="contact-title">Kontakt</h1>
<h1>Contact</h1> <form class="contact-form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<p>Hier findest du alle aktuellen und kommenden Contact im Gallus Pub.</p> <div class="form-group">
<label for="email">E-Mail</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="subject">Betreff</label>
<input type="text" id="subject" name="subject" required>
</div>
<div class="form-group">
<label for="message">Nachricht</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="submit-button">Senden</button>
</form>
<div class="whatsapp-container">
<p>Oder kontaktiere uns direkt über WhatsApp:</p>
<a href="https://wa.me/41772322770" class="whatsapp-link" target="_blank" rel="noopener noreferrer">
<span class="whatsapp-icon">📱</span>
<span>WhatsApp Chat starten</span>
</a>
</div>
</div>
</Layout> </Layout>

127
styles/components/ContactForm.css Normal file
View File

@ -0,0 +1,127 @@
/* styles/components/ContactForm.css */
.contact-container {
max-width: 800px;
margin: 2rem auto;
padding: 0 1rem;
}
.contact-title {
margin-top: 70px;
padding-top: 2rem;
text-align: center;
margin-bottom: 2rem;
font-size: 2.5rem;
color: var(--color-text);
}
.contact-form {
background-color: rgba(33, 59, 40, 0.05);
padding: 2rem;
border-radius: 8px;
margin-bottom: 2rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
color: var(--color-text);
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 4px;
font-family: inherit;
font-size: 1rem;
background-color: #fff;
}
.form-group textarea {
resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #213b28;
box-shadow: 0 0 0 2px rgba(33, 59, 40, 0.2);
}
.submit-button {
background-color: #213b28;
color: white;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submit-button:hover {
background-color: #2a4c35;
}
.whatsapp-container {
text-align: center;
margin: 2rem 0;
}
.whatsapp-link {
display: inline-flex;
align-items: center;
background-color: #25D366;
color: white;
text-decoration: none;
padding: 0.75rem 1.5rem;
border-radius: 4px;
font-weight: bold;
transition: background-color 0.3s ease;
margin-top: 0.5rem;
}
.whatsapp-link:hover {
background-color: #128C7E;
}
.whatsapp-icon {
font-size: 1.2rem;
margin-right: 0.5rem;
display: inline-block;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.contact-form {
padding: 1.5rem;
}
.contact-title {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.contact-form {
padding: 1rem;
}
.contact-title {
font-size: 1.75rem;
}
.submit-button,
.whatsapp-link {
width: 100%;
justify-content: center;
}
}

34
styles/components/Header.css
View File

@ -7,6 +7,11 @@
z-index: 1000; z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
height: 70px;
} }
@ -34,7 +39,6 @@
.nav-main { .nav-main {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 377px;
} }
.nav-main a, .nav-main a,
@ -86,16 +90,8 @@
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.nav-container { .header {
padding: 1rem; height: 65px;
}
.nav-links {
gap: 1rem;
}
.nav-main {
margin-right: 20px;
} }
.logo { .logo {
@ -106,14 +102,16 @@
.dropdown-content { .dropdown-content {
right: 0; right: 0;
} }
.header-spacer {
height: 65px;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.header { .header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem; padding: 0.5rem;
height: 60px;
} }
.logo { .logo {
@ -121,13 +119,13 @@
height: 2.5em; height: 2.5em;
} }
.nav-main {
margin-right: 10px;
}
.nav-main a, .nav-main a,
.dropdbtn { .dropdbtn {
margin: 0 0.5rem; margin: 0 0.5rem;
font-size: 0.9rem; font-size: 0.9rem;
} }
.header-spacer {
height: 60px;
}
} }

15
styles/components/Layout.css Normal file
View File

@ -0,0 +1,15 @@
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
padding: 0 1rem;
}

2
styles/index.css
View File

@ -11,7 +11,7 @@ html {
} }
body { body {
font-family: var(--font-family-primary); font-family: var(--font-family-primary), serif;
background-color: var(--color-background); background-color: var(--color-background);
color: var(--color-text); color: var(--color-text);
line-height: var(--line-height); line-height: var(--line-height);