817 bytes View directory
1 <script lang="ts">
2 import Header from './Header.svelte';
3 import './layout.css';
4
5 let { children } = $props();
6 </script>
7
8 <div class="app">
9 <Header />
11 <main>
12 {@render children()}
13 </main>
15 <footer>
16 <p>
17 visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to learn about SvelteKit
18 </p>
19 </footer>
20 </div>
22 <style>
23 .app {
24 display: flex;
25 flex-direction: column;
26 min-height: 100vh;
27 }
29 main {
30 flex: 1;
31 display: flex;
32 flex-direction: column;
33 padding: 1rem;
34 width: 100%;
35 max-width: 64rem;
36 margin: 0 auto;
37 box-sizing: border-box;
38 }
40 footer {
41 display: flex;
42 flex-direction: column;
43 justify-content: center;
44 align-items: center;
45 padding: 12px;
46 }
48 footer a {
49 font-weight: bold;
50 }
52 @media (min-width: 480px) {
53 footer {
54 padding: 12px 0;
55 }
56 }
57 </style>