diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx index 62a0ffb..0f8ac86 100644 --- a/src/components/Gallery.tsx +++ b/src/components/Gallery.tsx @@ -34,7 +34,7 @@ export function Gallery({ images, showLabels }: { images: readonly Media[]; show // Grosses Bild links ueber zwei Reihen, rechts zwei Bilder, darunter ein Panorama. const layout = ["md:col-span-7 md:row-span-2", "md:col-span-5", "md:col-span-5", "md:col-span-12"]; const aspect = (index: number) => - index === 0 ? "aspect-[4/3] md:aspect-auto md:h-full" : index === 3 ? "aspect-[4/3] md:aspect-[21/8]" : "aspect-[4/3]"; + index === 0 ? "aspect-[4/3] md:aspect-auto md:h-full" : index === 3 ? "aspect-[3/2] md:aspect-[3/1]" : "aspect-[3/2]"; return ( <> diff --git a/src/components/MediaFrame.tsx b/src/components/MediaFrame.tsx index 3edccf5..7543d0c 100644 --- a/src/components/MediaFrame.tsx +++ b/src/components/MediaFrame.tsx @@ -1,49 +1,25 @@ import Image from "next/image"; import type { Media, PlaceholderTone } from "@/content/site"; -const TONES: Record = { - villa: { background: "linear-gradient(172deg, #efe2cc 0%, #e0c7a2 52%, #c49a6c 100%)", shape: "arch" }, - terrace: { background: "linear-gradient(185deg, #e9dcc6 0%, #d7c29d 60%, #9f8b62 100%)", shape: "cypress" }, - room: { background: "linear-gradient(160deg, #f3ebdf 0%, #e3d3bb 60%, #cdb592 100%)", shape: "window" }, - garden: { background: "linear-gradient(190deg, #e6e0cc 0%, #c9c3a0 55%, #8c8a64 100%)", shape: "cypress" }, - portrait: { background: "linear-gradient(170deg, #eadccb 0%, #d4b99c 60%, #a8805f 100%)", shape: "figure" }, - studio: { background: "linear-gradient(175deg, #e4ddd3 0%, #cabdac 60%, #8f8273 100%)", shape: "figure" }, -}; +/* + * Platzhalter als typografische Tafeln: ruhiger Farbton aus der Palette, + * ein angeschnittener Bodoni-Buchstabe aus "ARTISTA" (bzw. die Jahreszahl + * im Cover) und ein feines Passepartout. Sie wirken gestaltet, sind aber + * eindeutig kein Foto und damit als Platzhalter erkennbar. + */ +type Plate = { background: string; glyph: string; italic?: boolean; style: React.CSSProperties }; -function Shape({ shape }: { shape: (typeof TONES)[PlaceholderTone]["shape"] }) { - const common = { fill: "currentColor", className: "absolute inset-0 h-full w-full text-ink/10" } as const; - switch (shape) { - case "arch": - return ( - - - - - ); - case "cypress": - return ( - - - - - - ); - case "window": - return ( - - - - - ); - case "figure": - return ( - - - - - ); - } -} +// Groessen und Lagen in Container-Einheiten (cqh/cqw): der Anschnitt sieht +// in jeder Tafelgroesse gleich aus. +const TONES: Record = { + cover: { background: "#ddd0bd", glyph: "27", italic: true, style: { fontSize: "92cqh", right: "-3cqw", bottom: "-20cqh" } }, + villa: { background: "#e2d6c4", glyph: "A", style: { fontSize: "105cqh", left: "5cqw", bottom: "-22cqh" } }, + terrace: { background: "#d6ccb8", glyph: "R", italic: true, style: { fontSize: "118cqh", right: "-4cqw", bottom: "-30cqh" } }, + room: { background: "#e8dfd2", glyph: "T", style: { fontSize: "112cqh", left: "22cqw", top: "-34cqh" } }, + garden: { background: "#cfcab6", glyph: "S", italic: true, style: { fontSize: "150cqh", right: "7cqw", bottom: "-58cqh" } }, + portrait: { background: "#dccfbe", glyph: "R", style: { fontSize: "92cqh", left: "-10cqw", bottom: "-14cqh" } }, + studio: { background: "#d2c9bd", glyph: "A", italic: true, style: { fontSize: "96cqh", right: "-16cqw", bottom: "-16cqh" } }, +}; type Props = { media: Media; @@ -73,12 +49,19 @@ export function MediaFrame({ media, aspect, sizes, showLabel, priority, classNam
- + + {tone.glyph} + + {showLabel && ( - + Platzhalter: {media.label} )} diff --git a/src/content/site.ts b/src/content/site.ts index cbb2173..44359ec 100644 --- a/src/content/site.ts +++ b/src/content/site.ts @@ -18,7 +18,7 @@ * Offene Punkte: docs/OFFENE-PUNKTE.md */ -export type PlaceholderTone = "villa" | "garden" | "room" | "terrace" | "portrait" | "studio"; +export type PlaceholderTone = "cover" | "villa" | "garden" | "room" | "terrace" | "portrait" | "studio"; export type Media = | { kind: "placeholder"; label: string; tone: PlaceholderTone } @@ -35,7 +35,7 @@ export const site = { headline: "Gemeinsam wachsen. In Italien.", subline: "Das ARTISTA Modelcamp 2027 bringt Models an einem Ort in Italien zusammen – zum Lernen, Arbeiten und Wohnen unter einem Dach.", - media: placeholder("Leitmotiv: Bild oder Video folgt", "villa"), + media: placeholder("Leitmotiv: Bild oder Video folgt", "cover"), }, camp: {