feat: improve catechesis page with expanded content, TOC, and i18n

- Add missing PDF content: Dt 4:12f, Mt 19:17, Sir 1:26 quotes in Ursprung/Warum sections
- Add äussere Seite section (Röm 12:1, 1 Kor 6:18-20, KKK 2702) and Gemeinschaftsgebet (Mt 18:20)
- Add pars potentialis concept to inner side section
- Add sticky section TOC nav for wide screens (1200px+)
- Align commandment highlight colors with tablet categories (God=orange, neighbor=blue)
- Use straight left borders instead of rounded on commandments
- Add German-only notice for English users on all catechesis pages
- Add disclaimer attributing errors to site author, not P. Ramm/FSSP
- Replace Inkscape katechese SVG with cleaner book icon on faith landing page
- Fix 10 commandments tablet SVG to show 5+5 lines

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-05 23:49:43 +02:00
parent 5e520122b9
commit 7539d17d0a
3 changed files with 363 additions and 392 deletions

View File

@@ -30,6 +30,23 @@
margin: 0 auto;
font-size: 1.1em;
}
.katechese-link {
position: relative;
}
.lang-badge {
position: absolute;
top: 0.4em;
right: 0.4em;
background: var(--nord10);
color: white;
font-size: 0.6rem;
font-weight: 700;
padding: 0.15em 0.4em;
border-radius: 3px;
line-height: 1;
letter-spacing: 0.05em;
z-index: 1;
}
</style>
@@ -75,25 +92,9 @@
<svg xmlns="http://www.w3.org/2000/svg"viewBox="6 -274 564 548"><path d="M392-162c-4-10-9-18-15-26 5-4 7-8 7-12 0-18-43-32-96-32s-96 14-96 32c0 4 3 8 7 12-6 8-11 16-15 26-15-11-24-24-24-38 0-35 57-64 128-64s128 29 128 64c0 14-9 27-24 38zm-104-22c35 0 64 29 64 64s-29 64-64 64-64-29-64-64 29-64 64-64zM82 159c3-22-3-48-20-64C34 68 16 30 16-12v-64c0-42 34-76 76-76 23 0 44 10 59 27l65 78c-21 16-37 40-43 67l-43 195c-4 17-2 34 5 49h-21c-26 0-46-24-42-50l10-55zm364 56L403 20c-6-27-21-51-42-67l64-77c15-18 36-28 59-28 42 0 76 34 76 76v64c0 42-18 80-46 107-17 16-23 42-20 64l10 56c4 26-16 49-42 49h-20c6-15 8-32 4-49zM220 31c7-32 35-55 68-55s61 23 68 55l43 194c5 20-11 39-31 39H208c-21 0-36-19-31-39l43-194z"/></svg>
<h3>Angelus</h3>
</a>
<a href="/{data.faithLang}/katechese">
<svg viewBox="0 0 56.664422 57.373692">
<g transform="translate(-346.55989,-393.80378)">
<g>
<path style="color:#000000;stroke-linecap:round;-inkscape-stroke:none" d="m 456.23047,509.13672 a 1.5,1.5 0 0 0 -1.5,1.5 1.5,1.5 0 0 0 1.5,1.5 h 53.66406 a 1.5,1.5 0 0 0 1.5,-1.5 1.5,1.5 0 0 0 -1.5,-1.5 z" transform="translate(-108.17112,-60.95933)" />
<g transform="translate(-108.17112,-60.959331)">
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 459.49805,499.79492 a 1.50015,1.50015 0 0 0 -1.5,1.5 v 9.24219 a 1.5,1.5 0 0 0 1.5,1.5 1.5,1.5 0 0 0 1.5,-1.5 v -7.74219 H 504.875 v 7.16602 a 1.5,1.5 0 0 0 1.5,1.5 1.5,1.5 0 0 0 1.5,-1.5 v -8.66602 a 1.50015,1.50015 0 0 0 -1.5,-1.5 z"/>
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 464.54883,468.27344 a 1.5,1.5 0 0 0 -1.5,1.5 v 31.46289 a 1.5,1.5 0 0 0 1.5,1.5 1.5,1.5 0 0 0 1.5,-1.5 v -31.46289 a 1.5,1.5 0 0 0 -1.5,-1.5 z"/>
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 501.99023,467.93359 a 1.5,1.5 0 0 0 -1.49804,1.5 l 0.01,31.32813 a 1.5,1.5 0 0 0 1.50196,1.5 1.5,1.5 0 0 0 1.49804,-1.50195 l -0.01,-31.32618 a 1.5,1.5 0 0 0 -1.50196,-1.5 z"/>
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 460.71289,461.20898 a 1.50015,1.50015 0 0 0 -1.5,1.5 v 6.88672 a 1.50015,1.50015 0 0 0 1.5,1.5 h 10.29688 a 1.5,1.5 0 0 0 1.5,-1.5 1.5,1.5 0 0 0 -1.5,-1.5 h -8.79688 v -3.88672 h 41.50391 v 3.69141 h -8.31641 a 1.5,1.5 0 0 0 -1.5,1.5 1.5,1.5 0 0 0 1.5,1.5 h 9.81641 a 1.50015,1.50015 0 0 0 1.5,-1.5 v -6.69141 a 1.50015,1.50015 0 0 0 -1.5,-1.5 z"/>
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 471.07227,461.29883 a 1.5,1.5 0 0 0 -1.5,1.5 v 28.28711 a 1.50015,1.50015 0 0 0 1.88867,1.44922 l 11.50781,-3.08399 11.95508,3.20313 a 1.50015,1.50015 0 0 0 1.88867,-1.44727 v -28.27344 a 1.5,1.5 0 0 0 -1.5,-1.5 1.5,1.5 0 0 0 -1.5,1.5 v 26.31836 l -10.45508,-2.80273 a 1.50015,1.50015 0 0 0 -0.77734,0 l -10.00781,2.68359 v -26.33398 a 1.5,1.5 0 0 0 -1.5,-1.5 z"/>
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 480.62109,454.93555 -9.63672,0.043 a 1.50015,1.50015 0 0 0 -1.49414,1.5 v 6.28125 a 1.5,1.5 0 0 0 1.5,1.5 1.5,1.5 0 0 0 1.5,-1.5 v -4.78711 l 8.13672,-0.0371 c 0.77001,0 1.02148,0.56256 1.10157,0.77148 l 0.0449,3.13867 a 1.5,1.5 0 0 0 1.52148,1.47852 1.5,1.5 0 0 0 1.47852,-1.52149 l -0.0508,-3.46875 a 1.50015,1.50015 0 0 0 -0.084,-0.47851 c 0,0 -1.09277,-2.91992 -4.01172,-2.91992 a 1.50015,1.50015 0 0 0 -0.006,0 z"/>
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 495.15625,454.76367 -8.86523,0.008 c -2.5527,0.001 -4.04883,2.05469 -4.04883,2.05469 a 1.5,1.5 0 0 0 0.14648,2.11719 1.5,1.5 0 0 0 2.11719,-0.14649 c 0,0 1.18681,-1.02539 1.78711,-1.02539 a 1.50015,1.50015 0 0 0 0.002,0 l 7.35156,-0.006 -0.0215,3.83594 a 1.5,1.5 0 0 0 1.49023,1.50977 1.5,1.5 0 0 0 1.50977,-1.49219 l 0.0312,-5.34766 a 1.50015,1.50015 0 0 0 -1.5,-1.50781 z"/>
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 483.12891,468.0293 a 1.5,1.5 0 0 0 -1.5,1.5 v 12.26953 a 1.5,1.5 0 0 0 1.5,1.5 1.5,1.5 0 0 0 1.5,-1.5 V 469.5293 a 1.5,1.5 0 0 0 -1.5,-1.5 z"/>
<path style="color:#000000;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="m 479.31641,471.66797 a 1.5,1.5 0 0 0 -1.5,1.5 1.5,1.5 0 0 0 1.5,1.5 h 7.97265 a 1.5,1.5 0 0 0 1.5,-1.5 1.5,1.5 0 0 0 -1.5,-1.5 z"/>
</g>
</g>
</g>
</svg>
<a href="/{data.faithLang}/katechese" class="katechese-link">
{#if isEnglish}<span class="lang-badge">DE</span>{/if}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -226 532 506"><path d="M256-107v310l1-1c54-22 113-34 172-34h19v-320h-19c-42 0-84 8-123 25-17 7-34 14-50 20zm-25-79 25 10 25-10c47-20 97-30 148-30h35c27 0 48 22 48 48v352c0 27-21 48-48 48h-35c-51 0-101 10-148 30l-13 5c-8 3-16 3-24 0l-13-5c-47-20-97-30-148-30H48c-26 0-48-21-48-48v-352c0-26 22-48 48-48h35c51 0 101 10 148 30z" fill="currentColor"/></svg>
<h3>Katechese</h3>
</a>
</LinksGrid>

View File

@@ -1,6 +1,7 @@
<script>
import LinksGrid from '$lib/components/LinksGrid.svelte';
let { data } = $props();
const isEnglish = $derived(data.lang === 'en');
</script>
<svelte:head>
@@ -24,26 +25,47 @@
font-size: var(--text-sm);
margin-top: var(--space-sm);
}
.disclaimer {
text-align: center;
color: var(--color-text-tertiary);
font-size: var(--text-xs);
font-style: italic;
max-width: 500px;
}
.lang-notice {
text-align: center;
color: var(--nord10);
font-style: italic;
font-size: var(--text-sm);
margin-bottom: var(--space-sm);
}
</style>
<h1>Katechese</h1>
{#if isEnglish}
<p class="lang-notice">This catechesis is only available in German.</p>
{/if}
<p>
Aufgearbeitete Lehrinhalte aus dem Glaubenskurs von P. Martin Ramm FSSP.
</p>
<p class="source">Quelle: Glaubenskurs, 3. Hauptteil</p>
<p class="disclaimer">Diese Seiten stellen eine freie Aufbereitung der erhaltenen Unterlagen dar und sind kein offizielles Angebot von P. Martin Ramm oder der FSSP. Etwaige Fehler oder Missverständnisse sind dem Verfasser dieser Seiten anzulasten.</p>
<LinksGrid>
<a href="/{data.faithLang}/katechese/zehn-gebote">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="2 14 96 68" xmlns="http://www.w3.org/2000/svg">
<rect x="8" y="20" width="38" height="55" rx="12" ry="12" stroke="currentColor" stroke-width="3" fill="none"/>
<rect x="54" y="20" width="38" height="55" rx="12" ry="12" stroke="currentColor" stroke-width="3" fill="none"/>
<line x1="18" y1="35" x2="36" y2="35" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="18" y1="43" x2="36" y2="43" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="18" y1="51" x2="36" y2="51" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="64" y1="35" x2="82" y2="35" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="64" y1="43" x2="82" y2="43" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="64" y1="51" x2="82" y2="51" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="64" y1="59" x2="82" y2="59" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="18" y1="31" x2="36" y2="31" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="18" y1="39" x2="36" y2="39" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="18" y1="47" x2="36" y2="47" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="18" y1="55" x2="36" y2="55" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="18" y1="63" x2="36" y2="63" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="64" y1="31" x2="82" y2="31" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="64" y1="39" x2="82" y2="39" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="64" y1="47" x2="82" y2="47" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="64" y1="55" x2="82" y2="55" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
<line x1="64" y1="63" x2="82" y2="63" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
</svg>
<h3>Die 10 Gebote</h3>
</a>