You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
1.2 KiB
36 lines
1.2 KiB
<script lang="ts">
|
|
/**
|
|
* The composed page is its OWN document — `@` resets the layout, so the demo
|
|
* section's topbar and rail are NOT here. That is the point: a landing judged
|
|
* inside a demo frame is a landing judged against the wrong viewport, and the
|
|
* two things this page exists to measure (a pinned header, an affixed strip)
|
|
* both anchor to the viewport of their own document.
|
|
*
|
|
* The axes come from the URL, same as the block previews.
|
|
*/
|
|
import { page } from '$app/state';
|
|
import BootUix, { type BootLanguage } from '../_lib/BootUix.svelte';
|
|
import '@/uix/eidos/index.css';
|
|
|
|
let { children } = $props();
|
|
|
|
const mode = $derived(page.url.searchParams.get('mode') === 'dark' ? 'dark' : 'light');
|
|
const dir = $derived(page.url.searchParams.get('dir') === 'rtl' ? 'rtl' : 'ltr');
|
|
const language = $derived((page.url.searchParams.get('lang') ?? 'es') as BootLanguage);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<meta name="color-scheme" content="light dark" />
|
|
</svelte:head>
|
|
|
|
<BootUix {mode} {dir} {language}>
|
|
<div
|
|
data-theme={mode}
|
|
data-mode={mode}
|
|
{dir}
|
|
style="min-block-size: 100dvh; background: var(--color-surface-default); color: var(--color-content-primary);"
|
|
>
|
|
{@render children?.()}
|
|
</div>
|
|
</BootUix>
|