tailwind

2026-05-03 14:59:47 +02:00
parent 41d017b70f
commit 8bcd9e63df
18 changed files with 772 additions and 1084 deletions
@@ -1,4 +1,6 @@
 ---
+import '../styles/global.css';
+
 interface Props {
  title: string;
  description?: string;
@@ -28,90 +30,15 @@ const { title, description = "Theater Ziefen - Coming 2029" } = Astro.props;
    </script>
  </head>
  <body>
-    <main class="main">
+    <main class="min-h-[calc(100vh-200px)]">
      <slot />
    </main>

-    <footer class="footer">
-      <div class="container">
+    <footer class="bg-[#2b2b56] text-white py-[--spacing-md] text-center mt-[--spacing-xl] border-t-2 border-white/10">
+      <div class="max-w-[--max-width-container] mx-auto px-[--spacing-md] md:px-[--spacing-md] px-[--spacing-sm]">
        <p>&copy; {new Date().getFullYear()} Theater Ziefen. All rights reserved.</p>
-        <p class="footer-tagline">Coming 2029</p>
+        <p class="mt-[--spacing-xs] text-[--color-accent] font-semibold opacity-90">Coming 2029</p>
      </div>
    </footer>
-
-    <style>
-      :root {
-        --color-primary: #2b2b56;
-        --color-secondary: #2d4a54;
-        --color-accent: #f9f871;
-        --color-text: #333;
-        --color-text-light: #666;
-        --color-bg: #ffffff;
-        --color-bg-alt: #fafaf5;
-        --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;
-      }
-
-      html {
-        scroll-behavior: smooth;
-      }
-
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-        color: white;
-        line-height: 1.6;
-        background-color: #2b2b56;
-      }
-
-      h1, h2, h3, h4, h5, h6 {
-        font-family: 'Great Vibes', cursive;
-        font-weight: 400;
-      }
-
-      .container {
-        max-width: var(--max-width);
-        margin: 0 auto;
-        padding: 0 var(--spacing-md);
-      }
-
-      /* Main Content */
-      .main {
-        min-height: calc(100vh - 200px);
-      }
-
-      /* Footer Styles */
-      .footer {
-        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) {
-        .container {
-          padding: 0 var(--spacing-sm);
-        }
-      }
-    </style>
  </body>
 </html>