simon-einzinger.de/docs/.vitepress/theme/layout/Layout.vue

44 lines
879 B
Vue

<script setup lang="ts">
import { useData } from "vitepress";
import TopBar from "./TopBar.vue";
import Home from "./Home.vue";
import NotFound from "./NotFound.vue";
import Footer from "./Footer.vue";
// https://vitepress.dev/reference/runtime-api#usedata
const { frontmatter, page } = useData();
</script>
<template>
<div class="custom-layout">
<TopBar />
<div class="content-container" v-if="frontmatter.home">
<Home />
</div>
<NotFound v-else-if="page.isNotFound" />
<div class="content-container" v-else>
<Content />
</div>
<Footer />
</div>
</template>
<style scoped>
.custom-layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content-container {
flex: 1;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 600px) {
.content-container {
padding: 0 1em;
}
}
</style>