b690c74ddf
- Rule cards now show before→after examples; strikethrough rule input renders with CSS line-through so the visual context is honest - Illegible-words rule shows output only — can't represent unreadable text as readable characters - Intro drops fictional family names in favour of "egal wer tippt" - Wikipedia card copy is more direct; link uses icon instead of parenthetical "(öffnet in neuem Tab)" text Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
47 lines
1.2 KiB
Svelte
47 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
type Props = {
|
|
icon: string;
|
|
title: string;
|
|
body: string;
|
|
beispielInput?: string;
|
|
beispielInputStrike?: boolean;
|
|
beispielOutput?: string;
|
|
beispielLabel?: string;
|
|
};
|
|
|
|
let {
|
|
icon,
|
|
title,
|
|
body,
|
|
beispielInput,
|
|
beispielInputStrike = false,
|
|
beispielOutput,
|
|
beispielLabel = 'Beispiel'
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<div class="border-brand-sand break-inside-avoid rounded-sm border bg-white p-5 shadow-sm">
|
|
<div class="mb-3 flex items-center gap-2">
|
|
<span aria-hidden="true" class="text-xl">{icon}</span>
|
|
<h3 class="font-serif text-base font-bold text-ink">{title}</h3>
|
|
</div>
|
|
<p class="font-serif text-sm leading-relaxed text-ink-2">{body}</p>
|
|
|
|
{#if beispielOutput !== undefined}
|
|
<div class="border-brand-sand mt-4 rounded-sm border bg-parchment px-4 py-3">
|
|
<p class="font-sans text-xs font-semibold tracking-wider text-ink-3 uppercase">
|
|
{beispielLabel}
|
|
</p>
|
|
<p class="mt-1 font-sans text-sm text-ink">
|
|
{#if beispielInput !== undefined}
|
|
<code
|
|
class={['font-mono', beispielInputStrike && 'line-through'].filter(Boolean).join(' ')}
|
|
>{beispielInput}</code
|
|
> →
|
|
{/if}
|
|
<code class="font-mono">{beispielOutput}</code>
|
|
</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|