85 lines
1.5 KiB
Vue
85 lines
1.5 KiB
Vue
<template>
|
|
<main class="page">
|
|
<article v-if="page" class="page__content">
|
|
<header v-if="page.title" class="page__header">
|
|
<h1 class="page__title">{{ page.title }}</h1>
|
|
</header>
|
|
|
|
<div v-if="page.content" class="page__body">
|
|
<strapi-blocks :content="page.content" />
|
|
</div>
|
|
</article>
|
|
|
|
<div v-else class="page-not-found">
|
|
<h1>Page not found</h1>
|
|
<p>The requested page could not be found.</p>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useData } from 'vike-vue/useData'
|
|
|
|
const { page } = useData()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
|
|
&__header {
|
|
margin-bottom: 3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
&__title {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
color: var(--theme-fg);
|
|
}
|
|
|
|
&__body {
|
|
line-height: 1.6;
|
|
|
|
:deep(h2) {
|
|
font-size: 2rem;
|
|
margin: 2.5rem 0 1rem 0;
|
|
}
|
|
|
|
:deep(h3) {
|
|
font-size: 1.5rem;
|
|
margin: 2rem 0 0.75rem 0;
|
|
}
|
|
|
|
:deep(p) {
|
|
margin: 1.25rem 0;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
:deep(ul, ol) {
|
|
margin: 1.25rem 0;
|
|
padding-left: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-not-found {
|
|
text-align: center;
|
|
padding: 4rem 0;
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--theme-fg);
|
|
}
|
|
|
|
p {
|
|
font-size: 1.1rem;
|
|
color: var(--theme-fg-muted, #666);
|
|
}
|
|
}
|
|
</style> |