guidebook/src/routes/__layout.svelte

51 lines
877 B
Svelte

<script>
import 'normalize.css';
import '../app.css';
import themeDark from 'svelte-highlight/styles/apprentice';
import themeLight from 'svelte-highlight/styles/atelier-forest-light';
import Header from '$lib/Header.svelte';
import Footer from '$lib/Footer.svelte';
let theme = `<style>
@media (prefers-color-scheme: light) {
${themeLight.slice(7, -7)}
}
@media (prefers-color-scheme: dark) {
${themeDark.slice(7, -7)}
}
</style>
`;
</script>
<svelte:head>
{@html theme}
</svelte:head>
<style>
main {
width: 100%;
}
.content {
max-width: 1200px;
margin: 0 auto;
margin-bottom: 100px;
display: flex;
flex-direction: column;
align-items: center;
}
footer {
width: 100%;
}
</style>
<main>
<header>
<Header/>
</header>
<div class="content">
<slot></slot>
</div>
</main>
<footer>
<Footer/>
</footer>