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

mobile optimization
Build and Deploy / build-and-deploy (push) Successful in 4m40s
Details

Browse Source
This commit is contained in:
Johannes Gasser
2026-05-09 08:05:09 +02:00
parent 2d80e7ad49
commit 58f7ca2d5c
8 changed files with 115 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index.astro
+12 -12
View File
@@ -7,6 +7,7 @@ import { sanityClient } from '../sanity/client';
import { renderPortableText } from '../sanity/portableText';
import { urlFor } from '../sanity/imageUrl';
import { theaterHomepageQuery } from '../sanity/queries';
import { MapPin } from '@lucide/astro';
const content = await sanityClient.fetch(theaterHomepageQuery) ?? {};
---
@@ -16,22 +17,20 @@ const content = await sanityClient.fetch(theaterHomepageQuery) ?? {};
<AnchorNav />
<!-- Hero Section -->
<div class="bg-[#2b2b56] text-white py-12 pb-24 md:py-8 md:pb-16 relative overflow-hidden min-h-[500px] md:min-h-[400px]">
<div class="bg-[#2b2b56] text-white py-12 pb-24 md:py-8 md:pb-16 relative overflow-hidden min-h-[500px] md:min-h-[400px] md:max-w-[100rem]">
<div class="max-w-[--max-width-container] mx-auto px-[--spacing-md] md:px-[--spacing-sm]">
<div class="relative min-h-96 md:min-h-80">
<img src="/logo.svg" alt="Theater Ziefen Logo" class="absolute h-full right-2 md:right-10 opacity-95 z-[5] md:opacity-70" />
<div class="relative z-8 pt-16 pl-12 md:pt-24 md:pl-16 text-left md:max-w-full">
<h1 class="text-8xl md:text-5xl font-normal mb-6 md:mb-4 leading-[1.3] [text-shadow:2px_2px_4px_rgba(0,0,0,0.3)]">
<div class="relative flex flex-col items-center md:items-start gap-2 z-8 text-center md:text-left md:pl-12 md:pl-16 min-h-96 md:min-h-80 ">
<h1 class="text-6xl md:text-8xl md:pt-24 md:h-auto font-normalmd:mb-4 leading-[1.3] [text-shadow:2px_2px_4px_rgba(0,0,0,0.3)]">
<span class="title-de" data-lang="de">{content.hero?.title_de || 'Freilichttheater in Ziefen'}</span>
<span class="title-en" data-lang="en">{content.hero?.title_en || 'Open-Air Theater in Ziefen'}</span>
</h1>
<p class="text-xl md:text-lg leading-relaxed mb-8 md:mb-6 opacity-95 max-w-2xl">
<img src="/logo.svg" alt="Theater Ziefen Logo" class="max-h-[30rem] md:absolute md:right-2 md:right-10 opacity-95 z-[5] md:opacity-70" />
<p class="text-xl md:text-lg leading-relaxed mb-8 md:mb-6 opacity-95 max-w-2xl ">
<span class="subtitle-de" data-lang="de">{content.hero?.subtitle_de || ''}</span>
<span class="subtitle-en" data-lang="en">{content.hero?.subtitle_en || ''}</span>
</p>
<div class="font-heading text-8xl md:text-6xl font-normal text-accent [text-shadow:3px_3px_6px_rgba(0,0,0,0.4)] mt-4">2028</div>
</div>
</div>
</div>
</div>
@@ -159,13 +158,14 @@ const content = await sanityClient.fetch(theaterHomepageQuery) ?? {};
/>
</svg>
{content.termine.events.map((event: any, index: number) => (
<div class={`relative z-2 flex items-center gap-12 text-left ${(index + 1) % 2 === 0 ? 'flex-row-reverse text-right right-0' : 'left-0'}`}>
<div class="flex flex-col items-center min-w-30 max-w-60 md:min-w-auto md:self-start">
<div class="relative w-8 h-8 bg-accent rounded-full border-4 border-white shadow-[0_4px_10px_rgba(0,0,0,0.3)] after:content-[''] after:absolute after:-bottom-4 after:left-1/2 after:-translate-x-1/2 after:w-0 after:h-0 after:border-l-[10px] after:border-l-transparent after:border-r-[10px] after:border-r-transparent after:border-t-[15px] after:border-t-[--color-accent]"></div>
<div class="mt-6 text-lg font-bold text-accent text-center whitespace-nowrap md:text-base">{event.date}</div>
<div class={`relative z-2 flex items-center gap-12 text-left ${(index + 1) % 2 === 0 ? 'md:flex-row-reverse md:text-right md:right-0' : 'md:left-0'}`}>
<div class="hidden md:flex flex-col items-center in-w-30 max-w-60 md:min-w-auto md:self-start">
<MapPin class="text-accent" size={40} ></MapPin>
<div class="mt-6 text-lg font-bold text-accent text-center whitespace-nowrap md:text-base">{event.date}</div>
</div>
<div class="flex-1 bg-white/10 p-12 rounded-xl backdrop-blur-[10px] border-2 border-white/20 transition-all duration-300 hover:-translate-y-1 hover:bg-white/15 hover:shadow-[0_8px_20px_rgba(0,0,0,0.3)] max-w-full md:max-w-2xl">
<h3 class="text-3xl mb-2 text-white md:text-2xl">
<div class="md:hidden text-lg font-bold text-accent text-center whitespace-nowrap md:text-base">{event.date}</div>
<h3 class="text-3xl mb-2 text-white md:text-2xl">
<span class="event-title-de" data-lang="de">{event.title_de}</span>
<span class="event-title-en" data-lang="en">{event.title_en}</span>
</h3>