Initial setup of Theater Ziefen website

- Set up Astro with TypeScript - Integrate TinaCMS for content management - Create homepage with hero section and recent posts - Build blog listing and individual post pages - Add About and Contact pages - Implement responsive design with theater theme - Configure Netlify deployment - Add comprehensive documentation for developers and editors Tech stack: - Framework: Astro 5.x - CMS: TinaCMS with Git-based workflow - Content: MDX format for blog and pages - Styling: Scoped CSS with responsive design - Deployment: Netlify (configured) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-28 17:47:49 +01:00
parent 8521a41e30
commit d70897a680
17 changed files with 20033 additions and 46 deletions
@@ -0,0 +1,166 @@
+---
+interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description = "Theater Ziefen - Coming 2029" } = Astro.props;
+---
+
+<!doctype html>
+<html lang="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} />
+    <title>{title} | Theater Ziefen</title>
+  </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>
+
+    <footer class="footer">
+      <div class="container">
+        <p>&copy; {new Date().getFullYear()} Theater Ziefen. All rights reserved.</p>
+        <p class="footer-tagline">Coming 2029</p>
+      </div>
+    </footer>
+
+    <style>
+      :root {
+        --color-primary: #8b0000;
+        --color-secondary: #2c3e50;
+        --color-accent: #c0392b;
+        --color-text: #333;
+        --color-text-light: #666;
+        --color-bg: #ffffff;
+        --color-bg-alt: #f8f9fa;
+        --spacing-xs: 0.5rem;
+        --spacing-sm: 1rem;
+        --spacing-md: 2rem;
+        --spacing-lg: 3rem;
+        --spacing-xl: 4rem;
+        --max-width: 1200px;
+      }
+
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+        color: var(--color-text);
+        line-height: 1.6;
+        background-color: var(--color-bg);
+      }
+
+      .container {
+        max-width: var(--max-width);
+        margin: 0 auto;
+        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);
+        color: white;
+        padding: var(--spacing-md) 0;
+        text-align: center;
+        margin-top: var(--spacing-xl);
+      }
+
+      .footer-tagline {
+        margin-top: var(--spacing-xs);
+        color: var(--color-accent);
+        font-weight: 600;
+      }
+
+      /* 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);
+        }
+      }
+    </style>
+  </body>
+</html>