improve toggle button alignment and prayer verse spacing
All checks were successful
CI / update (push) Successful in 24s
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:
@@ -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 {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,6 +1236,8 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Toggle Controls -->
|
||||
<div class="toggle-controls">
|
||||
<!-- Luminous Mysteries Toggle -->
|
||||
<Toggle
|
||||
bind:checked={includeLuminous}
|
||||
@@ -1235,6 +1247,7 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
|
||||
|
||||
<!-- Language Toggle -->
|
||||
<LanguageToggle />
|
||||
</div>
|
||||
|
||||
<div class="rosary-layout">
|
||||
<!-- Sidebar: Rosary Visualization -->
|
||||
|
||||
Reference in New Issue
Block a user