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>
|
<style>
|
||||||
.toggle-wrapper {
|
.toggle-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-wrapper label {
|
.toggle-wrapper label {
|
||||||
|
|||||||
@@ -100,6 +100,7 @@
|
|||||||
/* German gets primary styling in monolingual mode */
|
/* German gets primary styling in monolingual mode */
|
||||||
.prayer-wrapper.monolingual :global(v:lang(de)) {
|
.prayer-wrapper.monolingual :global(v:lang(de)) {
|
||||||
color: var(--nord6);
|
color: var(--nord6);
|
||||||
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: light) {
|
@media(prefers-color-scheme: light) {
|
||||||
|
|||||||
@@ -43,10 +43,17 @@ h1{
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
|
.toggle-controls {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<h1>Gebete</h1>
|
<h1>Gebete</h1>
|
||||||
|
|
||||||
|
<div class="toggle-controls">
|
||||||
<LanguageToggle />
|
<LanguageToggle />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="ccontainer">
|
<div class="ccontainer">
|
||||||
<div class=container>
|
<div class=container>
|
||||||
|
|||||||
@@ -901,6 +901,16 @@ h1 {
|
|||||||
margin-bottom: 2rem;
|
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 grid */
|
||||||
.mystery-selector {
|
.mystery-selector {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -1226,6 +1236,8 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Toggle Controls -->
|
||||||
|
<div class="toggle-controls">
|
||||||
<!-- Luminous Mysteries Toggle -->
|
<!-- Luminous Mysteries Toggle -->
|
||||||
<Toggle
|
<Toggle
|
||||||
bind:checked={includeLuminous}
|
bind:checked={includeLuminous}
|
||||||
@@ -1235,6 +1247,7 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
|
|||||||
|
|
||||||
<!-- Language Toggle -->
|
<!-- Language Toggle -->
|
||||||
<LanguageToggle />
|
<LanguageToggle />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="rosary-layout">
|
<div class="rosary-layout">
|
||||||
<!-- Sidebar: Rosary Visualization -->
|
<!-- Sidebar: Rosary Visualization -->
|
||||||
|
|||||||
Reference in New Issue
Block a user