feat: add transitions between pages
This commit is contained in:
Sebin Nyshkim
parent
f2b408fce5
commit
68a43b6b9c
9 changed files with 269 additions and 227 deletions
|
|
@ -59,7 +59,11 @@ const close = () => {
|
|||
<LanguageButton>
|
||||
<LanguageIcon @click.prevent="showModal()" />
|
||||
</LanguageButton>
|
||||
<RouterView />
|
||||
<RouterView v-slot="{ Component }">
|
||||
<Transition name="fade" mode="out-in">
|
||||
<component :is="Component" :key="$route.path" />
|
||||
</Transition>
|
||||
</RouterView>
|
||||
</main>
|
||||
|
||||
<SiteFooter>v{{ version }} © {{ new Date().getFullYear() }} Sebin Nyshkim</SiteFooter>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,11 @@ import CircleInfoIcon from '@/assets/icons/CircleInfoIcon.vue'
|
|||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
scrollBehavior: () => {
|
||||
return { top: 0 }
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ top: 0 })
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
routes: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@
|
|||
--page-background-image: url(@/assets/layered-waves-light.svg);
|
||||
--page-background-image-height: 100vw;
|
||||
--page-background-image-max-height: 50vh;
|
||||
--page-transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
||||
--page-transform: translateY(5em);
|
||||
|
||||
--paragraph-margin: 1rem;
|
||||
|
||||
|
|
@ -286,3 +288,10 @@
|
|||
--navigation-width-expanded: calc(var(--navigation-size) * 3.75 + env(safe-area-inset-left));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
:root {
|
||||
--page-transition: opacity 0.5s ease;
|
||||
--page-transform: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -171,3 +171,14 @@ table {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: var(--page-transition);
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: var(--page-transform);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,149 +15,151 @@ const colors = [
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
</section>
|
||||
<article>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
</section>
|
||||
|
||||
<RefImage dropshadow>
|
||||
<template v-if="$route.query.nsfw">
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
alt="Viktor Ref by sabertoofs"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
<RefImage dropshadow>
|
||||
<template v-if="$route.query.nsfw">
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-ref-NSFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
alt="Viktor Ref by sabertoofs"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
:alt="`${$t('anatomy.images.back.caption')} by sabertoofs`"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-ref-SFW-alpha.png?w=375;420;500;750;840;1000;1125;1260;1500&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 500px, (min-width: 50em) 420px, 375px"
|
||||
:alt="`${$t('anatomy.images.back.caption')} by sabertoofs`"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #caption>
|
||||
{{ $t('anatomy.images.back.caption') }} ©
|
||||
<a href="http://twitter.com/sabertoofs">sabertoofs</a>
|
||||
</template>
|
||||
</RefImage>
|
||||
<template #caption>
|
||||
{{ $t('anatomy.images.back.caption') }} ©
|
||||
<a href="http://twitter.com/sabertoofs">sabertoofs</a>
|
||||
</template>
|
||||
</RefImage>
|
||||
|
||||
<ColorTable :colors="colors"></ColorTable>
|
||||
<ColorTable :colors="colors"></ColorTable>
|
||||
|
||||
<section>
|
||||
<p v-for="(p, i) in $tm('anatomy.paragraphs[0]')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
<section>
|
||||
<p v-for="(p, i) in $tm('anatomy.paragraphs[0]')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
|
||||
<RefImage dropshadow>
|
||||
<template v-if="$route.query.nsfw">
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
<RefImage dropshadow>
|
||||
<template v-if="$route.query.nsfw">
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
(min-width: 50em) 590px,
|
||||
(min-width: 27em) 530px,
|
||||
430px"
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
(min-width: 50em) 590px,
|
||||
(min-width: 27em) 530px,
|
||||
430px"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-front-NSFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
(min-width: 50em) 590px,
|
||||
(min-width: 27em) 530px,
|
||||
430px"
|
||||
alt="Viktor frontal shot by sabertoofs"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
alt="Viktor frontal shot by sabertoofs"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
<template v-else>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=avif&quality=75&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
(min-width: 50em) 590px,
|
||||
(min-width: 27em) 530px,
|
||||
430px"
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
type="image/avif"
|
||||
/>
|
||||
<source
|
||||
srcset="
|
||||
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=webp&quality=100&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
(min-width: 50em) 590px,
|
||||
(min-width: 27em) 530px,
|
||||
430px"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
srcset="
|
||||
@/assets/viktor-front-SFW-alpha.png?w=430;530;590;710;860;1060;1180;1420;1290;1590;1770;2130&format=png&withoutEnlargement&as=srcset
|
||||
"
|
||||
sizes="(min-width: 64em) 710px,
|
||||
(min-width: 50em) 590px,
|
||||
(min-width: 27em) 530px,
|
||||
430px"
|
||||
:alt="`${$t('anatomy.images.front.caption')} by sabertoofs`"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
:alt="`${$t('anatomy.images.front.caption')} by sabertoofs`"
|
||||
loading="lazy"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #caption>
|
||||
{{ $t('anatomy.images.front.caption') }} ©
|
||||
<a href="http://twitter.com/sabertoofs">sabertoofs</a>
|
||||
</template>
|
||||
</RefImage>
|
||||
<template #caption>
|
||||
{{ $t('anatomy.images.front.caption') }} ©
|
||||
<a href="http://twitter.com/sabertoofs">sabertoofs</a>
|
||||
</template>
|
||||
</RefImage>
|
||||
|
||||
<section>
|
||||
<p v-for="(p, i) in $tm('anatomy.paragraphs[1]')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
<section>
|
||||
<p v-for="(p, i) in $tm('anatomy.paragraphs[1]')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -25,73 +25,79 @@ const attributions = [
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
<h2>{{ $t('attributions.artwork.heading') }}</h2>
|
||||
</section>
|
||||
<AttributionTable :attributions="attributions" />
|
||||
<section>
|
||||
<h2>{{ $t('attributions.other.heading') }}</h2>
|
||||
</section>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('attributions.other.headings[0]') }}</th>
|
||||
<th>{{ $t('attributions.other.headings[1]') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.icons[0]') }}</td>
|
||||
<td>
|
||||
<a href="https://fontawesome.com/license/free" target="_blank" rel="noopener noreferrer">
|
||||
Font Awesome
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.headingFont[0]') }}</td>
|
||||
<td>
|
||||
<a
|
||||
href="https://github.com/MichalSahar/Secular"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Secular One
|
||||
</a>
|
||||
{{ $t('attributions.other.headingFont[1]') }}
|
||||
<a href="https://github.com/MichalSahar" target="_blank" rel="noopener noreferrer">
|
||||
Michal Sahar
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.copyFont[0]') }}</td>
|
||||
<td>
|
||||
<a
|
||||
href="https://antonkoovit.com/typefaces/arvo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Arvo
|
||||
</a>
|
||||
{{ $t('attributions.other.copyFont[1]') }}
|
||||
<a href="https://antonkoovit.com/" target="_blank" rel="noopener noreferrer">
|
||||
Anton Koovit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.background[0]') }}</td>
|
||||
<td>
|
||||
{{ $t('attributions.other.background[1][0]') }}
|
||||
<a href="https://haikei.app/" target="_blank" rel="noopener noreferrer">Haikei</a>
|
||||
{{ $t('attributions.other.background[1][1]') }}
|
||||
<a href="https://zcreativelabs.com/" target="_blank" rel="noopener noreferrer">
|
||||
z creative labs
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<article>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
<h2>{{ $t('attributions.artwork.heading') }}</h2>
|
||||
</section>
|
||||
<AttributionTable :attributions="attributions" />
|
||||
<section>
|
||||
<h2>{{ $t('attributions.other.heading') }}</h2>
|
||||
</section>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('attributions.other.headings[0]') }}</th>
|
||||
<th>{{ $t('attributions.other.headings[1]') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.icons[0]') }}</td>
|
||||
<td>
|
||||
<a
|
||||
href="https://fontawesome.com/license/free"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Font Awesome
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.headingFont[0]') }}</td>
|
||||
<td>
|
||||
<a
|
||||
href="https://github.com/MichalSahar/Secular"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Secular One
|
||||
</a>
|
||||
{{ $t('attributions.other.headingFont[1]') }}
|
||||
<a href="https://github.com/MichalSahar" target="_blank" rel="noopener noreferrer">
|
||||
Michal Sahar
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.copyFont[0]') }}</td>
|
||||
<td>
|
||||
<a
|
||||
href="https://antonkoovit.com/typefaces/arvo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Arvo
|
||||
</a>
|
||||
{{ $t('attributions.other.copyFont[1]') }}
|
||||
<a href="https://antonkoovit.com/" target="_blank" rel="noopener noreferrer">
|
||||
Anton Koovit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('attributions.other.background[0]') }}</td>
|
||||
<td>
|
||||
{{ $t('attributions.other.background[1][0]') }}
|
||||
<a href="https://haikei.app/" target="_blank" rel="noopener noreferrer">Haikei</a>
|
||||
{{ $t('attributions.other.background[1][1]') }}
|
||||
<a href="https://zcreativelabs.com/" target="_blank" rel="noopener noreferrer">
|
||||
z creative labs
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</article>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -26,20 +26,22 @@ const jobIcons = [
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
<p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
<article>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
<p v-for="(p, i) in $tm('career.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
|
||||
<TimelineList>
|
||||
<TimelineItem v-for="(job, idx) in ($tm('career.jobs') as Job[])" :key="idx">
|
||||
<template #icon>
|
||||
<component :is="jobIcons[idx as number]"></component>
|
||||
</template>
|
||||
<template #headline>{{ job.title }}</template>
|
||||
<template #content>
|
||||
<p>{{ job.desc }}</p>
|
||||
</template>
|
||||
</TimelineItem>
|
||||
</TimelineList>
|
||||
<TimelineList>
|
||||
<TimelineItem v-for="(job, idx) in ($tm('career.jobs') as Job[])" :key="idx">
|
||||
<template #icon>
|
||||
<component :is="jobIcons[idx as number]"></component>
|
||||
</template>
|
||||
<template #headline>{{ job.title }}</template>
|
||||
<template #content>
|
||||
<p>{{ job.desc }}</p>
|
||||
</template>
|
||||
</TimelineItem>
|
||||
</TimelineList>
|
||||
</article>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -48,24 +48,26 @@ const sexData = [
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
</section>
|
||||
<article>
|
||||
<section>
|
||||
<h1>{{ $t(`${$route.meta.title}`) }}</h1>
|
||||
</section>
|
||||
|
||||
<DataTable :headings="heads" :data="data"></DataTable>
|
||||
<DataTable :headings="heads" :data="data"></DataTable>
|
||||
|
||||
<section>
|
||||
<h2>{{ $t('general.personality.heading') }}</h2>
|
||||
<p v-for="(p, i) in $tm('general.personality.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>{{ $t('general.personality.heading') }}</h2>
|
||||
<p v-for="(p, i) in $tm('general.personality.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>{{ $t('general.sexuality.heading') }}</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>{{ $t('general.sexuality.heading') }}</h2>
|
||||
</section>
|
||||
|
||||
<DataTable :headings="sexHeads" :data="sexData"></DataTable>
|
||||
<DataTable :headings="sexHeads" :data="sexData"></DataTable>
|
||||
|
||||
<section>
|
||||
<p v-for="(p, i) in $tm('general.sexuality.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
<section>
|
||||
<p v-for="(p, i) in $tm('general.sexuality.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,16 @@ import WelcomeHeader from '@/components/WelcomeHeader.vue'
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<WelcomeHeader>
|
||||
<template #main>{{ $t('welcomeHeader.mainTitle') }}</template>
|
||||
<template #sub>{{ $t('welcomeHeader.subTitle') }}</template>
|
||||
</WelcomeHeader>
|
||||
<article>
|
||||
<WelcomeHeader>
|
||||
<template #main>{{ $t('welcomeHeader.mainTitle') }}</template>
|
||||
<template #sub>{{ $t('welcomeHeader.subTitle') }}</template>
|
||||
</WelcomeHeader>
|
||||
|
||||
<section>
|
||||
<h3>{{ $t('home.heading') }}</h3>
|
||||
<section>
|
||||
<h3>{{ $t('home.heading') }}</h3>
|
||||
|
||||
<p v-for="(p, i) in $tm('home.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
<p v-for="(p, i) in $tm('home.paragraphs')" :key="i">{{ p }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue