website/src/routes/+layout.svelte

64 lines
1 KiB
Svelte

<script>
import "../app.scss";
import Header from "./Header.svelte";
import { fly } from 'svelte/transition'
export let data
</script>
<div class="app">
<Header />
{#key data.pathname}
<main
in:fly={{ x: -10, duration: 250, delay: 250 }}
out:fly={{ x: 5, duration: 250 }}
>
<slot />
</main>
{/key}
<footer>
<p>
&copy; Sangelo & LogolicusZ, 2023 | <a href="https://gitpot.org/ExploreCraft/website"> Source Code</a>
</p>
</footer>
</div>
<style>
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
display: flex;
flex-direction: column;
padding: 1rem;
width: 100%;
max-width: 64rem;
margin: 0 auto;
box-sizing: border-box;
}
footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 12px;
}
footer a {
font-weight: normal;
}
@media (min-width: 480px) {
footer {
padding: 0.1em 0;
}
}
</style>