johannes.gasser/theater-ziefen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Johannes Gasser
2026-05-03 10:00:01 +02:00
parent ac2d1f25e5
commit 41d017b70f
20 changed files with 4019 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/BaseLayout.astro
+29 -78
View File
@@ -8,32 +8,26 @@ const { title, description = "Theater Ziefen - Coming 2029" } = Astro.props;
---
<!doctype html>
<html lang="de">
<html lang="de" data-language="de">
<head>
<meta charset="UTF-8" />
<meta name="description" content={description} />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
<title>{title} | Theater Ziefen</title>
<script is:inline>
// Set language immediately before page renders
(function() {
const savedLang = localStorage.getItem('language') || 'de';
document.documentElement.setAttribute('data-language', savedLang);
})();
</script>
</head>
<body>
<header class="header">
<div class="container">
<nav class="nav">
<a href="/" class="logo">
<h1>Theater Ziefen</h1>
</a>
<ul class="nav-links">
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="main">
<slot />
</main>
@@ -47,13 +41,13 @@ const { title, description = "Theater Ziefen - Coming 2029" } = Astro.props;
<style>
:root {
--color-primary: #8b0000;
--color-secondary: #2c3e50;
--color-accent: #c0392b;
--color-primary: #2b2b56;
--color-secondary: #2d4a54;
--color-accent: #f9f871;
--color-text: #333;
--color-text-light: #666;
--color-bg: #ffffff;
--color-bg-alt: #f8f9fa;
--color-bg-alt: #fafaf5;
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
@@ -68,11 +62,20 @@ const { title, description = "Theater Ziefen - Coming 2029" } = Astro.props;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
color: var(--color-text);
color: white;
line-height: 1.6;
background-color: var(--color-bg);
background-color: #2b2b56;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Great Vibes', cursive;
font-weight: 400;
}
.container {
@@ -81,82 +84,30 @@ const { title, description = "Theater Ziefen - Coming 2029" } = Astro.props;
padding: 0 var(--spacing-md);
}
/* Header Styles */
.header {
background-color: var(--color-secondary);
color: white;
padding: var(--spacing-sm) 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
color: white;
text-decoration: none;
}
.logo h1 {
font-size: 1.5rem;
font-weight: 700;
}
.nav-links {
display: flex;
list-style: none;
gap: var(--spacing-md);
}
.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: var(--color-accent);
}
/* Main Content */
.main {
min-height: calc(100vh - 200px);
padding: var(--spacing-lg) 0;
}
/* Footer Styles */
.footer {
background-color: var(--color-secondary);
background-color: #2b2b56;
color: white;
padding: var(--spacing-md) 0;
text-align: center;
margin-top: var(--spacing-xl);
border-top: 2px solid rgba(255, 255, 255, 0.1);
}
.footer-tagline {
margin-top: var(--spacing-xs);
color: var(--color-accent);
font-weight: 600;
opacity: 0.9;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav {
flex-direction: column;
gap: var(--spacing-sm);
}
.nav-links {
gap: var(--spacing-sm);
}
.container {
padding: 0 var(--spacing-sm);
}