61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<script setup lang="ts">
|
||
const config = useAppConfig()
|
||
const theme = useVThemeSSR()
|
||
const vdisp = ref(useVDisplay())
|
||
const { reader } = storeToRefs(usePageStore())
|
||
|
||
useHead({
|
||
titleTemplate: (chunk?) => {
|
||
return chunk === config.title.short
|
||
? config.title.full
|
||
: `${chunk} – ${config.title.short}`
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<VThemeProvider
|
||
:theme="theme.dark.value ? config.theme.dark : config.theme.light"
|
||
>
|
||
<div
|
||
id="ender-layout"
|
||
class="p-animated d-flex flex-column align-items-center h-100"
|
||
:class="{ 'pt-sm-5': !reader }"
|
||
>
|
||
<AClientOnly appear mode="out-in">
|
||
<SwipeControls v-if="vdisp.xs" />
|
||
</AClientOnly>
|
||
|
||
<NuxtLayout
|
||
name="card"
|
||
class="animate__animated-sm animate__delay-1-5s animate__fadeInDown"
|
||
>
|
||
<template #footer>
|
||
<AClientOnly
|
||
appear
|
||
mode="in-out"
|
||
enter="animate__animated animate__delay-1s animate__fadeIn"
|
||
leave="animate__animated animate__fadeOut"
|
||
>
|
||
<Flooter v-if="vdisp.xs" opaque />
|
||
</AClientOnly>
|
||
</template>
|
||
</NuxtLayout>
|
||
</div>
|
||
|
||
<AClientOnly
|
||
appear
|
||
mode="out-in"
|
||
enter="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow"
|
||
leave="animate__animated animate__fadeOutDown"
|
||
>
|
||
<Flooter v-if="vdisp.smAndUp && !reader" class="floaty mb-2 px-2" />
|
||
</AClientOnly>
|
||
|
||
<ClientOnly>
|
||
<template #fallback> </template>
|
||
<Portal layout="#ender-layout" animate randomize fade />
|
||
</ClientOnly>
|
||
</VThemeProvider>
|
||
</template>
|