Something went wrong. Try again.
This string has no description
Something went wrong. Try again.
2.1 kB · 79 lines · Created 10mo ago
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980<!-- Root Layout Component This is the root layout that wraps all pages in the application. It handles: - Setting up the favicon - Loading global styles (Open Props and custom color variables) - Configuring the Inter font family - Applying global CSS resets and base styles - Rendering child pages through the {children} render tag--><script lang="ts"> import favicon from '$src/assets/favicon.svg'; import ogImage from '$src/assets/og-image.png'; import '$lib/styles/open-props.css'; import '$lib/styles/root-colours.css';
// Props from SvelteKit - contains the page content to render let { children } = $props();</script>
<svelte:head> <link rel="icon" href={favicon} /> <link rel="preconnect" href="https://rsms.me/"> <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta property="og:title" content="Jollywhoppers" /> <meta property="og:description" content="A group making jolly stuff that's a real whopper" /> <meta property="og:image" content={ogImage} /> <meta property="og:url" content="https://your-domain.com" /> <meta name="twitter:title" content="Jollywhoppers" /> <meta name="twitter:description" content="A group making jolly stuff that's a real whopper" /> <meta name="twitter:image" content={ogImage} /> </svelte:head>
{@render children()}
<style> :global { :root { font-family: Inter, var(--font-sans); font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */ text-rendering: optimizeLegibility; } @supports (font-variation-settings: normal) { :root { font-family: InterVariable, var(--font-sans); } }
html { scroll-behavior: smooth; }
body { margin: 0; padding: 0; }
* { box-sizing: border-box; }
::selection { background-color: var(--color-accent-500); color: white; }
img::selection { color: var(--color-accent-500); background-color: var(--color-accent-500); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } }</style>