fix: Teambilder in gerader Reihe, Tagesablauf-Karte auf dem Smartphone mittig

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Opus 5.5 committed 2026-10-06 23:07:38 +02:00
1 parent 2be1de6a63
commit a76a9cf616
2 files changed
+5 -4

No files matched your search

+4 -3
View File
@@ -109,10 +109,11 @@ export function ScheduleCarousel({ days }: { days: ScheduleCard[] }) {
aria-label="Tage im Camp"
// Per Tastatur scrollbar (Pfeiltasten), WCAG 2.1.1.
tabIndex={0}
// Smartphone: Karten ragen bis an den Rand, die naechste lugt hervor.
// Smartphone: Karte 85vw breit und mittig (7,5vw Rand links und
// rechts), Nachbarkarten lugen an beiden Seiten hervor.
// Ab md: Karten passen vollstaendig in den Inhaltsbereich (2 bzw. 3
// nebeneinander), nichts wird am Rand abgeschnitten.
className="-mx-4 flex snap-x snap-mandatory scroll-px-4 gap-4 overflow-x-auto px-4 pb-4 [scrollbar-width:none] md:mx-0 md:scroll-px-0 md:gap-6 md:px-0 [&::-webkit-scrollbar]:hidden"
className="-mx-4 flex snap-x snap-mandatory scroll-px-[7.5vw] gap-4 overflow-x-auto px-[7.5vw] pb-4 [scrollbar-width:none] sm:scroll-px-4 sm:px-4 md:mx-0 md:scroll-px-0 md:gap-6 md:px-0 [&::-webkit-scrollbar]:hidden"
>
{days.map((day, index) => (
<li
@@ -120,7 +121,7 @@ export function ScheduleCarousel({ days }: { days: ScheduleCard[] }) {
ref={(el) => {
cards.current[index] = el;
}}
className="flex w-[85%] shrink-0 snap-start flex-col rounded-2xl bg-paper p-6 shadow-[0_1px_0_var(--color-line)] sm:w-[62%] md:w-[calc((100%-1.5rem)/2)] md:p-8 lg:w-[calc((100%-3rem)/3)]"
className="flex w-[85vw] shrink-0 snap-start flex-col rounded-2xl bg-paper p-6 shadow-[0_1px_0_var(--color-line)] sm:w-[62%] md:w-[calc((100%-1.5rem)/2)] md:p-8 lg:w-[calc((100%-3rem)/3)]"
>
<p className="text-sm font-semibold uppercase tracking-[0.16em] text-rosso">
{day.label} · {day.title}
+1 -1
View File
@@ -44,7 +44,7 @@ export function TeamSection({ showDrafts, portraits }: { showDrafts: boolean; po
<ul className="mt-20 grid grid-cols-2 gap-x-4 gap-y-12 md:mt-28 md:grid-cols-4 md:gap-x-8 md:gap-y-16">
{team.people.map((person: TeamMember, index) => (
<li key={person.slug} className={index % 2 === 1 ? "md:mt-16" : ""}>
<li key={person.slug}>
<article aria-label={person.name}>
<Reveal delay={(index % 4) * 0.06}>
<MediaFrame media={portraitOf(person)} aspect="aspect-[3/4]" shape="arch" sizes="(min-width: 768px) 22vw, 50vw" showLabel={false} />