hiouhgjop[ojhgvvhj
1<!--
2 Root Layout Component
3
4 This is the root layout that wraps all pages in the application.
5 It handles:
6 - Setting up the favicon
7 - Loading global styles (Open Props and custom color variables)
8 - Configuring the Inter font family
9 - Applying global CSS resets and base styles
10 - Rendering child pages through the {children} render tag
11-->
12<script lang="ts">
13 import favicon from '$src/assets/favicon.svg';
14 import ogImage from '$src/assets/og-image.png';
15 import '$lib/styles/open-props.css';
16 import '$lib/styles/root-colours.css';
17
18 // Props from SvelteKit - contains the page content to render
19 let { children } = $props();
20</script>
21
22<svelte:head>
23 <link rel="icon" href={favicon} />
24 <link rel="preconnect" href="https://rsms.me/">
25 <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
26 <meta name="viewport" content="width=device-width, initial-scale=1" />
27 <meta property="og:title" content="Jollywhoppers" />
28 <meta property="og:description" content="A group making jolly stuff that's a real whopper" />
29 <meta property="og:image" content={ogImage} />
30 <meta property="og:url" content="https://your-domain.com" />
31 <meta name="twitter:title" content="Jollywhoppers" />
32 <meta name="twitter:description" content="A group making jolly stuff that's a real whopper" />
33 <meta name="twitter:image" content={ogImage} />
34
35</svelte:head>
36
37{@render children()}
38
39<style>
40 :global {
41 :root {
42 font-family: Inter, var(--font-sans);
43 font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
44 text-rendering: optimizeLegibility;
45 }
46 @supports (font-variation-settings: normal) {
47 :root { font-family: InterVariable, var(--font-sans); }
48 }
49
50 html {
51 scroll-behavior: smooth;
52 }
53
54 body {
55 margin: 0;
56 padding: 0;
57 }
58
59 * {
60 box-sizing: border-box;
61 }
62
63 ::selection {
64 background-color: var(--color-accent-500);
65 color: white;
66 }
67
68 img::selection {
69 color: var(--color-accent-500);
70 background-color: var(--color-accent-500);
71 }
72
73 @media (prefers-reduced-motion: reduce) {
74 html {
75 scroll-behavior: auto;
76 }
77 }
78 }
79</style>