doxa-life/doxa-maps-cdn
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

draft of mobile section on pray page

Browse source
This commit is contained in:
Nath 2026-09-24 14:39:46 +01:00
parent 766ab697c5
commit 18e61e92c2
2 changed files with 90 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
app/assets/styles/composition/_stack.scss
View file

@ -25,49 +25,9 @@
}
.stack-spacing-3xs,
.stack--3xs > * + * {
--stack-spacing: var(--spacing-3xs, 0.25rem);
}
.stack-spacing-2xs,
.stack--2xs > * + * {
--stack-spacing: var(--spacing-2xs, 0.25rem);
}
.stack-spacing-xs,
.stack--xs > * + * {
--stack-spacing: var(--spacing-xs, 0.5rem);
}
.stack-spacing-sm,
.stack--sm > * + * {
--stack-spacing: var(--spacing-sm, 0.5rem);
}
.stack-spacing-lg,
.stack--lg > * + * {
--stack-spacing: var(--spacing-lg, 2rem);
}
.stack-spacing-xl,
.stack--xl > * + * {
--stack-spacing: var(--spacing-xl, 2rem);
}
.stack-spacing-2xl,
.stack--2xl > * + * {
--stack-spacing: var(--spacing-2xl, 2rem);
}
.stack-spacing-3xl,
.stack--3xl > * + * {
--stack-spacing: var(--spacing-3xl, 2rem);
}
.stack-spacing-4xl,
.stack--4xl > * + * {
--stack-spacing: var(--spacing-4xl, 2rem);
.stack-spacing-0,
.stack--0 > * + * {
--stack-spacing: 0;
}
.stack-spacing-5xl,
@ -75,7 +35,47 @@
--stack-spacing: var(--spacing-5xl, 2rem);
}
.stack-spacing-0,
.stack--0 > * + * {
--stack-spacing: 0;
.stack-spacing-4xl,
.stack--4xl > * + * {
--stack-spacing: var(--spacing-4xl, 2rem);
}
.stack-spacing-3xl,
.stack--3xl > * + * {
--stack-spacing: var(--spacing-3xl, 2rem);
}
.stack-spacing-2xl,
.stack--2xl > * + * {
--stack-spacing: var(--spacing-2xl, 2rem);
}
.stack-spacing-xl,
.stack--xl > * + * {
--stack-spacing: var(--spacing-xl, 2rem);
}
.stack-spacing-lg,
.stack--lg > * + * {
--stack-spacing: var(--spacing-lg, 2rem);
}
.stack-spacing-sm,
.stack--sm > * + * {
--stack-spacing: var(--spacing-sm, 0.5rem);
}
.stack-spacing-xs,
.stack--xs > * + * {
--stack-spacing: var(--spacing-xs, 0.5rem);
}
.stack-spacing-2xs,
.stack--2xs > * + * {
--stack-spacing: var(--spacing-2xs, 0.25rem);
}
.stack-spacing-3xs,
.stack--3xs > * + * {
--stack-spacing: var(--spacing-3xs, 0.25rem);
}

44
app/pages/pray.vue
View file

@ -301,6 +301,50 @@ useTextHighlight()
</div>
</section>
<section>
<div class="container">
<div class="switcher | align-center" data-width="xl">
<div class="stack | grow-2 align-center">
<div class="stack stack--2xl">
<p class="color-brand-lighter font-weight-medium uppercase">
{{ t('The DOXA Prayer App') }}
</p>
<h2 class="highlight stack-spacing-sm" data-highlight-index="3">{{ t('Take the unreached with you') }}</h2>
<ul class="stack stack--sm" data-list-color="primary">
<li>{{ t('Daily reminders at the time you choose') }}</li>
<li>{{ t('Today\'s prayer ready to open') }}</li>
<li>{{ t('See how many people are praying with you now') }}</li>
</ul>
<div class="stack" id="app-store-links"></div>
<p class="font-size-sm color-brand-light">
{{ t('Download and choose your people group in the app.') }}
</p>
</div>
</div>
<div>
<picture>
<source
srcset="/assets/images/pray-02-PrayerFUEL-Phone-graphic-2.avif"
type="image/avif"
>
<source
srcset="/assets/images/pray-02-PrayerFUEL-Phone-graphic-2.webp"
type="image/webp"
>
<img
class="center"
src="/assets/images/pray-02-PrayerFUEL-Phone-graphic-2.png"
:alt="t('Your daily prayer guide')"
width="500"
height="872"
loading="lazy"
>
</picture>
</div>
</div>
</div>
</section>
<section>
<div class="container stack stack--5xl">
<figure class="text-center font-size-5xl font-heading">