@janga/norna 0.7.9 → 0.7.11

package/src/components/SiteSection.astro

@@ -1,6 +1,6 @@
 ---
-import type { CollectionEntry } from 'astro:content';
-import { resolveTypographyOverride } from '../../scripts/lib/typography.mjs';
+import projectConfig from '../../scripts/lib/project-config.mjs';
+import { resolveSectionSurface } from '../../scripts/lib/presentation.mjs';
 import CardList from './CardList.astro';
 import GalleryGrid from './GalleryGrid.astro';
 import type { ResolvedSection } from '../lib/sectionContent';
@@ -9,31 +9,44 @@ type ResponsiveValue<T> = { desktop: T; mobile: T };
 type ResponsiveOverride<T> = { desktop?: T; mobile?: T };
 type TextAlign = 'left' | 'center' | 'right';
 type TextSize = 'small' | 'medium' | 'large' | 'xlarge';
-type SectionPresentationOverride = {
-	backgroundColor?: string;
-	textColor?: string;
-	typography?: NonNullable<ResolvedSection['presentation']>['typography'];
-};
+type TextWidth = 'narrow' | 'normal' | 'wide';
 type ResolvedPagePresentation = {
-	backgroundColor: string;
-	textColor: string;
+	palette: {
+		surfaces: Record<'base' | 'soft' | 'emphasis', { backgroundColor: string; textColor: string }>;
+	};
+	sectionSurfaces: {
+		mode: 'none' | 'cycle';
+		sequence: Array<'base' | 'soft' | 'emphasis'>;
+	};
 	typography: {
 		preset: string;
 		values: any;
 	};
 };
+type VisualTheme = {
+	gallery: {
+		maxAvailableWidthPercent: {
+			desktop: number;
+			mobile: number;
+		};
+	};
+};
 
 interface Props {
 	section: ResolvedSection;
 	pagePresentation: ResolvedPagePresentation;
+	visualTheme: VisualTheme;
+	sectionIndex: number;
 	headingLevel: 1 | 2;
 	priorityGalleryImage?: boolean;
 }
 
-const { section, pagePresentation, headingLevel, priorityGalleryImage = false } = Astro.props;
+const { section, pagePresentation, visualTheme, sectionIndex, headingLevel, priorityGalleryImage = false } = Astro.props;
 const HeadingTag = headingLevel === 1 ? 'h1' : 'h2';
 // Sections are authored with Markdown ## headings even when the first one renders as HTML h1.
 const sectionHeadingVisualLevel = 'h2';
+const firstContentBlockIsVisual = section.contentBlocks[0]?.type !== 'html'
+	&& section.contentBlocks[0]?.type !== 'note';
 type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
 const headingSizeValues: Record<HeadingLevel, Record<TextSize, ResponsiveValue<string>>> = {
 	h1: {
@@ -145,7 +158,6 @@ const captionSizeValues: Record<TextSize, ResponsiveValue<string>> = {
 		mobile: 'clamp(1.04rem, 0.98rem + 0.18vw, 1.12rem)',
 	},
 };
-const sectionOverride = section.presentation as SectionPresentationOverride | undefined;
 const getSizeValue = (
 	sizeValues: Record<TextSize, ResponsiveValue<string>>,
 	size: TextSize,
@@ -153,15 +165,17 @@ const getSizeValue = (
 const getHeadingSizeValue = (level: HeadingLevel, size: TextSize) => (
 	headingSizeValues[level][size]
 );
-const backgroundColor = sectionOverride?.backgroundColor
-	?? pagePresentation.backgroundColor;
-const textColor = sectionOverride?.textColor
-	?? pagePresentation.textColor;
-const resolvedTypography = resolveTypographyOverride(pagePresentation.typography, sectionOverride?.typography);
-const typography = resolvedTypography.values;
+const textWidthValues: Record<TextWidth, string> = {
+	narrow: 'min(60ch, var(--text-width))',
+	normal: 'min(72ch, var(--text-width))',
+	wide: 'min(72ch, var(--gallery-layout-width))',
+};
+const surface = resolveSectionSurface(pagePresentation, sectionIndex);
+const typography = pagePresentation.typography.values;
 const heading = typography.headings[sectionHeadingVisualLevel] as {
 	align: ResponsiveValue<TextAlign>;
 	size: TextSize;
+	weight: number;
 	lineHeight: number;
 	spacingBefore: string;
 	spacingAfter: string;
@@ -172,6 +186,7 @@ const markdownHeadings = Object.fromEntries(markdownHeadingLevels.map((level) =>
 	typography.headings[level] as {
 		align: ResponsiveValue<TextAlign>;
 		size: TextSize;
+		weight: number;
 		lineHeight: number;
 		spacingBefore: string;
 		spacingAfter: string;
@@ -188,20 +203,54 @@ const justifyByAlign: Record<TextAlign, string> = {
 	center: 'center',
 	right: 'flex-end',
 };
-const getAlignedTextWidth = (
-	align: ResponsiveValue<TextAlign>,
-	centeredWidth: string,
-): ResponsiveValue<string> => ({
-	desktop: align.desktop === 'center' ? centeredWidth : 'var(--gallery-layout-width)',
-	mobile: align.mobile === 'center' ? centeredWidth : 'var(--gallery-layout-width)',
-});
-const headingWidth = getAlignedTextWidth(headingAlign, '760px');
-const bodyWidth = getAlignedTextWidth(bodyAlign, 'var(--text-width)');
+const bodyWidthValue = textWidthValues[typography.body.width as TextWidth];
+const headingWidth = {
+	desktop: bodyWidthValue,
+	mobile: bodyWidthValue,
+};
+const bodyWidth = {
+	desktop: bodyWidthValue,
+	mobile: bodyWidthValue,
+};
+const isMediaBlock = (block: ResolvedSection['contentBlocks'][number]) => (
+	block.type === 'image-stack'
+	|| block.type === 'image-carousel'
+	|| block.type === 'card-list'
+);
 const hasMedia = section.contentBlocks.some((block) => (
 	block.type === 'image-stack'
 	|| block.type === 'image-carousel'
 	|| (block.type === 'card-list' && block.cards.some((card) => card.image))
 ));
+const hasMarginNotes = section.contentBlocks.some((block) => (
+	block.type === 'note'
+));
+const getNoteGridRow = (blocks: ResolvedSection['contentBlocks'], blockIndex: number) => Math.max(
+	1,
+	blocks.slice(0, blockIndex).filter((block) => block.type === 'html').length,
+);
+const noteLabel = projectConfig.locale.labels.note;
+const contentGroups: Array<
+	| { type: 'reading'; blocks: ResolvedSection['contentBlocks'] }
+	| { type: 'media'; block: Extract<ResolvedSection['contentBlocks'][number], { type: 'image-stack' | 'image-carousel' | 'card-list' }> }
+> = [];
+let readingBlocks: ResolvedSection['contentBlocks'] = [];
+const flushReadingBlocks = () => {
+	if (readingBlocks.length === 0) return;
+	contentGroups.push({ type: 'reading', blocks: readingBlocks });
+	readingBlocks = [];
+};
+
+for (const block of section.contentBlocks) {
+	if (isMediaBlock(block)) {
+		flushReadingBlocks();
+		contentGroups.push({ type: 'media', block });
+	} else {
+		readingBlocks = [...readingBlocks, block];
+	}
+}
+
+flushReadingBlocks();
 const markdownHeadingStyle = (level: 'h3' | 'h4') => {
 	const headingConfig = markdownHeadings[level];
 	const fontSize = getHeadingSizeValue(level, headingConfig.size);
@@ -211,18 +260,20 @@ const markdownHeadingStyle = (level: 'h3' | 'h4') => {
 		`--section-markdown-${level}-align-mobile: ${headingConfig.align.mobile}`,
 		`--section-markdown-${level}-font-size-desktop: ${fontSize.desktop}`,
 		`--section-markdown-${level}-font-size-mobile: ${fontSize.mobile}`,
+		`--section-markdown-${level}-font-weight: ${headingConfig.weight}`,
 		`--section-markdown-${level}-line-height: ${headingConfig.lineHeight}`,
 		`--section-markdown-${level}-spacing-before: ${headingConfig.spacingBefore}`,
 		`--section-markdown-${level}-spacing-after: ${headingConfig.spacingAfter}`,
 	];
 };
 const sectionStyle = [
-	`--section-background-color: ${backgroundColor}`,
-	`--section-text-color: ${textColor}`,
+	`--section-background-color: ${surface.backgroundColor}`,
+	`--section-text-color: ${surface.textColor}`,
 	`--section-heading-align-desktop: ${headingAlign.desktop}`,
 	`--section-heading-align-mobile: ${headingAlign.mobile}`,
 	`--section-heading-font-size-desktop: ${headingFontSize.desktop}`,
 	`--section-heading-font-size-mobile: ${headingFontSize.mobile}`,
+	`--section-heading-font-weight: ${heading.weight}`,
 	`--section-heading-line-height: ${heading.lineHeight}`,
 	`--section-heading-spacing-after: ${heading.spacingAfter}`,
 	`--section-heading-width-desktop: ${headingWidth.desktop}`,
@@ -250,7 +301,13 @@ const sectionStyle = [
 
 <section
 	id={section.id}
-	class="site-section"
+	class:list={[
+		'site-section',
+		{
+			'site-section-first-block-is-visual': firstContentBlockIsVisual,
+			'site-section-has-margin-notes': hasMarginNotes,
+		},
+	]}
 	data-section-title={section.title}
 	style={sectionStyle}
 >
@@ -260,33 +317,134 @@ const sectionStyle = [
 		</header>
 
 		<div class:list={['section-body', { 'section-body-has-gallery': hasMedia, 'section-body-text-only': !hasMedia }]}>
-			{section.contentBlocks.map((block, blockIndex) => {
-				if (block.type === 'html') {
-					return block.html && <div class="section-markdown" set:html={block.html} />;
+			{contentGroups.map((group, groupIndex) => {
+				if (group.type === 'reading') {
+					if (hasMarginNotes && group.blocks.some((block) => block.type === 'note')) {
+						return (
+							<div class="section-reading-layout">
+								{group.blocks.map((block, blockIndex) => {
+									if (block.type === 'html') {
+										return block.html && <div class="section-markdown" set:html={block.html} />;
+									}
+
+									const noteGridRow = getNoteGridRow(group.blocks, blockIndex);
+									return (
+										<aside
+											class="section-note section-note-margin"
+											id={block.id}
+											aria-label={`${noteLabel}${block.number ? ` ${block.number}` : ''}`}
+											role="note"
+											data-note-id={block.id}
+											style={`grid-row: ${noteGridRow};`}
+										>
+											{block.number && block.referenceId && (
+												<a class="section-note-number" href={`#${block.referenceId}`} aria-label={`${noteLabel} ${block.number}`}>
+													{block.number}
+												</a>
+											)}
+											<div class="section-note-content" set:html={block.html} />
+										</aside>
+									);
+								})}
+							</div>
+						);
+					}
+
+					return group.blocks.map((block, blockIndex) => {
+						if (block.type === 'html') {
+							return block.html && <div class="section-markdown" set:html={block.html} />;
+						}
+
+						const noteGridRow = getNoteGridRow(group.blocks, blockIndex);
+						return (
+							<aside
+								class="section-note section-note-margin"
+								id={block.id}
+								aria-label={`${noteLabel}${block.number ? ` ${block.number}` : ''}`}
+								role="note"
+								data-note-id={block.id}
+								style={`grid-row: ${noteGridRow};`}
+							>
+								{block.number && block.referenceId && (
+									<a class="section-note-number" href={`#${block.referenceId}`} aria-label={`${noteLabel} ${block.number}`}>
+										{block.number}
+									</a>
+								)}
+								<div class="section-note-content" set:html={block.html} />
+							</aside>
+						);
+					});
 				}
 
+				const block = group.block;
 				if (block.type === 'image-carousel') {
 					return (
 						<GalleryGrid
 							title={section.title}
 							items={[{ carousel: block.images }]}
-							priorityFirstImage={priorityGalleryImage && blockIndex === 0}
+							maxAvailableWidthPercent={visualTheme.gallery.maxAvailableWidthPercent}
+							priorityFirstImage={priorityGalleryImage && groupIndex === 0}
 						/>
 					);
 				}
 
 				if (block.type === 'card-list') {
-					return <CardList cards={block.cards} layout={block.layout} flow={block.flow} size={block.size} width={block.width} />;
+					return <CardList cards={block.cards} maxAvailableWidthPercent={visualTheme.gallery.maxAvailableWidthPercent} layout={block.layout} flow={block.flow} size={block.size} width={block.width} />;
 				}
 
 				return (
 					<GalleryGrid
 						title={section.title}
 						items={block.images}
-						priorityFirstImage={priorityGalleryImage && blockIndex === 0}
+						maxAvailableWidthPercent={visualTheme.gallery.maxAvailableWidthPercent}
+						priorityFirstImage={priorityGalleryImage && groupIndex === 0}
 					/>
 				);
 			})}
 		</div>
 	</div>
 </section>
+
+<script>
+	const noteParts = Array.from(document.querySelectorAll<HTMLElement>('[data-note-id]'));
+	const noteReferences = noteParts.filter((part) => part.matches('.section-note-ref a'));
+	const marginNotes = noteParts.filter((part) => part.matches('.section-note'));
+
+	const setNoteState = (noteId: string, active: boolean) => {
+		noteParts
+			.filter((part) => part.dataset.noteId === noteId)
+			.forEach((part) => part.classList.toggle('is-referenced', active));
+	};
+
+	noteParts.forEach((part) => {
+		const noteId = part.dataset.noteId;
+		if (!noteId) return;
+
+		part.addEventListener('pointerenter', () => setNoteState(noteId, true));
+		part.addEventListener('pointerleave', () => setNoteState(noteId, false));
+		part.addEventListener('focusin', () => setNoteState(noteId, true));
+		part.addEventListener('focusout', () => setNoteState(noteId, false));
+	});
+
+	const alignMarginNotes = () => {
+		const wideLayout = window.matchMedia('(min-width: 1101px)').matches;
+		if (!wideLayout) {
+			marginNotes.forEach((note) => note.style.removeProperty('--section-note-offset'));
+			return;
+		}
+
+		marginNotes.forEach((note) => {
+			const noteId = note.dataset.noteId;
+			const reference = noteReferences.find((part) => part.dataset.noteId === noteId);
+			if (!noteId || !reference) return;
+
+			note.style.removeProperty('--section-note-offset');
+			const offset = reference.getBoundingClientRect().top - note.getBoundingClientRect().top;
+			note.style.setProperty('--section-note-offset', `${Math.max(0, offset)}px`);
+		});
+	};
+
+	alignMarginNotes();
+	window.addEventListener('resize', alignMarginNotes);
+	document.fonts?.ready.then(alignMarginNotes);
+</script>

package/src/content.config.ts

@@ -10,13 +10,15 @@ const siteEntryId = `${siteDirLabel
 	.replace(/^[./\\]+/, '')
 	.replace(/[^a-zA-Z0-9-]+/g, '-')
 	.replace(/^-+|-+$/g, '') || 'site'}-content`;
-const colorValue = z.string().regex(
-	/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/,
-	'Use a hex color such as "#000000".',
-);
 const textAlign = z.enum(['left', 'center', 'right']);
 const textSize = z.enum(['small', 'medium', 'large', 'xlarge']);
+const textWidth = z.enum(['narrow', 'normal', 'wide']);
+const headingWeight = z.union([z.literal(400), z.literal(500), z.literal(600), z.literal(700)]);
 const typographyPreset = z.enum(['quiet-gallery', 'compact-gallery', 'text-forward', 'statement']);
+const themePreset = z.enum(['portfolio', 'documentation', 'project', 'statement']);
+const presentationPalette = z.enum(['dark', 'light', 'paper']);
+const sectionSurfaceMode = z.enum(['none', 'cycle']);
+const sectionSurface = z.enum(['base', 'soft', 'emphasis']);
 const spacingDensity = z.enum(['compact', 'normal', 'airy']);
 const lineHeight = z.number()
 	.min(1, 'Use a unitless line height of at least 1.')
@@ -31,7 +33,6 @@ const visualCssLength = z.string().regex(
 	new RegExp(`^(?:0|${visualCssLengthValue}|clamp\\(\\s*${visualCssLengthValue}\\s*,\\s*${visualCssLengthValue}\\s*,\\s*${visualCssLengthValue}\\s*\\))$`),
 	'Use a CSS length such as "0", "900px", "56rem", "90%", or "clamp(1rem, 4vw, 3rem)".',
 );
-const inlineStyleName = z.string().regex(/^[a-z][a-z0-9-]*$/);
 const dateOnly = z.string()
 	.regex(/^\d{4}-\d{2}-\d{2}$/, 'Use YYYY-MM-DD format.')
 	.refine(isDateOnly, 'Use a real calendar date.');
@@ -59,6 +60,7 @@ const commonTextPresentationOverride = {
 };
 const headingPresentationOverride = z.object({
 	...commonTextPresentationOverride,
+	weight: headingWeight.optional(),
 	spacingBefore: cssLength.optional(),
 	spacingAfter: cssLength.optional(),
 }).strict();
@@ -70,6 +72,7 @@ const headingLevelsPresentationOverride = z.object({
 }).strict();
 const bodyPresentationOverride = z.object({
 	...commonTextPresentationOverride,
+	width: textWidth.optional(),
 	paragraphSpacing: cssLength.optional(),
 }).strict();
 const captionPresentationOverride = z.object({
@@ -81,14 +84,6 @@ const typographyOverrides = z.object({
 	body: bodyPresentationOverride.optional(),
 	caption: captionPresentationOverride.optional(),
 }).strict();
-const typography = z.object({
-	preset: typographyPreset.optional(),
-	rhythm: spacingDensity.optional(),
-	overrides: typographyOverrides.optional(),
-}).strict().refine(
-	(value) => value.preset !== undefined || value.rhythm !== undefined || value.overrides !== undefined,
-	'Specify preset, rhythm, overrides, or both.',
-);
 const themeTypography = z.object({
 	fontFamily: z.string()
 		.min(1)
@@ -115,9 +110,10 @@ const responsivePercent = z.union([
 	}).strict(),
 ]);
 const themeLayoutSpacing = z.object({
-	bodyToImages: responsiveCssLength.optional(),
+	blockGap: responsiveCssLength.optional(),
 	finalSectionBottom: responsiveCssLength.optional(),
 	firstSectionTop: responsiveCssLength.optional(),
+	headingToBlock: responsiveCssLength.optional(),
 	imageGap: responsiveCssLength.optional(),
 	sectionGap: responsiveCssLength.optional(),
 }).strict();
@@ -132,32 +128,15 @@ const themeGallery = z.object({
 	maxAvailableWidthPercent: responsivePercent.optional(),
 	maxAvailableHeightPercent: responsivePercent.optional(),
 }).strict();
-const sectionPresentationOverride = z.object({
-	backgroundColor: colorValue.optional(),
-	textColor: colorValue.optional(),
-	typography: typography.optional(),
-}).strict();
 const themePresentation = z.object({
-	backgroundColor: colorValue.optional(),
-	textColor: colorValue.optional(),
-	inlineStyles: z.record(inlineStyleName, z.object({
-		color: colorValue,
-	}).strict()).optional(),
-}).strict();
-const pagePresentation = z.object({
-	backgroundColor: colorValue.optional(),
-	textColor: colorValue.optional(),
-	typography: typography.optional(),
-}).strict();
-const frameColors = z.union([
-	z.enum(['theme', 'presentation']),
-	z.object({
-		backgroundColor: colorValue,
-		textColor: colorValue,
-	}).strict(),
-]);
-const frame = z.object({
-	colors: frameColors.optional(),
+	palette: presentationPalette.optional(),
+	sectionSurfaces: z.object({
+		mode: sectionSurfaceMode,
+		sequence: z.array(sectionSurface).min(1).max(3).optional(),
+	}).strict().refine(
+		(value) => !value.sequence || new Set(value.sequence).size === value.sequence.length,
+		'Each section surface may appear only once in a sequence.',
+	).optional(),
 }).strict();
 const pageNavigation = z.object({
 	include: z.boolean().optional(),
@@ -165,29 +144,73 @@ const pageNavigation = z.object({
 }).strict();
 const themeNavigation = z.object({
 	brand: z.string().min(1).optional(),
+	logo: z.object({
+		alt: z.string().min(1).optional(),
+		height: visualCssLength.optional(),
+	}).strict().optional(),
 }).strict();
 
 const sectionMetadata = z.object({
 	visible: visibilityWindow.optional(),
-	presentation: sectionPresentationOverride.optional(),
+}).strict();
+const banner = z.object({
+	id: z.string().regex(/^[a-z0-9-]+$/),
+	tone: z.enum(['warning']).default('warning'),
+	visible: visibilityWindow.optional(),
+	title: z.string().min(1),
+	text: z.string().min(1),
+}).strict();
+const banners = z.array(banner).optional().default([]).refine(
+	(values) => new Set(values.map((value) => value.id)).size === values.length,
+	'Banner ids must be unique.',
+);
+const dateTimeFormat = z.object({
+	locale: z.string().min(1),
+	timeZone: z.string().min(1),
+	dateStyle: z.string().min(1),
+	timeStyle: z.string().min(1),
+}).strict().refine((value) => {
+	try {
+		new Intl.DateTimeFormat(value.locale, {
+			dateStyle: value.dateStyle as Intl.DateTimeFormatOptions['dateStyle'],
+			timeStyle: value.timeStyle as Intl.DateTimeFormatOptions['timeStyle'],
+			timeZone: value.timeZone,
+		});
+		return true;
+	} catch {
+		return false;
+	}
+}, 'Use a valid Intl.DateTimeFormat configuration.');
+const sitewideFooter = z.object({
+	copyrightMessage: z.string().min(1).optional(),
+	buildInfo: z.object({
+		enabled: z.boolean().default(true),
+		text: z.string().min(1),
+		dateTimeFormat,
+	}).strict().optional(),
 }).strict();
 
 const siteSchema = z.object({
 	title: z.string(),
 	description: z.string(),
 	navigation: pageNavigation.optional(),
-	presentation: pagePresentation.optional(),
-	frame: frame.optional(),
 	sections: z.record(z.string().regex(/^[a-z0-9-]+$/), sectionMetadata).optional().default({}),
 });
 
-const themeSchema = z.object({
-	navigation: themeNavigation.optional(),
+export const themeVisualSchema = z.object({
+	preset: themePreset.optional(),
 	layout: themeLayout.optional(),
 	gallery: themeGallery.optional(),
 	typography: themeTypography.optional(),
 	presentation: themePresentation.optional(),
-	frame: frame.optional(),
+}).strict();
+
+const siteThemeSchema = themeVisualSchema;
+
+const sitewideSchema = z.object({
+	navigation: themeNavigation.optional(),
+	banners,
+	footer: sitewideFooter.optional(),
 }).strict();
 
 const site = defineCollection({
@@ -212,9 +235,18 @@ const theme = defineCollection({
 	loader: glob({
 		pattern: 'theme.md',
 		base: pathToFileURL(siteDir),
-		generateId: () => `${siteEntryId.replace(/-content$/, '')}-theme`,
+		generateId: ({ entry }) => entry,
+	}),
+	schema: siteThemeSchema,
+});
+
+const sitewide = defineCollection({
+	loader: glob({
+		pattern: 'sitewide-content.md',
+		base: pathToFileURL(siteDir),
+		generateId: () => `${siteEntryId.replace(/-content$/, '')}-sitewide`,
 	}),
-	schema: themeSchema,
+	schema: sitewideSchema,
 });
 
-export const collections = { site, theme };
+export const collections = { site, theme, sitewide };

package/src/layouts/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
+import { getPresentationCssVariables } from '../../scripts/lib/presentation.mjs';
 import { getIconLinks } from '../lib/sitePublicAssets';
 import { withBasePath } from '../lib/basePath';
 import '../styles/global.css';
@@ -9,18 +10,64 @@ type FrameColors = {
 	textColor: string;
 };
 
+type Presentation = {
+	palette: {
+		page: FrameColors;
+		css: Record<string, string>;
+		colorScheme: string;
+	};
+};
+type VisualTheme = {
+	layout: {
+		gutter: { desktop: string; mobile: string };
+		pageWidth: string;
+		spacing: {
+			firstSectionTop: { desktop: string; mobile: string };
+			blockGap: { desktop: string; mobile: string };
+			headingToBlock: { desktop: string; mobile: string };
+			imageGap: { desktop: string; mobile: string };
+			sectionGap: { desktop: string; mobile: string };
+			finalSectionBottom: { desktop: string; mobile: string };
+		};
+	};
+	gallery: {
+		width: string;
+		maxAvailableWidthPercent: { desktop: number; mobile: number };
+		maxAvailableHeightPercent: { desktop: number; mobile: number };
+	};
+	typography: { fontFamily: string };
+};
+
 interface Props {
 	title?: string;
 	description?: string;
+	presentation: Presentation;
+	visualTheme: VisualTheme;
 	frameColors: FrameColors;
 	pathname?: string;
+	footer?: {
+		copyrightMessage?: string;
+		buildInfo?: {
+			enabled: boolean;
+			text: string;
+			dateTimeFormat: {
+				locale: string;
+				timeZone: string;
+				dateStyle: string;
+				timeStyle: string;
+			};
+		};
+	};
 }
 
 const {
 	title = 'norna',
 	description = 'A norna site.',
+	presentation,
+	visualTheme,
 	frameColors,
 	pathname = '/',
+	footer,
 } = Astro.props;
 
 const documentTitle = title;
@@ -29,30 +76,33 @@ const iconLinks = getIconLinks();
 const scrollBehavior = projectConfig.navigation.smoothScroll.enabled ? 'smooth' : 'auto';
 const formatPercent = (value: number) => `${value}%`;
 const formatViewportHeightPercent = (value: number) => `${value}svh`;
-const layoutSpacing = projectConfig.layout.spacing;
+const layoutSpacing = visualTheme.layout.spacing;
 const documentStyle = [
 	`scroll-behavior: ${scrollBehavior}`,
-	`--font-sans: ${projectConfig.typography.fontFamily}`,
-	`--page-width: ${projectConfig.layout.pageWidth}`,
-	`--content-gutter-desktop: ${projectConfig.layout.gutter.desktop}`,
-	`--content-gutter-mobile: ${projectConfig.layout.gutter.mobile}`,
+	...Object.entries(getPresentationCssVariables(presentation)).map(([name, value]) => `${name}: ${value}`),
+	`--font-sans: ${visualTheme.typography.fontFamily}`,
+	`--page-width: ${visualTheme.layout.pageWidth}`,
+	`--content-gutter-desktop: ${visualTheme.layout.gutter.desktop}`,
+	`--content-gutter-mobile: ${visualTheme.layout.gutter.mobile}`,
 	`--space-nav-to-first-section-desktop: ${layoutSpacing.firstSectionTop.desktop}`,
 	`--space-nav-to-first-section-mobile: ${layoutSpacing.firstSectionTop.mobile}`,
-	`--space-section-body-to-gallery-desktop: ${layoutSpacing.bodyToImages.desktop}`,
-	`--space-section-body-to-gallery-mobile: ${layoutSpacing.bodyToImages.mobile}`,
+	`--space-content-block-gap-desktop: ${layoutSpacing.blockGap.desktop}`,
+	`--space-content-block-gap-mobile: ${layoutSpacing.blockGap.mobile}`,
+	`--space-heading-to-block-desktop: ${layoutSpacing.headingToBlock.desktop}`,
+	`--space-heading-to-block-mobile: ${layoutSpacing.headingToBlock.mobile}`,
 	`--space-gallery-item-desktop: ${layoutSpacing.imageGap.desktop}`,
 	`--space-gallery-item-mobile: ${layoutSpacing.imageGap.mobile}`,
 	`--space-section-to-section-desktop: ${layoutSpacing.sectionGap.desktop}`,
 	`--space-section-to-section-mobile: ${layoutSpacing.sectionGap.mobile}`,
 	`--space-final-section-bottom-desktop: ${layoutSpacing.finalSectionBottom.desktop}`,
 	`--space-final-section-bottom-mobile: ${layoutSpacing.finalSectionBottom.mobile}`,
-	`--gallery-width: ${projectConfig.gallery.width}`,
-	`--gallery-max-available-width-desktop: ${formatPercent(projectConfig.gallery.maxAvailableWidthPercent.desktop)}`,
-	`--gallery-max-available-width-mobile: ${formatPercent(projectConfig.gallery.maxAvailableWidthPercent.mobile)}`,
-	`--gallery-max-image-height-desktop: ${formatViewportHeightPercent(projectConfig.gallery.maxAvailableHeightPercent.desktop)}`,
-	`--gallery-max-image-height-mobile: ${formatViewportHeightPercent(projectConfig.gallery.maxAvailableHeightPercent.mobile)}`,
+	`--gallery-width: ${visualTheme.gallery.width}`,
+	`--gallery-max-available-width-desktop: ${formatPercent(visualTheme.gallery.maxAvailableWidthPercent.desktop)}`,
+	`--gallery-max-available-width-mobile: ${formatPercent(visualTheme.gallery.maxAvailableWidthPercent.mobile)}`,
+	`--gallery-max-image-height-desktop: ${formatViewportHeightPercent(visualTheme.gallery.maxAvailableHeightPercent.desktop)}`,
+	`--gallery-max-image-height-mobile: ${formatViewportHeightPercent(visualTheme.gallery.maxAvailableHeightPercent.mobile)}`,
 ].join('; ');
-const { buildInfo, copyrightMessage } = projectConfig.footer;
+const { buildInfo, copyrightMessage } = footer ?? {};
 const showBuildInfo = Boolean(buildInfo?.enabled);
 const buildTime = showBuildInfo
 	? new Intl.DateTimeFormat(buildInfo.dateTimeFormat.locale, {
@@ -75,7 +125,7 @@ const footerStyle = [
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="format-detection" content="telephone=no" />
 		<meta name="description" content={description} />
-		<meta name="theme-color" content="#000000" />
+		<meta name="theme-color" content={presentation.palette.page.backgroundColor} />
 		<link rel="canonical" href={canonicalUrl} />
 		<meta name="generator" content={Astro.generator} />
 		{iconLinks.map((iconLink) => (