event hinzugefügt und erste anpassungen am nav für onePager

This commit is contained in:
Selina Erci
2025-07-23 16:39:01 +02:00
parent f0afa677a0
commit 77c5d5df82
4 changed files with 24 additions and 71 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 384 KiB

View File

@ -1,44 +1,28 @@
---
// src/components/Header.astro
const { url } = Astro;
import "../../styles/components/Header.css"
import "../../styles/components/Header.css";
---
<header class="header">
<div class="logo-container">
<a href="/">
<img src="/images/Logo.png" alt="Logo" class="logo">
<img src="/images/Logo.png" alt="Logo" class="logo" />
</a>
</div>
<!-- Hauptnavigation: immer Home, About, Contact -->
<nav class="nav-main">
<div class="dropdown">
<a href="/" class="dropdbtn">Home</a>
<div class="dropdown-content">
<!-- Section navigation links -->
<a href="/#hero">Home</a>
<a href="/#welcome">Willkommen</a>
<a href="/#events">Events</a>
<a href="/#gallery">Galerie</a>
<a href="/#drinks">Drinks</a>
<!-- Page navigation links -->
<a href="/events">Events Page</a>
<a href="/gallery">Gallery Page</a>
<a href="/openings">Openings</a>
</div>
<div>
<a href="/#hero">Home</a>
<a href="/#events">Events</a>
<a href="/#gallery">Galerie</a>
<a href="/#drinks">Drinks</a>
<a href="/#openings">Openings</a>
<a href="/#about">About</a>
<a href="/#contact">Contact</a>
</div>
<a href="/About">About</a>
<a href="/Contact">Contact</a>
</nav>
</header>
<div class="header-spacer"></div>

View File

@ -39,6 +39,16 @@ const events = [
Erlebt einen musikalischen Abend mit der Band <b>Crepes Sucette</b> <br>
Jetzt reservieren: <a href="tel:+41772322770">077 232 27 70</a>`,
},
{
image: "/images/kevin_mcflannigan.jpeg",
title: "Kevin McFlannigan <br> Live Music im Gallus Pub!",
date: "Sa, 27. September 2025",
description: `
<b>ab 20:00 Uhr</b> <br>
Singer & Songwriter Kevin McFlannigan <br>
Eintritt ist Frei / Hutkollekte <br>
`,
},
];
const images = [

View File

@ -43,8 +43,7 @@
align-items: center;
}
.nav-main a,
.dropdbtn {
.nav-main a {
margin: 0 1rem;
color: white;
text-decoration: none;
@ -52,45 +51,10 @@
cursor: pointer;
}
.nav-main a:hover,
.dropdbtn:hover {
.nav-main a:hover {
color: #ffa500;
}
/* Dropdown für Home */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0e0c0c;
min-width: 200px;
z-index: 1;
border: 1px solid #444;
border-radius: 4px;
max-height: 400px;
overflow-y: auto;
}
.dropdown-content a {
color: #f5f5f5;
padding: 0.5rem 1rem;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #1f1a1a;
color: #ffa500;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media (max-width: 768px) {
.header {
height: 65px;
@ -101,10 +65,6 @@
height: 3em;
}
.dropdown-content {
right: 0;
}
.header-spacer {
height: 65px;
}
@ -121,8 +81,7 @@
height: 2.5em;
}
.nav-main a,
.dropdbtn {
.nav-main a {
margin: 0 0.5rem;
font-size: 0.9rem;
}