@janga/norna 0.7.2 → 0.7.4

package/fixtures/basic/site/config.mjs

@@ -3,26 +3,6 @@ export default {
 		url: 'https://example.com/',
 		basePath: '/',
 	},
-	layout: {
-		pageWidth: '1180px',
-		gutter: {
-			desktop: 'clamp(1.25rem, 4vw, 3rem)',
-			mobile: '1rem',
-		},
-	},
-	gallery: {
-		maxAvailableWidthPercent: {
-			desktop: 100,
-			mobile: 100,
-		},
-		maxAvailableHeightPercent: {
-			desktop: 74,
-			mobile: 68,
-		},
-	},
-	typography: {
-		fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif",
-	},
 	navigation: {
 		smoothScroll: {
 			enabled: true,
@@ -36,7 +16,7 @@ export default {
 		labels: {
 			skipToContent: 'Skip to content',
 			sectionNavigation: 'Sections',
-			gallery: 'Gallery',
+			gallery: 'Images',
 		},
 	},
 	footer: {
@@ -53,7 +33,7 @@ export default {
 		},
 	},
 	github: {
-		repo: 'owner/fixture-gallery',
+		repo: 'owner/fixture-site',
 		branch: 'main',
 		pagesWorkflow: 'Deploy to GitHub Pages',
 	},

package/fixtures/basic/site/content.md

@@ -1,5 +1,5 @@
 ---
-title: Fixture Gallery
+title: Fixture Site
 description: Minimal cli-gallery fixture site.
 sections:
   - id: intro

package/fixtures/basic/site/theme.md

@@ -1,7 +1,11 @@
 ---
-presentation:
-  typography:
-    preset: quiet-gallery
+layout:
+  pageWidth: 1180px
+gallery:
+  width: 900px
+typography:
+  fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
+  preset: quiet-gallery
 frame:
   colors: presentation
 ---

package/package.json

@@ -2,7 +2,7 @@
   "name": "@janga/norna",
   "description": "A command-line publishing workflow for simple static sites.",
   "type": "module",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "license": "GPL-3.0-only",
   "repository": {
     "type": "git",
@@ -51,8 +51,8 @@
     "config:check": "node bin/norna.mjs config:check",
     "content:check": "node bin/norna.mjs content:check",
     "content:sync": "node bin/norna.mjs content:sync",
-    "typography:presets": "node bin/norna.mjs typography:presets",
-    "typography:show": "node bin/norna.mjs typography:show",
+    "typography:presets": "node bin/norna.mjs typography presets",
+    "typography:show": "node bin/norna.mjs typography show",
     "site:public": "node bin/norna.mjs site:public",
     "images": "node bin/norna.mjs images",
     "build": "node bin/norna.mjs build",

package/scripts/check-config.mjs

@@ -23,9 +23,10 @@ try {
 	console.log(`Base path: ${projectConfig.site.basePath}`);
 	console.log(`Page width: ${projectConfig.layout.pageWidth}`);
 	console.log(`Gutter: desktop ${projectConfig.layout.gutter.desktop}, mobile ${projectConfig.layout.gutter.mobile}`);
-	console.log(`Gallery width: ${projectConfig.gallery.width}`);
-	console.log(`Gallery max available width: desktop ${projectConfig.gallery.maxAvailableWidthPercent.desktop}%, mobile ${projectConfig.gallery.maxAvailableWidthPercent.mobile}%`);
-	console.log(`Gallery max available height: desktop ${projectConfig.gallery.maxAvailableHeightPercent.desktop}%, mobile ${projectConfig.gallery.maxAvailableHeightPercent.mobile}%`);
+	console.log(`Layout density: ${projectConfig.layout.density}`);
+	console.log(`Image area width: ${projectConfig.gallery.width}`);
+	console.log(`Image max available width: desktop ${projectConfig.gallery.maxAvailableWidthPercent.desktop}%, mobile ${projectConfig.gallery.maxAvailableWidthPercent.mobile}%`);
+	console.log(`Image max available height: desktop ${projectConfig.gallery.maxAvailableHeightPercent.desktop}%, mobile ${projectConfig.gallery.maxAvailableHeightPercent.mobile}%`);
 	console.log(`Font family: ${projectConfig.typography.fontFamily}`);
 	console.log(`Language: ${projectConfig.locale.lang}`);
 	console.log(`GitHub repo: ${projectConfig.github.repo}`);

package/scripts/deploy-site.mjs

@@ -196,7 +196,7 @@ const assertMainBranch = async () => {
 
 const assertDeployableStatus = async (entries, expectedImagePaths) => {
 	if (entries.length === 0) {
-		fail('Refusing to deploy: no changes to commit after the gallery build.');
+		fail('Refusing to deploy: no changes to commit after the Norna build.');
 	}
 
 	const unexpectedUntracked = entries.filter((entry) => (
@@ -206,7 +206,7 @@ const assertDeployableStatus = async (entries, expectedImagePaths) => {
 	if (unexpectedUntracked.length > 0) {
 		fail([
 			'Refusing to deploy: unexpected untracked files are present.',
-			`Only new referenced gallery images under ${siteImagesLabel}/<section-id>/ or ${siteRoutesLabel}/<route-folder>/images/<section-id>/ are staged automatically.`,
+			`Only new referenced images under ${siteImagesLabel}/<section-id>/ or ${siteRoutesLabel}/<route-folder>/images/<section-id>/ are staged automatically.`,
 			...unexpectedUntracked.map((entry) => `- ${formatEntry(entry)}`),
 		].join('\n'));
 	}
@@ -331,7 +331,7 @@ const deployCommittedMain = async () => {
 	await assertPushableBranch();
 	await runBuild();
 	await printStatusShort();
-	await assertCleanWorktree('Refusing to deploy: the gallery build produced uncommitted changes. Commit them before deploying.');
+	await assertCleanWorktree('Refusing to deploy: the Norna build produced uncommitted changes. Commit them before deploying.');
 	await fetchRemoteMain();
 
 	const relation = await assertPushableBranch();

package/scripts/init-site.mjs

@@ -13,12 +13,12 @@ const cliExecutableName = 'norna';
 const usage = `
 Usage: norna init <target-dir> [--type pure|embedded] [--site-dir <path>]
 
-Creates a new site project or adds a gallery source directory to an existing
+Creates a new site project or adds a Norna site directory to an existing
 project.
 
 Examples:
-  norna init my-gallery
-  norna init my-gallery --type pure
+  norna init my-site
+  norna init my-site --type pure
   norna init . --type embedded --site-dir presentation
 `.trim();
 
@@ -133,8 +133,8 @@ const galleryScripts = {
 	'norna:config:check': cliCommand('config:check'),
 	'norna:content:check': cliCommand('content:check'),
 	'norna:sync': cliCommand('content:sync'),
-	'norna:typography:presets': cliCommand('typography:presets'),
-	'norna:typography:show': cliCommand('typography:show'),
+	'norna:typography:presets': cliCommand('typography presets'),
+	'norna:typography:show': cliCommand('typography show'),
 	'norna:public': cliCommand('site:public'),
 	'norna:images': cliCommand('images'),
 	'norna:build': cliCommand('build'),
@@ -180,7 +180,7 @@ const existingEntries = await readDirectoryEntries(targetRoot);
 if (type === 'pure') {
 	if (existingEntries && existingEntries.length > 0) {
 		const existingPackageJson = existingEntries.includes('package.json')
-			? ' The target already contains package.json; use --type embedded to add a gallery to an existing project.'
+			? ' The target already contains package.json; use --type embedded to add a Norna site to an existing project.'
 			: '';
 		throw new Error(`Target directory must be empty for --type pure: ${targetRoot}.${existingPackageJson}`);
 	}
@@ -218,7 +218,7 @@ if (type === 'pure') {
 	const existingSiteEntries = await readDirectoryEntries(targetSiteDir);
 
 	if (existingSiteEntries && existingSiteEntries.length > 0) {
-		throw new Error(`Gallery site directory must be empty for --type embedded: ${targetSiteDir}`);
+		throw new Error(`Norna site directory must be empty for --type embedded: ${targetSiteDir}`);
 	}
 
 	addGalleryDependency(targetPackageJson, enginePackageJson.version);
@@ -246,4 +246,6 @@ console.log(`  cd ${targetRoot}`);
 console.log(type === 'embedded'
 	? '  npm install'
 	: '  npm install');
-console.log('  npm run norna:dev');
+console.log(type === 'embedded'
+	? '  npm run norna:dev'
+	: '  npm run dev');

package/scripts/lib/frontmatter-yaml.mjs

@@ -0,0 +1,85 @@
+const countIndent = (line) => line.match(/^\s*/)?.[0].length ?? 0;
+
+const stripInlineComment = (value) => {
+	let quote = null;
+
+	for (let index = 0; index < value.length; index += 1) {
+		const character = value[index];
+		const previous = value[index - 1];
+
+		if ((character === '"' || character === "'") && previous !== '\\') {
+			quote = quote === character ? null : quote ?? character;
+			continue;
+		}
+
+		if (character === '#' && quote === null && /\s/.test(previous ?? '')) {
+			return value.slice(0, index).trimEnd();
+		}
+	}
+
+	return value;
+};
+
+const parseScalar = (rawValue) => {
+	const value = stripInlineComment(rawValue.trim());
+
+	if (value === 'true') return true;
+	if (value === 'false') return false;
+	if (/^-?\d+(?:\.\d+)?$/.test(value)) return Number(value);
+	if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) {
+		return value.slice(1, -1);
+	}
+
+	return value;
+};
+
+export const parseMapping = (lines, startIndex = 0, baseIndent = -1) => {
+	const value = {};
+	let index = startIndex;
+
+	while (index < lines.length) {
+		const line = lines[index];
+		if (!line.trim() || line.trim().startsWith('#')) {
+			index += 1;
+			continue;
+		}
+
+		const indent = countIndent(line);
+		if (indent <= baseIndent) break;
+		if (line.trim().startsWith('- ')) break;
+
+		const match = line.trim().match(/^([a-zA-Z][a-zA-Z0-9-]*):(?:\s+(.*))?$/);
+		if (!match) break;
+
+		const [, key, rawValue] = match;
+		if (rawValue === undefined) {
+			const parsed = parseMapping(lines, index + 1, indent);
+			value[key] = parsed.value;
+			index = parsed.nextIndex;
+		} else {
+			value[key] = parseScalar(rawValue);
+			index += 1;
+		}
+	}
+
+	return { value, nextIndex: index };
+};
+
+export const parseYamlMapping = (source) => parseMapping(source.split(/\r?\n/)).value;
+
+export const findMap = (lines, label, parentStart = 0, parentEnd = lines.length, requiredIndent = null) => {
+	for (let index = parentStart; index < parentEnd; index += 1) {
+		const line = lines[index];
+		const match = line.match(/^(\s*)([a-zA-Z][a-zA-Z0-9-]*):\s*$/);
+		if (!match || match[2] !== label) continue;
+		if (requiredIndent !== null && match[1].length !== requiredIndent) continue;
+
+		return {
+			index,
+			indent: match[1].length,
+			...parseMapping(lines, index + 1, match[1].length),
+		};
+	}
+
+	return null;
+};

package/scripts/lib/presentation.mjs

@@ -11,19 +11,20 @@ export const fallbackPresentationColors = Object.freeze({
 
 const normalizePresentation = (presentation) => presentation ?? {};
 
-export const resolveThemePresentation = (themePresentation) => {
-	const normalizedThemePresentation = normalizePresentation(themePresentation);
+export const resolveThemePresentation = (theme) => {
+	const normalizedTheme = theme ?? {};
+	const normalizedThemePresentation = normalizePresentation(normalizedTheme.presentation);
 
 	return {
 		backgroundColor: normalizedThemePresentation.backgroundColor ?? fallbackPresentationColors.backgroundColor,
 		textColor: normalizedThemePresentation.textColor ?? fallbackPresentationColors.textColor,
 		inlineStyles: normalizedThemePresentation.inlineStyles ?? {},
-		typography: resolveTypographyConfig(normalizedThemePresentation.typography ?? defaultTypography),
+		typography: resolveTypographyConfig(normalizedTheme.typography ?? defaultTypography),
 	};
 };
 
-export const resolvePagePresentation = (themePresentation, pagePresentation) => {
-	const resolvedThemePresentation = resolveThemePresentation(themePresentation);
+export const resolvePagePresentation = (theme, pagePresentation) => {
+	const resolvedThemePresentation = resolveThemePresentation(theme);
 	const normalizedPagePresentation = normalizePresentation(pagePresentation);
 
 	return {
@@ -42,7 +43,7 @@ const getColorsFromPresentation = (presentation) => ({
 	textColor: presentation.textColor,
 });
 
-const resolveColorSource = ({ colors, themePresentation, themeFrameColors, pagePresentation }) => {
+const resolveColorSource = ({ colors, themeFrameColors, pagePresentation }) => {
 	if (!colors || colors === 'theme') {
 		return themeFrameColors;
 	}
@@ -54,18 +55,16 @@ const resolveColorSource = ({ colors, themePresentation, themeFrameColors, pageP
 	return colors;
 };
 
-export const resolveFrameColors = ({ themePresentation, themeFrame, pagePresentation, pageFrame }) => {
-	const resolvedThemePresentation = resolveThemePresentation(themePresentation);
+export const resolveFrameColors = ({ theme, pagePresentation, pageFrame }) => {
+	const resolvedThemePresentation = resolveThemePresentation(theme);
 	const themeFrameColors = resolveColorSource({
-		colors: themeFrame?.colors ?? 'presentation',
-		themePresentation: resolvedThemePresentation,
+		colors: theme?.frame?.colors ?? 'presentation',
 		themeFrameColors: getColorsFromPresentation(resolvedThemePresentation),
 		pagePresentation: resolvedThemePresentation,
 	});
 
 	return resolveColorSource({
 		colors: pageFrame?.colors ?? 'theme',
-		themePresentation: resolvedThemePresentation,
 		themeFrameColors,
 		pagePresentation,
 	});

package/scripts/lib/project-config.mjs

@@ -1,31 +1,43 @@
 import { pathToFileURL } from 'node:url';
-import { siteConfigLabel, siteConfigPath } from './site-paths.mjs';
+import { siteConfigLabel, siteConfigPath, siteThemeLabel } from './site-paths.mjs';
+import { readThemeConfig } from './theme-config.mjs';
 
 const { default: siteConfig } = await import(/* @vite-ignore */ pathToFileURL(siteConfigPath).href);
+const themeConfig = await readThemeConfig();
 
 const cssLengthPattern = String.raw`(?:\d+|\d*\.\d+)(?:px|rem|em|vw|vh|vmin|vmax|ch|%)`;
 const simpleCssLengthPattern = new RegExp(`^${cssLengthPattern}$`);
 const clampCssLengthPattern = new RegExp(`^clamp\\(\\s*${cssLengthPattern}\\s*,\\s*${cssLengthPattern}\\s*,\\s*${cssLengthPattern}\\s*\\)$`);
 
-const assertObject = (value, path) => {
+const assertObject = (value, path, sourceLabel = siteConfigLabel) => {
 	if (!value || typeof value !== 'object' || Array.isArray(value)) {
-		throw new Error(`${path} must be an object in ${siteConfigLabel}.`);
+		throw new Error(`${path} must be an object in ${sourceLabel}.`);
 	}
 
 	return value;
 };
 
-const readString = (object, key, path) => {
+const readEnum = (object, key, path, allowedValues, fallback, sourceLabel = siteConfigLabel) => {
+	const value = object[key] ?? fallback;
+
+	if (!allowedValues.includes(value)) {
+		throw new Error(`${path}.${key} must be one of ${allowedValues.join(', ')} in ${sourceLabel}.`);
+	}
+
+	return value;
+};
+
+const readString = (object, key, path, sourceLabel = siteConfigLabel) => {
 	const value = object[key];
 
 	if (typeof value !== 'string' || value.trim() === '') {
-		throw new Error(`${path}.${key} must be a non-empty string in ${siteConfigLabel}.`);
+		throw new Error(`${path}.${key} must be a non-empty string in ${sourceLabel}.`);
 	}
 
 	return value.trim();
 };
 
-const readOptionalString = (object, key, path) => {
+const readOptionalString = (object, key, path, sourceLabel = siteConfigLabel) => {
 	const value = object[key];
 
 	if (value === undefined || value === null || value === '') {
@@ -33,66 +45,69 @@ const readOptionalString = (object, key, path) => {
 	}
 
 	if (typeof value !== 'string' || value.trim() === '') {
-		throw new Error(`${path}.${key} must be a non-empty string when set in ${siteConfigLabel}.`);
+		throw new Error(`${path}.${key} must be a non-empty string when set in ${sourceLabel}.`);
 	}
 
 	return value.trim();
 };
 
-const readFontFamily = (object, key, path, fallback) => {
+const readFontFamily = (object, key, path, fallback, sourceLabel = siteConfigLabel) => {
 	const value = object[key] ?? fallback;
 
 	if (typeof value !== 'string' || value.trim() === '') {
-		throw new Error(`${path}.${key} must be a non-empty CSS font-family value in ${siteConfigLabel}.`);
+		throw new Error(`${path}.${key} must be a non-empty CSS font-family value in ${sourceLabel}.`);
 	}
 
 	const normalizedValue = value.trim();
 
 	if (/[\n\r;{}]/.test(normalizedValue)) {
-		throw new Error(`${path}.${key} must not contain semicolons, braces, or line breaks in ${siteConfigLabel}.`);
+		throw new Error(`${path}.${key} must not contain semicolons, braces, or line breaks in ${sourceLabel}.`);
 	}
 
 	return normalizedValue;
 };
 
-const readCssLength = (object, key, path, fallback) => {
+const readCssLength = (object, key, path, fallback, sourceLabel = siteConfigLabel) => {
 	const value = object[key] ?? fallback;
 
 	if (typeof value !== 'string' || value.trim() === '') {
-		throw new Error(`${path}.${key} must be a non-empty CSS length in ${siteConfigLabel}.`);
+		throw new Error(`${path}.${key} must be a non-empty CSS length in ${sourceLabel}.`);
 	}
 
 	const normalizedValue = value.trim();
 
 	if (!simpleCssLengthPattern.test(normalizedValue) || parseFloat(normalizedValue) <= 0) {
-		throw new Error(`${path}.${key} must be a CSS length such as "900px", "56rem", or "90%" in ${siteConfigLabel}.`);
+		throw new Error(`${path}.${key} must be a CSS length such as "900px", "56rem", or "90%" in ${sourceLabel}.`);
 	}
 
 	return normalizedValue;
 };
 
-const readCssLengthValue = (value, path) => {
+const readCssLengthValue = (value, path, sourceLabel = siteConfigLabel) => {
 	if (typeof value !== 'string' || value.trim() === '') {
-		throw new Error(`${path} must be a non-empty CSS length in ${siteConfigLabel}.`);
+		throw new Error(`${path} must be a non-empty CSS length in ${sourceLabel}.`);
 	}
 
 	const normalizedValue = value.trim();
 
 	if (
-		(!simpleCssLengthPattern.test(normalizedValue) && !clampCssLengthPattern.test(normalizedValue))
-		|| parseFloat(normalizedValue) <= 0
+		normalizedValue !== '0'
+		&& (
+			(!simpleCssLengthPattern.test(normalizedValue) && !clampCssLengthPattern.test(normalizedValue))
+			|| parseFloat(normalizedValue) < 0
+		)
 	) {
-		throw new Error(`${path} must be a CSS length such as "48px", "3rem", "4vw", or a clamp() of those lengths in ${siteConfigLabel}.`);
+		throw new Error(`${path} must be a CSS length such as "0", "48px", "3rem", "4vw", or a clamp() of those lengths in ${sourceLabel}.`);
 	}
 
 	return normalizedValue;
 };
 
-const readResponsiveCssLength = (object, key, path, fallback) => {
+const readResponsiveCssLength = (object, key, path, fallback, sourceLabel = siteConfigLabel) => {
 	const value = object[key] ?? fallback;
 
 	if (typeof value === 'string') {
-		const length = readCssLengthValue(value, `${path}.${key}`);
+		const length = readCssLengthValue(value, `${path}.${key}`, sourceLabel);
 
 		return Object.freeze({
 			desktop: length,
@@ -100,27 +115,27 @@ const readResponsiveCssLength = (object, key, path, fallback) => {
 		});
 	}
 
-	const responsiveValue = assertObject(value, `${path}.${key}`);
+	const responsiveValue = assertObject(value, `${path}.${key}`, sourceLabel);
 
 	return Object.freeze({
-		desktop: readCssLengthValue(responsiveValue.desktop ?? fallback.desktop, `${path}.${key}.desktop`),
-		mobile: readCssLengthValue(responsiveValue.mobile ?? fallback.mobile, `${path}.${key}.mobile`),
+		desktop: readCssLengthValue(responsiveValue.desktop ?? fallback.desktop, `${path}.${key}.desktop`, sourceLabel),
+		mobile: readCssLengthValue(responsiveValue.mobile ?? fallback.mobile, `${path}.${key}.mobile`, sourceLabel),
 	});
 };
 
-const readPercentValue = (value, path) => {
+const readPercentValue = (value, path, sourceLabel = siteConfigLabel) => {
 	if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0 || value > 100) {
-		throw new Error(`${path} must be a number greater than 0 and less than or equal to 100 in ${siteConfigLabel}.`);
+		throw new Error(`${path} must be a number greater than 0 and less than or equal to 100 in ${sourceLabel}.`);
 	}
 
 	return value;
 };
 
-const readResponsivePercent = (object, key, path, fallback) => {
+const readResponsivePercent = (object, key, path, fallback, sourceLabel = siteConfigLabel) => {
 	const value = object[key] ?? fallback;
 
 	if (typeof value === 'number') {
-		const percent = readPercentValue(value, `${path}.${key}`);
+		const percent = readPercentValue(value, `${path}.${key}`, sourceLabel);
 
 		return Object.freeze({
 			desktop: percent,
@@ -128,11 +143,11 @@ const readResponsivePercent = (object, key, path, fallback) => {
 		});
 	}
 
-	const responsiveValue = assertObject(value, `${path}.${key}`);
+	const responsiveValue = assertObject(value, `${path}.${key}`, sourceLabel);
 
 	return Object.freeze({
-		desktop: readPercentValue(responsiveValue.desktop ?? fallback.desktop, `${path}.${key}.desktop`),
-		mobile: readPercentValue(responsiveValue.mobile ?? fallback.mobile, `${path}.${key}.mobile`),
+		desktop: readPercentValue(responsiveValue.desktop ?? fallback.desktop, `${path}.${key}.desktop`, sourceLabel),
+		mobile: readPercentValue(responsiveValue.mobile ?? fallback.mobile, `${path}.${key}.mobile`, sourceLabel),
 	});
 };
 
@@ -229,7 +244,7 @@ const readLocale = (rawLocale) => {
 			closeMenu: readString({ closeMenu: labels.closeMenu ?? 'Close menu' }, 'closeMenu', 'locale.labels'),
 			skipToContent: readString({ skipToContent: labels.skipToContent ?? 'Skip to content' }, 'skipToContent', 'locale.labels'),
 			sectionNavigation: readString({ sectionNavigation: labels.sectionNavigation ?? 'Sections' }, 'sectionNavigation', 'locale.labels'),
-			gallery: readString({ gallery: labels.gallery ?? 'Gallery' }, 'gallery', 'locale.labels'),
+			gallery: readString({ gallery: labels.gallery ?? 'Images' }, 'gallery', 'locale.labels'),
 			menu: readString({ menu: labels.menu ?? 'Menu' }, 'menu', 'locale.labels'),
 			pageNavigation: readString({ pageNavigation: labels.pageNavigation ?? 'On this page' }, 'pageNavigation', 'locale.labels'),
 			siteNavigation: readString({ siteNavigation: labels.siteNavigation ?? 'Pages' }, 'siteNavigation', 'locale.labels'),
@@ -280,10 +295,17 @@ const readBuildInfo = (footer) => {
 };
 
 const rawConfig = assertObject(siteConfig, 'default export');
+const misplacedThemeKeys = ['layout', 'gallery', 'typography'].filter((key) => key in rawConfig);
+if (misplacedThemeKeys.length > 0) {
+	throw new Error(`${misplacedThemeKeys.join(', ')} belong in ${siteThemeLabel}, not ${siteConfigLabel}.`);
+}
+
+const rawTheme = assertObject(themeConfig, 'theme frontmatter', siteThemeLabel);
 const rawSite = assertObject(rawConfig.site, 'site');
-const rawLayout = assertObject(rawConfig.layout ?? {}, 'layout');
-const rawGallery = assertObject(rawConfig.gallery ?? {}, 'gallery');
-const rawTypography = assertObject(rawConfig.typography ?? {}, 'typography');
+const rawLayout = assertObject(rawTheme.layout ?? {}, 'layout', siteThemeLabel);
+const rawLayoutSpacing = assertObject(rawLayout.spacing ?? {}, 'layout.spacing', siteThemeLabel);
+const rawGallery = assertObject(rawTheme.gallery ?? {}, 'gallery', siteThemeLabel);
+const rawTypography = assertObject(rawTheme.typography ?? {}, 'typography', siteThemeLabel);
 const rawNavigation = assertObject(rawConfig.navigation ?? {}, 'navigation');
 const rawLocale = rawConfig.locale ?? {};
 const rawFooter = assertObject(rawConfig.footer ?? {}, 'footer');
@@ -292,6 +314,77 @@ const rawDeploy = assertObject(rawConfig.deploy ?? {}, 'deploy');
 const rawDeployWatch = assertObject(rawDeploy.watch ?? {}, 'deploy.watch');
 
 const defaultFontFamily = "Arial, 'Helvetica Neue', Helvetica, sans-serif";
+const layoutDensityNames = ['compact', 'normal', 'airy'];
+const layoutDensityProfiles = Object.freeze({
+	compact: Object.freeze({
+		bodyToImages: Object.freeze({
+			desktop: '1rem',
+			mobile: '0.9rem',
+		}),
+		finalSectionBottom: Object.freeze({
+			desktop: 'clamp(1.2rem, 2.4vw, 2.25rem)',
+			mobile: '1.25rem',
+		}),
+		firstSectionTop: Object.freeze({
+			desktop: 'clamp(1rem, 2vw, 1.75rem)',
+			mobile: '1rem',
+		}),
+		imageGap: Object.freeze({
+			desktop: 'clamp(1rem, 2vw, 1.5rem)',
+			mobile: '1.25rem',
+		}),
+		sectionGap: Object.freeze({
+			desktop: 'clamp(1.2rem, 2.4vw, 2.25rem)',
+			mobile: '1.25rem',
+		}),
+	}),
+	normal: Object.freeze({
+		bodyToImages: Object.freeze({
+			desktop: '1.25rem',
+			mobile: '1rem',
+		}),
+		finalSectionBottom: Object.freeze({
+			desktop: 'clamp(1.4rem, 3vw, 2.75rem)',
+			mobile: '1.5rem',
+		}),
+		firstSectionTop: Object.freeze({
+			desktop: 'clamp(1.25rem, 3vw, 2.5rem)',
+			mobile: '1.25rem',
+		}),
+		imageGap: Object.freeze({
+			desktop: 'clamp(1.25rem, 2.8vw, 2rem)',
+			mobile: '1.5rem',
+		}),
+		sectionGap: Object.freeze({
+			desktop: 'clamp(1.4rem, 3vw, 2.75rem)',
+			mobile: '1.5rem',
+		}),
+	}),
+	airy: Object.freeze({
+		bodyToImages: Object.freeze({
+			desktop: '1.5rem',
+			mobile: '1.25rem',
+		}),
+		finalSectionBottom: Object.freeze({
+			desktop: 'clamp(2.25rem, 5vw, 4.5rem)',
+			mobile: '2rem',
+		}),
+		firstSectionTop: Object.freeze({
+			desktop: 'clamp(2rem, 5vw, 4rem)',
+			mobile: '1.5rem',
+		}),
+		imageGap: Object.freeze({
+			desktop: 'clamp(1.5rem, 3.5vw, 2.75rem)',
+			mobile: '2rem',
+		}),
+		sectionGap: Object.freeze({
+			desktop: 'clamp(2.25rem, 5vw, 4.5rem)',
+			mobile: '2rem',
+		}),
+	}),
+});
+const layoutDensity = readEnum(rawLayout, 'density', 'layout', layoutDensityNames, 'normal', siteThemeLabel);
+const layoutSpacingDefaults = layoutDensityProfiles[layoutDensity];
 
 export const projectConfig = Object.freeze({
 	site: Object.freeze({
@@ -299,31 +392,39 @@ export const projectConfig = Object.freeze({
 		url: readUrl(rawSite, 'url', 'site'),
 	}),
 	layout: Object.freeze({
+		density: layoutDensity,
 		gutter: readResponsiveCssLength(rawLayout, 'gutter', 'layout', Object.freeze({
 			desktop: 'clamp(1.25rem, 4vw, 3rem)',
 			mobile: '1rem',
-		})),
-		pageWidth: readCssLength(rawLayout, 'pageWidth', 'layout', '1180px'),
+		}), siteThemeLabel),
+		pageWidth: readCssLength(rawLayout, 'pageWidth', 'layout', '1180px', siteThemeLabel),
+		spacing: Object.freeze({
+			bodyToImages: readResponsiveCssLength(rawLayoutSpacing, 'bodyToImages', 'layout.spacing', layoutSpacingDefaults.bodyToImages, siteThemeLabel),
+			finalSectionBottom: readResponsiveCssLength(rawLayoutSpacing, 'finalSectionBottom', 'layout.spacing', layoutSpacingDefaults.finalSectionBottom, siteThemeLabel),
+			firstSectionTop: readResponsiveCssLength(rawLayoutSpacing, 'firstSectionTop', 'layout.spacing', layoutSpacingDefaults.firstSectionTop, siteThemeLabel),
+			imageGap: readResponsiveCssLength(rawLayoutSpacing, 'imageGap', 'layout.spacing', layoutSpacingDefaults.imageGap, siteThemeLabel),
+			sectionGap: readResponsiveCssLength(rawLayoutSpacing, 'sectionGap', 'layout.spacing', layoutSpacingDefaults.sectionGap, siteThemeLabel),
+		}),
 	}),
 	gallery: Object.freeze({
 		maxAvailableHeightPercent: readResponsivePercent(rawGallery, 'maxAvailableHeightPercent', 'gallery', Object.freeze({
 			desktop: 74,
 			mobile: 68,
-		})),
+		}), siteThemeLabel),
 		maxAvailableWidthPercent: readResponsivePercent(rawGallery, 'maxAvailableWidthPercent', 'gallery', Object.freeze({
 			desktop: 100,
 			mobile: 100,
-		})),
-		width: readCssLength(rawGallery, 'width', 'gallery', '900px'),
+		}), siteThemeLabel),
+		width: readCssLength(rawGallery, 'width', 'gallery', '900px', siteThemeLabel),
 	}),
 	typography: Object.freeze({
-		fontFamily: readFontFamily(rawTypography, 'fontFamily', 'typography', defaultFontFamily),
+		fontFamily: readFontFamily(rawTypography, 'fontFamily', 'typography', defaultFontFamily, siteThemeLabel),
 	}),
-		navigation: Object.freeze({
-			smoothScroll: readSmoothScroll(rawNavigation),
-		}),
-		locale: readLocale(rawLocale),
-		footer: Object.freeze({
+	navigation: Object.freeze({
+		smoothScroll: readSmoothScroll(rawNavigation),
+	}),
+	locale: readLocale(rawLocale),
+	footer: Object.freeze({
 		buildInfo: readBuildInfo(rawFooter),
 		copyrightMessage: readOptionalString(rawFooter, 'copyrightMessage', 'footer'),
 	}),