Ilia Mashkov
88 lines
2.6 KiB
Svelte
88 lines
2.6 KiB
Svelte
<!--
|
|
Component: Layout
|
|
Application shell with providers and page wrapper
|
|
-->
|
|
<script lang="ts">
|
|
import { themeManager } from '$features/ChangeAppTheme';
|
|
import G from '$shared/assets/G.svg';
|
|
import { ResponsiveProvider } from '$shared/lib';
|
|
import { Footer } from '$widgets/Footer';
|
|
import clsx from 'clsx';
|
|
|
|
import {
|
|
type Snippet,
|
|
onDestroy,
|
|
onMount,
|
|
} from 'svelte';
|
|
|
|
interface Props {
|
|
/**
|
|
* Content snippet
|
|
*/
|
|
children: Snippet;
|
|
}
|
|
|
|
let { children }: Props = $props();
|
|
let fontsReady = $state(true);
|
|
const theme = $derived(themeManager.value);
|
|
|
|
onMount(() => themeManager.init());
|
|
onDestroy(() => themeManager.destroy());
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<link rel="icon" href={G} type="image/svg+xml" />
|
|
|
|
<link rel="preconnect" href="https://api.fontshare.com" />
|
|
<link
|
|
rel="preconnect"
|
|
href="https://cdn.fontshare.com"
|
|
crossorigin="anonymous"
|
|
/>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link
|
|
rel="preconnect"
|
|
href="https://fonts.gstatic.com"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<link
|
|
rel="preload"
|
|
as="style"
|
|
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
|
|
media="print"
|
|
onload={(e => ((e.currentTarget as HTMLLinkElement).media = 'all'))}
|
|
/>
|
|
<noscript>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
|
|
/>
|
|
</noscript>
|
|
<title>GlyphDiff | Typography & Typefaces</title>
|
|
<meta
|
|
name="description"
|
|
content="Compare typefaces side by side. Adjust size, weight, leading, and tracking to find the perfect typographic pairing."
|
|
/>
|
|
</svelte:head>
|
|
|
|
<ResponsiveProvider>
|
|
<div
|
|
id="app-root"
|
|
class={clsx(
|
|
'min-h-screen w-auto flex flex-col bg-surface dark:bg-dark-bg relative',
|
|
theme === 'dark' ? 'dark' : '',
|
|
)}
|
|
>
|
|
{#if fontsReady}
|
|
{@render children?.()}
|
|
{/if}
|
|
|
|
<Footer />
|
|
</div>
|
|
</ResponsiveProvider>
|