Peter Meier
3679978d6c
E: app.css Base-h1–h6 in @layer base → text-*!-Hacks in Titeln entfernt. Neue Atoms: IconButton (runde Icon-Buttons), Badge solid-Variante + uppercase. Migrationen (6 parallele Pässe): - IconButton: 19 runde Nav/Close-Buttons (Carousel, Galleries, QuoteCarousel, PostOverview, Organisations, ImageModal). - Badge: Kategorie/Status-Pills (PostCard, BlogOverview, kalender, Comments, CalendarBlock, FilesBlock, SearchableText, Stellingnahme). - ui-Atome: Formular-Inputs (Comments, termin-melden, Stellingnahme) → TextInput/ Textarea/Checkbox/SearchField; dunkle NewsletterInline bewusst raw. - Button-Atom: ~20 inline Buttons in StellingnahmeGeneratorBlock. - Radius-Sweep: Cards→rounded-lg (viele via .card-surface), Buttons/Inputs→rounded-md, Chips→rounded-full; StrommixBlock/Calendar/Files/Adressbuch u.a. svelte-check 0 errors, voller Prod-Build grün. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
37 lines
1.1 KiB
Svelte
37 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { onMount, onDestroy } from "svelte";
|
|
import IconButton from "$lib/components/IconButton.svelte";
|
|
|
|
let {
|
|
src,
|
|
alt = "",
|
|
onclose,
|
|
}: { src: string; alt?: string; onclose: () => void } = $props();
|
|
|
|
function onKeydown(e: KeyboardEvent) {
|
|
if (e.key === "Escape") onclose();
|
|
}
|
|
|
|
onMount(() => window.addEventListener("keydown", onKeydown));
|
|
onDestroy(() => {
|
|
if (typeof window !== "undefined")
|
|
window.removeEventListener("keydown", onKeydown);
|
|
});
|
|
</script>
|
|
|
|
<div
|
|
class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 p-4 cursor-zoom-out"
|
|
onclick={onclose}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={alt || "Bild Vollansicht"}
|
|
>
|
|
<img
|
|
{src}
|
|
{alt}
|
|
class="max-w-full max-h-full object-contain rounded shadow-2xl cursor-default"
|
|
onclick={(e) => e.stopPropagation()}
|
|
/>
|
|
<IconButton icon="lucide:x" label="Schließen" variant="ghost" size="md" onclick={onclose} class="absolute top-4 right-4" />
|
|
</div>
|