@janga/norna 0.7.2 → 0.7.4

package/src/components/SiteSection.astro

@@ -32,22 +32,81 @@ interface Props {
 
 const { section, pagePresentation, headingLevel, priorityGalleryImage = false } = Astro.props;
 const HeadingTag = headingLevel === 1 ? 'h1' : 'h2';
-const headingSizeValues: Record<TextSize, ResponsiveValue<string>> = {
-	small: {
-		desktop: 'clamp(1.1rem, 1.02rem + 0.35vw, 1.35rem)',
-		mobile: 'clamp(1.12rem, 1rem + 0.85vw, 1.42rem)',
+// Sections are authored with Markdown ## headings even when the first one renders as HTML h1.
+const sectionHeadingVisualLevel = 'h2';
+type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
+const headingSizeValues: Record<HeadingLevel, Record<TextSize, ResponsiveValue<string>>> = {
+	h1: {
+		small: {
+			desktop: 'clamp(1.5rem, 1.18rem + 1.15vw, 2.25rem)',
+			mobile: 'clamp(1.42rem, 1.12rem + 1.5vw, 2rem)',
+		},
+		medium: {
+			desktop: 'clamp(1.85rem, 1.35rem + 1.8vw, 3.1rem)',
+			mobile: 'clamp(1.65rem, 1.18rem + 2.2vw, 2.45rem)',
+		},
+		large: {
+			desktop: 'clamp(2.25rem, 1.45rem + 2.75vw, 4.25rem)',
+			mobile: 'clamp(1.9rem, 1.26rem + 3.2vw, 3.15rem)',
+		},
+		xlarge: {
+			desktop: 'clamp(2.75rem, 1.6rem + 3.8vw, 5.5rem)',
+			mobile: 'clamp(2.2rem, 1.35rem + 4.4vw, 3.9rem)',
+		},
 	},
-	medium: {
-		desktop: 'clamp(1.35rem, 1.1rem + 0.9vw, 2rem)',
-		mobile: 'clamp(1.3rem, 1.05rem + 1.35vw, 1.75rem)',
+	h2: {
+		small: {
+			desktop: 'clamp(1.1rem, 1.02rem + 0.35vw, 1.35rem)',
+			mobile: 'clamp(1.12rem, 1rem + 0.85vw, 1.42rem)',
+		},
+		medium: {
+			desktop: 'clamp(1.35rem, 1.1rem + 0.9vw, 2rem)',
+			mobile: 'clamp(1.3rem, 1.05rem + 1.35vw, 1.75rem)',
+		},
+		large: {
+			desktop: 'clamp(1.6rem, 1.22rem + 1.45vw, 2.75rem)',
+			mobile: 'clamp(1.5rem, 1.12rem + 2vw, 2.25rem)',
+		},
+		xlarge: {
+			desktop: 'clamp(2rem, 1.35rem + 2.4vw, 3.75rem)',
+			mobile: 'clamp(1.8rem, 1.25rem + 3vw, 2.85rem)',
+		},
 	},
-	large: {
-		desktop: 'clamp(1.6rem, 1.22rem + 1.45vw, 2.75rem)',
-		mobile: 'clamp(1.5rem, 1.12rem + 2vw, 2.25rem)',
+	h3: {
+		small: {
+			desktop: 'clamp(0.96rem, 0.94rem + 0.08vw, 1rem)',
+			mobile: 'clamp(0.96rem, 0.94rem + 0.08vw, 1rem)',
+		},
+		medium: {
+			desktop: 'clamp(1.05rem, 0.98rem + 0.28vw, 1.22rem)',
+			mobile: 'clamp(1.04rem, 0.98rem + 0.45vw, 1.18rem)',
+		},
+		large: {
+			desktop: 'clamp(1.16rem, 1.02rem + 0.5vw, 1.5rem)',
+			mobile: 'clamp(1.12rem, 1rem + 0.75vw, 1.36rem)',
+		},
+		xlarge: {
+			desktop: 'clamp(1.32rem, 1.08rem + 0.85vw, 1.9rem)',
+			mobile: 'clamp(1.24rem, 1.04rem + 1.15vw, 1.65rem)',
+		},
 	},
-	xlarge: {
-		desktop: 'clamp(2rem, 1.35rem + 2.4vw, 3.75rem)',
-		mobile: 'clamp(1.8rem, 1.25rem + 3vw, 2.85rem)',
+	h4: {
+		small: {
+			desktop: 'clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem)',
+			mobile: 'clamp(0.86rem, 0.84rem + 0.08vw, 0.92rem)',
+		},
+		medium: {
+			desktop: 'clamp(0.96rem, 0.94rem + 0.08vw, 1rem)',
+			mobile: 'clamp(0.96rem, 0.94rem + 0.08vw, 1rem)',
+		},
+		large: {
+			desktop: 'clamp(1.05rem, 1rem + 0.16vw, 1.12rem)',
+			mobile: 'clamp(1.05rem, 1rem + 0.16vw, 1.12rem)',
+		},
+		xlarge: {
+			desktop: 'clamp(1.14rem, 1.06rem + 0.26vw, 1.25rem)',
+			mobile: 'clamp(1.14rem, 1.06rem + 0.26vw, 1.25rem)',
+		},
 	},
 };
 const bodySizeValues: Record<TextSize, ResponsiveValue<string>> = {
@@ -91,16 +150,37 @@ const getSizeValue = (
 	sizeValues: Record<TextSize, ResponsiveValue<string>>,
 	size: TextSize,
 ) => sizeValues[size];
+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 headingAlign = typography.heading.align as ResponsiveValue<TextAlign>;
+const heading = typography.headings[sectionHeadingVisualLevel] as {
+	align: ResponsiveValue<TextAlign>;
+	size: TextSize;
+	lineHeight: number;
+	spacingBefore: string;
+	spacingAfter: string;
+};
+const markdownHeadingLevels = ['h3', 'h4'] as const;
+const markdownHeadings = Object.fromEntries(markdownHeadingLevels.map((level) => [
+	level,
+	typography.headings[level] as {
+		align: ResponsiveValue<TextAlign>;
+		size: TextSize;
+		lineHeight: number;
+		spacingBefore: string;
+		spacingAfter: string;
+	},
+]));
+const headingAlign = heading.align;
 const bodyAlign = typography.body.align as ResponsiveValue<TextAlign>;
 const captionAlign = typography.caption.align as ResponsiveValue<TextAlign>;
-const headingFontSize = getSizeValue(headingSizeValues, typography.heading.size as TextSize);
+const headingFontSize = getHeadingSizeValue(sectionHeadingVisualLevel, heading.size);
 const bodyFontSize = getSizeValue(bodySizeValues, typography.body.size as TextSize);
 const captionFontSize = getSizeValue(captionSizeValues, typography.caption.size as TextSize);
 const justifyByAlign: Record<TextAlign, string> = {
@@ -118,6 +198,20 @@ const getAlignedTextWidth = (
 const headingWidth = getAlignedTextWidth(headingAlign, '760px');
 const bodyWidth = getAlignedTextWidth(bodyAlign, 'var(--text-width)');
 const hasGallery = section.gallery.length > 0;
+const markdownHeadingStyle = (level: 'h3' | 'h4') => {
+	const headingConfig = markdownHeadings[level];
+	const fontSize = getHeadingSizeValue(level, headingConfig.size);
+
+	return [
+		`--section-markdown-${level}-align-desktop: ${headingConfig.align.desktop}`,
+		`--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}-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}`,
@@ -125,10 +219,12 @@ const sectionStyle = [
 	`--section-heading-align-mobile: ${headingAlign.mobile}`,
 	`--section-heading-font-size-desktop: ${headingFontSize.desktop}`,
 	`--section-heading-font-size-mobile: ${headingFontSize.mobile}`,
-	`--section-heading-line-height: ${typography.heading.lineHeight}`,
-	`--section-heading-spacing: ${typography.heading.spacing}`,
+	`--section-heading-line-height: ${heading.lineHeight}`,
+	`--section-heading-spacing-after: ${heading.spacingAfter}`,
 	`--section-heading-width-desktop: ${headingWidth.desktop}`,
 	`--section-heading-width-mobile: ${headingWidth.mobile}`,
+	...markdownHeadingStyle('h3'),
+	...markdownHeadingStyle('h4'),
 	`--section-body-align-desktop: ${bodyAlign.desktop}`,
 	`--section-body-align-mobile: ${bodyAlign.mobile}`,
 	`--section-body-font-size-desktop: ${bodyFontSize.desktop}`,
@@ -142,7 +238,7 @@ const sectionStyle = [
 	`--section-caption-font-size-desktop: ${captionFontSize.desktop}`,
 	`--section-caption-font-size-mobile: ${captionFontSize.mobile}`,
 	`--section-caption-line-height: ${typography.caption.lineHeight}`,
-	`--section-caption-spacing: ${typography.caption.spacing}`,
+	`--section-caption-spacing-before: ${typography.caption.spacingBefore}`,
 	`--section-caption-justify-desktop: ${justifyByAlign[captionAlign.desktop]}`,
 	`--section-caption-justify-mobile: ${justifyByAlign[captionAlign.mobile]}`,
 ].join('; ');
@@ -150,7 +246,7 @@ const sectionStyle = [
 
 <section
 	id={section.id}
-	class:list={['site-section', { 'site-section-primary': headingLevel === 1 }]}
+	class="site-section"
 	data-section-title={section.title}
 	style={sectionStyle}
 >

package/src/content.config.ts

@@ -18,6 +18,7 @@ const colorValue = z.string().regex(
 const textAlign = z.enum(['left', 'center', 'right']);
 const textSize = z.enum(['small', 'medium', 'large', 'xlarge']);
 const typographyPreset = z.enum(['quiet-gallery', 'compact-gallery', 'text-forward', 'statement']);
+const spacingDensity = z.enum(['compact', 'normal', 'airy']);
 const lineHeight = z.number()
 	.min(1, 'Use a unitless line height of at least 1.')
 	.max(3, 'Use a unitless line height of at most 3.');
@@ -25,6 +26,12 @@ const cssLength = z.string().regex(
 	/^(?:0|(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem|em|ch|lh))$/,
 	'Use a CSS length such as "0", "0.8em", "1rem", or "12px".',
 );
+const visualCssLengthUnit = String.raw`(?:px|rem|em|vw|vh|vmin|vmax|ch|%)`;
+const visualCssLengthValue = String.raw`(?:\d+(?:\.\d+)?|\.\d+)${visualCssLengthUnit}`;
+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.')
@@ -53,7 +60,14 @@ const commonTextPresentationOverride = {
 };
 const headingPresentationOverride = z.object({
 	...commonTextPresentationOverride,
-	spacing: cssLength.optional(),
+	spacingBefore: cssLength.optional(),
+	spacingAfter: cssLength.optional(),
+}).strict();
+const headingLevelsPresentationOverride = z.object({
+	h1: headingPresentationOverride.optional(),
+	h2: headingPresentationOverride.optional(),
+	h3: headingPresentationOverride.optional(),
+	h4: headingPresentationOverride.optional(),
 }).strict();
 const bodyPresentationOverride = z.object({
 	...commonTextPresentationOverride,
@@ -61,20 +75,64 @@ const bodyPresentationOverride = z.object({
 }).strict();
 const captionPresentationOverride = z.object({
 	...commonTextPresentationOverride,
-	spacing: cssLength.optional(),
+	spacingBefore: cssLength.optional(),
 }).strict();
 const typographyOverrides = z.object({
-	heading: headingPresentationOverride.optional(),
+	headings: headingLevelsPresentationOverride.optional(),
 	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)
+		.refine((value) => !/[\n\r;{}]/.test(value), 'Do not use semicolons, braces, or line breaks.').optional(),
+	preset: typographyPreset.optional(),
+	rhythm: spacingDensity.optional(),
 	overrides: typographyOverrides.optional(),
 }).strict().refine(
-	(value) => value.preset !== undefined || value.overrides !== undefined,
-	'Specify preset, overrides, or both.',
+	(value) => value.fontFamily !== undefined || value.preset !== undefined || value.rhythm !== undefined || value.overrides !== undefined,
+	'Specify fontFamily, preset, rhythm, overrides, or both.',
 );
+const responsiveCssLength = z.union([
+	visualCssLength,
+	z.object({
+		desktop: visualCssLength,
+		mobile: visualCssLength,
+	}).strict(),
+]);
+const responsivePercent = z.union([
+	z.number().positive().max(100),
+	z.object({
+		desktop: z.number().positive().max(100),
+		mobile: z.number().positive().max(100),
+	}).strict(),
+]);
+const themeLayoutSpacing = z.object({
+	bodyToImages: responsiveCssLength.optional(),
+	finalSectionBottom: responsiveCssLength.optional(),
+	firstSectionTop: responsiveCssLength.optional(),
+	imageGap: responsiveCssLength.optional(),
+	sectionGap: responsiveCssLength.optional(),
+}).strict();
+const themeLayout = z.object({
+	density: spacingDensity.optional(),
+	pageWidth: visualCssLength.optional(),
+	gutter: responsiveCssLength.optional(),
+	spacing: themeLayoutSpacing.optional(),
+}).strict();
+const themeGallery = z.object({
+	width: visualCssLength.optional(),
+	maxAvailableWidthPercent: responsivePercent.optional(),
+	maxAvailableHeightPercent: responsivePercent.optional(),
+}).strict();
 const sectionPresentationOverride = z.object({
 	backgroundColor: colorValue.optional(),
 	textColor: colorValue.optional(),
@@ -86,7 +144,6 @@ const themePresentation = z.object({
 	inlineStyles: z.record(inlineStyleName, z.object({
 		color: colorValue,
 	}).strict()).optional(),
-	typography: typography.optional(),
 }).strict();
 const pagePresentation = z.object({
 	backgroundColor: colorValue.optional(),
@@ -141,6 +198,9 @@ const siteSchema = z.object({
 
 const themeSchema = z.object({
 	navigation: themeNavigation.optional(),
+	layout: themeLayout.optional(),
+	gallery: themeGallery.optional(),
+	typography: themeTypography.optional(),
 	presentation: themePresentation.optional(),
 	frame: frame.optional(),
 }).strict();

package/src/layouts/BaseLayout.astro

@@ -29,12 +29,23 @@ 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 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}`,
+	`--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-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)}`,

package/src/styles/global.css

@@ -28,20 +28,21 @@
 	--gallery-max-image-height: var(--gallery-max-image-height-desktop);
 	--nav-top-safety-inset: 0px;
 
-	/* Avstand fran sticky navigationsrad till forsta sektionsrubriken. */
-	--space-nav-to-first-section: clamp(1.875rem, 3vw, 2.75rem);
-
-	/* Avstand fran sektionsrubrik till sektionens forsta textstycke. */
-	--space-section-title-to-body: clamp(0.5625rem, 1.25vw, 0.75rem);
-
-	/* Avstand fran sektionens lopande text till efterfoljande galleri. */
-	--space-section-body-to-gallery: clamp(1.25rem, 2.5vw, 2rem);
-
-	/* Avstand mellan enskilda bilder/verk inom samma galleri. */
-	--space-gallery-item: clamp(1.5rem, 3.5vw, 2.75rem);
-
-	/* Avstand fran sista galleriobjektet eller textblocket till nasta sektion. */
-	--space-section-to-section: clamp(2.55rem, 4.2vw, 3.9rem);
+	--space-nav-to-first-section-desktop: clamp(1.875rem, 3vw, 2.75rem);
+	--space-nav-to-first-section-mobile: 1.375rem;
+	--space-nav-to-first-section: var(--space-nav-to-first-section-desktop);
+	--space-section-body-to-gallery-desktop: clamp(1.25rem, 2.5vw, 2rem);
+	--space-section-body-to-gallery-mobile: 1.25rem;
+	--space-section-body-to-gallery: var(--space-section-body-to-gallery-desktop);
+	--space-gallery-item-desktop: clamp(1.5rem, 3.5vw, 2.75rem);
+	--space-gallery-item-mobile: 2.75rem;
+	--space-gallery-item: var(--space-gallery-item-desktop);
+	--space-section-to-section-desktop: clamp(2.55rem, 4.2vw, 3.9rem);
+	--space-section-to-section-mobile: 2.25rem;
+	--space-section-to-section: var(--space-section-to-section-desktop);
+	--space-final-section-bottom-desktop: var(--space-section-to-section-desktop);
+	--space-final-section-bottom-mobile: var(--space-section-to-section-mobile);
+	--space-final-section-bottom: var(--space-final-section-bottom-desktop);
 
 	--content-gutter-desktop: clamp(1.25rem, 4vw, 3rem);
 	--content-gutter-mobile: 1rem;
@@ -316,7 +317,7 @@ a {
 }
 
 .site-section:last-child {
-	padding-bottom: var(--space-section-to-section);
+	padding-bottom: var(--space-final-section-bottom);
 }
 
 .section-card {
@@ -327,19 +328,19 @@ a {
 .section-header {
 	width: min(100%, var(--section-heading-width-desktop, 760px));
 	margin: 0 auto;
-	padding: 0 0 var(--section-heading-spacing, var(--space-section-title-to-body));
+	padding: 0 0 var(--section-heading-spacing-after, 0.55em);
 	text-align: var(--section-heading-align-desktop, center);
 }
 
-h1,
-h2,
+.section-header h1,
+.section-header h2,
 p,
 ul {
 	margin-top: 0;
 }
 
-h1,
-h2 {
+.section-header h1,
+.section-header h2 {
 	margin-bottom: 0;
 	color: inherit;
 	font-size: var(--section-heading-font-size-desktop, clamp(1.35rem, 1.1rem + 0.9vw, 2rem));
@@ -350,11 +351,6 @@ h2 {
 	overflow-wrap: anywhere;
 }
 
-.site-section-primary h1 {
-	font-size: var(--section-heading-font-size-desktop, clamp(1.6rem, 1.22rem + 1.45vw, 2.75rem));
-	font-weight: 700;
-}
-
 .section-body {
 	width: 100%;
 	margin: 0 auto;
@@ -375,6 +371,31 @@ h2 {
 	margin: 0 0 var(--section-body-paragraph-spacing, 1em);
 }
 
+.section-markdown blockquote {
+	margin: 0 0 var(--section-body-paragraph-spacing, 1em);
+	border-left: 1px solid color-mix(in srgb, currentColor 34%, transparent);
+	padding-left: 1rem;
+}
+
+.section-markdown blockquote > :last-child {
+	margin-bottom: 0;
+}
+
+.section-markdown pre.astro-code {
+	margin: 0 0 var(--section-body-paragraph-spacing, 1em);
+	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+	border-radius: 6px;
+	padding: 0.78rem 0.9rem;
+	background: #0d1117 !important;
+	font-size: 0.92em;
+	line-height: 1.45;
+	text-align: left;
+}
+
+.section-markdown pre.astro-code code {
+	font: inherit;
+}
+
 .section-markdown .inline-style {
 	color: var(--inline-style-color);
 }
@@ -388,24 +409,40 @@ h2 {
 	margin-bottom: 0;
 }
 
+.section-markdown > pre.astro-code:last-child {
+	margin-bottom: 0;
+}
+
+.section-markdown blockquote > pre.astro-code:last-child {
+	margin-bottom: 0;
+}
+
 .section-markdown h3 {
-	margin: 2.75rem 0 0.9rem;
+	margin:
+		var(--section-markdown-h3-spacing-before, 1.5em)
+		0
+		var(--section-markdown-h3-spacing-after, 0.5em);
 	border-top: 1px solid var(--color-soft);
-	padding-top: 1.75rem;
+	padding-top: 0.55em;
 	font-family: var(--font-sans);
-	font-size: 0.82rem;
-	letter-spacing: 0.14em;
-	line-height: 1.35;
+	font-size: var(--section-markdown-h3-font-size-desktop, 0.82rem);
+	letter-spacing: 0;
+	line-height: var(--section-markdown-h3-line-height, 1.35);
+	text-align: var(--section-markdown-h3-align-desktop, left);
 	text-transform: uppercase;
 }
 
 .section-markdown h4 {
-	margin: 0 0 0.85rem;
+	margin:
+		var(--section-markdown-h4-spacing-before, 1.1em)
+		0
+		var(--section-markdown-h4-spacing-after, 0.4em);
 	color: inherit;
-	font-size: clamp(0.96rem, 0.94rem + 0.08vw, 1rem);
+	font-size: var(--section-markdown-h4-font-size-desktop, clamp(0.96rem, 0.94rem + 0.08vw, 1rem));
 	font-weight: 400;
-	letter-spacing: 0.02em;
-	line-height: 1.5;
+	letter-spacing: 0;
+	line-height: var(--section-markdown-h4-line-height, 1.5);
+	text-align: var(--section-markdown-h4-align-desktop, left);
 }
 
 .section-markdown ul,
@@ -618,7 +655,7 @@ h2 {
 
 .gallery-meta {
 	width: min(100%, var(--gallery-layout-width));
-	margin: var(--section-caption-spacing, 0.5em) auto 0;
+	margin: var(--section-caption-spacing-before, 0.5em) auto 0;
 	font-size: var(--section-caption-font-size-desktop, 0.95rem);
 	text-align: var(--section-caption-align-desktop, center);
 }
@@ -639,11 +676,11 @@ h2 {
 
 @media (max-width: 700px) {
 	:root {
-		--space-nav-to-first-section: 1.375rem;
-		--space-section-title-to-body: 0.4375rem;
-		--space-section-body-to-gallery: 1.25rem;
-		--space-gallery-item: 2.75rem;
-		--space-section-to-section: 2.25rem;
+		--space-nav-to-first-section: var(--space-nav-to-first-section-mobile);
+		--space-section-body-to-gallery: var(--space-section-body-to-gallery-mobile);
+		--space-gallery-item: var(--space-gallery-item-mobile);
+		--space-section-to-section: var(--space-section-to-section-mobile);
+		--space-final-section-bottom: var(--space-final-section-bottom-mobile);
 		--content-gutter: var(--content-gutter-mobile);
 		--gallery-max-available-width: var(--gallery-max-available-width-mobile);
 		--gallery-max-image-height: var(--gallery-max-image-height-mobile);
@@ -780,21 +817,14 @@ h2 {
 		line-height: 1.72;
 	}
 
-	h1,
-	h2 {
+	.section-header h1,
+	.section-header h2 {
 		font-size: var(
 			--section-heading-font-size-mobile,
 			var(--section-heading-font-size-desktop, clamp(1.3rem, 1.05rem + 1.35vw, 1.75rem))
 		);
 	}
 
-	.site-section-primary h1 {
-		font-size: var(
-			--section-heading-font-size-mobile,
-			var(--section-heading-font-size-desktop, clamp(1.5rem, 1.12rem + 2vw, 2.25rem))
-		);
-	}
-
 	.section-header {
 		width: min(100%, var(--section-heading-width-mobile, var(--section-heading-width-desktop, 760px)));
 		text-align: var(--section-heading-align-mobile, var(--section-heading-align-desktop, center));
@@ -819,12 +849,13 @@ h2 {
 	}
 
 	.section-markdown h3 {
-		margin-top: 2.25rem;
-		padding-top: 1.35rem;
+		font-size: var(--section-markdown-h3-font-size-mobile, var(--section-markdown-h3-font-size-desktop, 0.82rem));
+		text-align: var(--section-markdown-h3-align-mobile, var(--section-markdown-h3-align-desktop, left));
 	}
 
 	.section-markdown h4 {
-		text-align: center;
+		font-size: var(--section-markdown-h4-font-size-mobile, var(--section-markdown-h4-font-size-desktop, clamp(0.96rem, 0.94rem + 0.08vw, 1rem)));
+		text-align: var(--section-markdown-h4-align-mobile, var(--section-markdown-h4-align-desktop, left));
 	}
 
 	.section-markdown ul,

package/starters/basic/README.md

@@ -6,7 +6,7 @@ This is a minimal site repository starter for `@janga/norna`.
 
 ```sh
 npm install
-npm run norna:dev
+npm run dev
 ```
 
 If the standard local port is blocked, start with:
@@ -15,9 +15,9 @@ If the standard local port is blocked, start with:
 npm run dev -- --kill
 ```
 
-Edit site-wide theme defaults in `site/theme.md`, homepage content and section
-overrides in `site/content.md`, technical settings such as URL, layout, font,
-and locale labels in `site/config.mjs`, source images under
+Edit site-wide visual defaults in `site/theme.md`, homepage content and section
+overrides in `site/content.md`, technical settings such as URL and locale
+labels in `site/config.mjs`, source images under
 `site/images/<section-id>/`, and static public files under `site/public/`.
 
 Use `site.basePath: '/'` for a custom domain or root-hosted site. For a GitHub
@@ -32,14 +32,10 @@ site: {
 
 In GitHub repository settings, configure Pages to build from GitHub Actions.
 
-The page width is configured with `layout.pageWidth`; gallery width is
-configured with `gallery.width`. Side margins are configured with
-`layout.gutter`; image height is limited with
-`gallery.maxAvailableHeightPercent`.
-
-The site font is configured with `typography.fontFamily` in `site/config.mjs`.
-Site-wide text presentation is configured with typography presets and overrides
-in `site/theme.md`; page and section overrides live in `site/content.md`.
+Page width, side gutters, layout density, typography rhythm, image width, image
+height limits, font, colors, and site-wide typography are configured in
+`site/theme.md`. Page and section presentation overrides live in
+`site/content.md`.
 
 Commit `package-lock.json` after the first install so GitHub Actions can use
 `npm ci`.
@@ -54,9 +50,9 @@ npm run norna:typography:show
 npm run norna:build
 ```
 
-This keeps gallery commands separate from repository-specific build or
-publishing commands in projects that embed a gallery inside a larger GitHub
-project. This pure starter also keeps `npm run build` as an alias for
+This keeps Norna commands separate from repository-specific build or publishing
+commands in projects that embed a Norna site inside a larger GitHub project.
+This pure starter also keeps `npm run build` as an alias for
 `npm run norna:build`.
 
 Use `npm run norna:engine:version` to inspect the installed engine and

package/starters/basic/package.json

@@ -14,8 +14,8 @@
     "norna:config:check": "norna config:check",
     "norna:content:check": "norna content:check",
     "norna:sync": "norna content:sync",
-    "norna:typography:presets": "norna typography:presets",
-    "norna:typography:show": "norna typography:show",
+    "norna:typography:presets": "norna typography presets",
+    "norna:typography:show": "norna typography show",
     "norna:public": "norna site:public",
     "norna:images": "norna images",
     "norna:build": "norna build",

package/starters/basic/site/config.mjs

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