From 7954d57cf19b8708a596235d6fe93027c2af3885 Mon Sep 17 00:00:00 2001 From: Alexander Bocken Date: Tue, 3 Feb 2026 20:51:20 +0100 Subject: [PATCH] rosary: reduce bundle size and improve responsive layout Remove redundant CSS already handled by Prayer.svelte, drop unused rosenkranz.css import, and replace inline BenedictusMedal component (34KB, ~52 DOM elements) with a static SVG referenced via . Use fluid sidebar width (clamp) for smoother desktop/mobile transition. --- .../[rosary=rosaryLang]/+page.svelte | 56 +++------------- static/glaube/benedictus.svg | 67 +++++++++++++++++++ 2 files changed, 76 insertions(+), 47 deletions(-) create mode 100644 static/glaube/benedictus.svg diff --git a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte index 0f5bc37..e812b62 100644 --- a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte +++ b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte @@ -2,7 +2,6 @@ import { onMount } from "svelte"; import { createLanguageContext } from "$lib/contexts/languageContext.js"; import "$lib/css/christ.css"; -import "$lib/css/rosenkranz.css"; import Kreuzzeichen from "$lib/components/prayers/Kreuzzeichen.svelte"; import Credo from "$lib/components/prayers/Credo.svelte"; import Paternoster from "$lib/components/prayers/Paternoster.svelte"; @@ -12,7 +11,6 @@ import FatimaGebet from "$lib/components/prayers/FatimaGebet.svelte"; import SalveRegina from "$lib/components/prayers/SalveRegina.svelte"; import RosaryFinalPrayer from "$lib/components/prayers/RosaryFinalPrayer.svelte"; import MichaelGebet from "$lib/components/prayers/MichaelGebet.svelte"; -import BenedictusMedal from "$lib/components/BenedictusMedal.svelte"; import CounterButton from "$lib/components/CounterButton.svelte"; import BibleModal from "$lib/components/BibleModal.svelte"; import Toggle from "$lib/components/Toggle.svelte"; @@ -753,9 +751,9 @@ onMount(() => { gap: 2rem; } -@media (min-width: 1024px) { +@media (min-width: 900px) { .rosary-layout { - grid-template-columns: 400px 1fr; + grid-template-columns: clamp(250px, 30vw, 400px) 1fr; gap: 3rem; } } @@ -766,7 +764,7 @@ onMount(() => { } /* Mobile layout: fixed left sidebar for visualization */ -@media (max-width: 1023px) { +@media (max-width: 900px) { .rosary-layout { grid-template-columns: clamp(20px, 10vw, 80px) 1fr; gap: 0; @@ -866,7 +864,7 @@ onMount(() => { min-height: 30vh; } -@media (max-width: 1023px) { +@media (max-width: 900px) { .prayer-section.decade { padding-bottom: 1.5rem; } @@ -897,42 +895,6 @@ onMount(() => { font-size: 1.25em; } -.prayer-section :global(v) { - margin: 0; - display: block; -} - -.prayer-section :global(v:lang(la)) { - color: var(--nord6); -} - -.prayer-section :global(v:lang(de)) { - color: grey; -} - -.prayer-section :global(i) { - font-style: normal; - color: var(--nord11); - font-weight: 900; -} - -@media(prefers-color-scheme: light) { - .prayer-section :global(v:lang(la)) { - color: black; - } -} - -.prayer-section :global(v.mystery-text:lang(la)) { - color: var(--nord11) !important; - font-weight: 700; - font-size: 1.1em; -} - -.prayer-section :global(v.mystery-text:lang(de)) { - color: var(--nord12) !important; - font-weight: 700; - font-size: 0.95em; -} .repeat-count { color: var(--nord9); @@ -999,7 +961,7 @@ h1 { margin: 0 auto 2rem auto; } -@media (min-width: 700px) { +@media (min-width: 900px) { .controls-row { flex-direction: row; justify-content: center; @@ -1031,21 +993,21 @@ h1 { max-width: 500px; } -@media (min-width: 1024px) { +@media (min-width: 800px) { .mystery-selector.four-mysteries { grid-template-columns: repeat(4, 1fr); max-width: 900px; } } -@media (max-width: 768px) { +@media (max-width: 560px) { .mystery-selector:not(.four-mysteries) { grid-template-columns: 1fr; max-width: 400px; } } -@media (max-width: 500px) { +@media (max-width: 410px) { .mystery-selector.four-mysteries { grid-template-columns: 1fr; max-width: 400px; @@ -1323,7 +1285,7 @@ h1 { - + {#each Array(10) as _, i} diff --git a/static/glaube/benedictus.svg b/static/glaube/benedictus.svg new file mode 100644 index 0000000..6cf7b35 --- /dev/null +++ b/static/glaube/benedictus.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +