improve toggle button alignment and prayer verse spacing
All checks were successful
CI / update (push) Successful in 24s

- Wrap rosary page toggles in centered container with left-aligned items
- Reduce spacing between toggles from 2rem to 0.5rem
- Simplify Toggle component styling (remove centering/margins)
- Add centered wrapper for gebete page toggle
- Add spacing between German verses in monolingual mode for readability
This commit is contained in:
2025-12-26 17:43:31 +01:00
parent 54cc31a03a
commit 731adda897
4 changed files with 30 additions and 14 deletions

View File

@@ -7,11 +7,6 @@
<style>
.toggle-wrapper {
display: flex;
justify-content: center;
margin-bottom: 2rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.toggle-wrapper label {

View File

@@ -100,6 +100,7 @@
/* German gets primary styling in monolingual mode */
.prayer-wrapper.monolingual :global(v:lang(de)) {
color: var(--nord6);
margin-bottom: 0.5em;
}
@media(prefers-color-scheme: light) {

View File

@@ -43,10 +43,17 @@ h1{
text-align: center;
font-size: 3rem;
}
.toggle-controls {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
</style>
<h1>Gebete</h1>
<LanguageToggle />
<div class="toggle-controls">
<LanguageToggle />
</div>
<div class="ccontainer">
<div class=container>

View File

@@ -901,6 +901,16 @@ h1 {
margin-bottom: 2rem;
}
/* Toggle controls container */
.toggle-controls {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
max-width: fit-content;
margin: 0 auto 2rem auto;
}
/* Mystery selector grid */
.mystery-selector {
display: grid;
@@ -1226,15 +1236,18 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
{/if}
</div>
<!-- Luminous Mysteries Toggle -->
<Toggle
bind:checked={includeLuminous}
label="Lichtreiche Geheimnisse einbeziehen"
on:change={handleToggleChange}
/>
<!-- Toggle Controls -->
<div class="toggle-controls">
<!-- Luminous Mysteries Toggle -->
<Toggle
bind:checked={includeLuminous}
label="Lichtreiche Geheimnisse einbeziehen"
on:change={handleToggleChange}
/>
<!-- Language Toggle -->
<LanguageToggle />
<!-- Language Toggle -->
<LanguageToggle />
</div>
<div class="rosary-layout">
<!-- Sidebar: Rosary Visualization -->