The @theme `:root` block in the compiled CSS was overriding the inline style tag because the stylesheet loads after svelte:head content. Double :root selector gives the inline override higher specificity. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
30 lines
1.2 KiB
Svelte
30 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import Header from '$lib/components/public/Header.svelte';
|
|
import Footer from '$lib/components/public/Footer.svelte';
|
|
|
|
let { data, children } = $props();
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<meta name="description" content="{data.orgConfig.orgInfo.name} — {data.orgConfig.orgInfo.tagline || 'A foster-based animal rescue'}" />
|
|
<meta property="og:site_name" content={data.orgConfig.orgInfo.name} />
|
|
<meta property="og:type" content="website" />
|
|
{@html `<style>:root:root{--color-primary:${data.orgConfig.branding.primaryColor};--color-primary-light:${data.orgConfig.branding.primaryColorLight};--color-primary-dark:${data.orgConfig.branding.primaryColorDark};--color-accent:${data.orgConfig.branding.accentColor};--color-accent-light:${data.orgConfig.branding.accentColorLight};--color-accent-dark:${data.orgConfig.branding.accentColorDark}}</style>`}
|
|
</svelte:head>
|
|
|
|
<div class="min-h-screen flex flex-col bg-warm-bg">
|
|
<Header
|
|
orgName={data.orgConfig.orgInfo.name}
|
|
logoUrl={data.orgConfig.branding.logoUrl}
|
|
/>
|
|
<main class="flex-1">
|
|
{@render children()}
|
|
</main>
|
|
<Footer
|
|
orgName={data.orgConfig.orgInfo.name}
|
|
sponsors={data.sponsors}
|
|
facebookUrl={data.orgConfig.orgInfo.facebookUrl}
|
|
instagramUrl={data.orgConfig.orgInfo.instagramUrl}
|
|
/>
|
|
</div>
|