125 lines
3.3 KiB
Svelte
125 lines
3.3 KiB
Svelte
<script lang="ts">
|
||
import { m } from '$lib/paraglide/messages.js';
|
||
import RichtlinienRuleCard from '$lib/components/RichtlinienRuleCard.svelte';
|
||
|
||
const rules = [
|
||
{
|
||
icon: '❓',
|
||
title: m.richtlinien_rule_unleserlich_title(),
|
||
body: m.richtlinien_rule_unleserlich_body(),
|
||
beispielOutput: '[unleserlich]'
|
||
},
|
||
{
|
||
icon: '✗',
|
||
title: m.richtlinien_rule_durchgestrichen_title(),
|
||
body: m.richtlinien_rule_durchgestrichen_body(),
|
||
beispielOutput: '[durchgestrichen: der Text]'
|
||
},
|
||
{
|
||
icon: 'ſ',
|
||
title: m.richtlinien_rule_langes_s_title(),
|
||
body: m.richtlinien_rule_langes_s_body(),
|
||
beispielOutput: 's'
|
||
},
|
||
{
|
||
icon: '?',
|
||
title: m.richtlinien_rule_name_title(),
|
||
body: m.richtlinien_rule_name_body(),
|
||
beispielOutput: '[Müller?]'
|
||
},
|
||
{
|
||
icon: '💬',
|
||
title: m.richtlinien_rule_dialekt_title(),
|
||
body: m.richtlinien_rule_dialekt_body()
|
||
}
|
||
];
|
||
|
||
const klaerungChips = [
|
||
m.richtlinien_klaer_abkuerzungen(),
|
||
m.richtlinien_klaer_datumsformate(),
|
||
m.richtlinien_klaer_umbrueche(),
|
||
m.richtlinien_klaer_caps()
|
||
];
|
||
</script>
|
||
|
||
<svelte:head>
|
||
<title>{m.richtlinien_title()} — Familienarchiv</title>
|
||
</svelte:head>
|
||
|
||
<div class="mx-auto max-w-2xl px-4 py-10 font-serif">
|
||
<!-- Title -->
|
||
<h1 class="mb-4 text-3xl font-bold text-ink">{m.richtlinien_title()}</h1>
|
||
|
||
<!-- Intro -->
|
||
<p class="mb-8 text-base leading-relaxed text-ink-2">{m.richtlinien_intro()}</p>
|
||
|
||
<!-- Wikipedia info card -->
|
||
<div class="border-brand-sand mb-10 rounded-sm border bg-white p-5 shadow-sm">
|
||
<p class="mb-3 font-sans text-sm text-ink-2">{m.richtlinien_wiki_text()}</p>
|
||
<a
|
||
href="https://de.wikipedia.org/wiki/Kurrent"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
referrerpolicy="no-referrer"
|
||
class="inline-flex items-center gap-1 font-sans text-sm font-medium text-ink underline decoration-brand-mint decoration-[1.5px] underline-offset-[3px]"
|
||
>
|
||
{m.richtlinien_wiki_link()}
|
||
<span class="new-tab ml-1 text-[11px] text-ink-3">({m.common_opens_new_tab()})</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Rules section -->
|
||
<h2 class="mb-5 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||
{m.richtlinien_rules_label()}
|
||
</h2>
|
||
<div class="mb-10 flex flex-col gap-4">
|
||
{#each rules as rule (rule.title)}
|
||
<RichtlinienRuleCard
|
||
icon={rule.icon}
|
||
title={rule.title}
|
||
body={rule.body}
|
||
beispielOutput={rule.beispielOutput}
|
||
beispielLabel={m.richtlinien_beispiel_label()}
|
||
/>
|
||
{/each}
|
||
</div>
|
||
|
||
<!-- Noch in Klärung -->
|
||
<h2 class="mb-3 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||
{m.richtlinien_klaerung_label()}
|
||
</h2>
|
||
<p class="mb-4 font-serif text-sm leading-relaxed text-ink-2">
|
||
{m.richtlinien_klaerung_intro()}
|
||
</p>
|
||
<div class="mb-10 flex flex-wrap gap-2">
|
||
{#each klaerungChips as chip (chip)}
|
||
<span
|
||
class="border-brand-sand rounded-full border bg-white px-3 py-1 font-sans text-xs text-ink-2"
|
||
>{chip}</span
|
||
>
|
||
{/each}
|
||
</div>
|
||
|
||
<!-- Closing card -->
|
||
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
|
||
<h2 class="mb-2 font-serif text-lg font-bold text-ink">{m.richtlinien_closing_title()}</h2>
|
||
<p class="font-serif text-sm leading-relaxed text-ink-2">{m.richtlinien_closing_body()}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
@media print {
|
||
:global(.app-nav) {
|
||
display: none;
|
||
}
|
||
|
||
.new-tab {
|
||
display: none;
|
||
}
|
||
|
||
@page {
|
||
margin: 1.5cm;
|
||
}
|
||
}
|
||
</style>
|