@janga/norna 0.7.2 → 0.7.3

package/src/components/SiteSection.astro

@@ -32,6 +32,9 @@ interface Props {
 
 const { section, pagePresentation, 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';
+type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4';
 const headingSizeValues: Record<TextSize, ResponsiveValue<string>> = {
 	small: {
 		desktop: 'clamp(1.1rem, 1.02rem + 0.35vw, 1.35rem)',
@@ -97,10 +100,26 @@ 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;
+	spacing: 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;
+		spacing: 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 = getSizeValue(headingSizeValues, 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 +137,19 @@ 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 = getSizeValue(headingSizeValues, 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: ${headingConfig.spacing}`,
+	];
+};
 const sectionStyle = [
 	`--section-background-color: ${backgroundColor}`,
 	`--section-text-color: ${textColor}`,
@@ -125,10 +157,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: ${heading.spacing}`,
 	`--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}`,
@@ -150,7 +184,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

@@ -25,6 +25,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.')
@@ -55,6 +61,12 @@ const headingPresentationOverride = z.object({
 	...commonTextPresentationOverride,
 	spacing: 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,
 	paragraphSpacing: cssLength.optional(),
@@ -64,7 +76,7 @@ const captionPresentationOverride = z.object({
 	spacing: cssLength.optional(),
 }).strict();
 const typographyOverrides = z.object({
-	heading: headingPresentationOverride.optional(),
+	headings: headingLevelsPresentationOverride.optional(),
 	body: bodyPresentationOverride.optional(),
 	caption: captionPresentationOverride.optional(),
 }).strict();
@@ -75,6 +87,50 @@ const typography = z.object({
 	(value) => value.preset !== undefined || value.overrides !== undefined,
 	'Specify preset, 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(),
+	overrides: typographyOverrides.optional(),
+}).strict().refine(
+	(value) => value.fontFamily !== undefined || value.preset !== undefined || value.overrides !== undefined,
+	'Specify fontFamily, preset, 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(),
+	sectionHeadingToBody: responsiveCssLength.optional(),
+	subheadingRuleTop: responsiveCssLength.optional(),
+	subheadingTop: responsiveCssLength.optional(),
+}).strict();
+const themeLayout = z.object({
+	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 +142,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 +196,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,29 @@ 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-title-to-body-desktop: ${layoutSpacing.sectionHeadingToBody.desktop}`,
+	`--space-section-title-to-body-mobile: ${layoutSpacing.sectionHeadingToBody.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}`,
+	`--space-subheading-top-desktop: ${layoutSpacing.subheadingTop.desktop}`,
+	`--space-subheading-top-mobile: ${layoutSpacing.subheadingTop.mobile}`,
+	`--space-subheading-rule-top-desktop: ${layoutSpacing.subheadingRuleTop.desktop}`,
+	`--space-subheading-rule-top-mobile: ${layoutSpacing.subheadingRuleTop.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,30 @@
 	--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-title-to-body-desktop: clamp(0.5625rem, 1.25vw, 0.75rem);
+	--space-section-title-to-body-mobile: 0.4375rem;
+	--space-section-title-to-body: var(--space-section-title-to-body-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);
+	--space-subheading-top-desktop: 2rem;
+	--space-subheading-top-mobile: 1.6rem;
+	--space-subheading-top: var(--space-subheading-top-desktop);
+	--space-subheading-rule-top-desktop: 1rem;
+	--space-subheading-rule-top-mobile: 0.8rem;
+	--space-subheading-rule-top: var(--space-subheading-rule-top-desktop);
 
 	--content-gutter-desktop: clamp(1.25rem, 4vw, 3rem);
 	--content-gutter-mobile: 1rem;
@@ -316,7 +326,7 @@ a {
 }
 
 .site-section:last-child {
-	padding-bottom: var(--space-section-to-section);
+	padding-bottom: var(--space-final-section-bottom);
 }
 
 .section-card {
@@ -331,15 +341,15 @@ a {
 	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 +360,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;
@@ -389,23 +394,25 @@ h2 {
 }
 
 .section-markdown h3 {
-	margin: 2.75rem 0 0.9rem;
+	margin: var(--space-subheading-top) 0 var(--section-markdown-h3-spacing, 0.9rem);
 	border-top: 1px solid var(--color-soft);
-	padding-top: 1.75rem;
+	padding-top: var(--space-subheading-rule-top);
 	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: 0 0 var(--section-markdown-h4-spacing, 0.85rem);
 	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,
@@ -639,11 +646,14 @@ 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-title-to-body: var(--space-section-title-to-body-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);
+		--space-subheading-top: var(--space-subheading-top-mobile);
+		--space-subheading-rule-top: var(--space-subheading-rule-top-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 +790,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 +822,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,9 @@ 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, vertical spacing, 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 +49,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',
 	},

package/starters/basic/site/content.md

@@ -1,23 +1,56 @@
 ---
-title: Example Gallery
+title: Example Site
 description: Minimal norna starter site.
 sections:
   - id: intro
     presentation:
       typography:
         preset: statement
-    gallery: []
   - id: work
-    gallery: []
+  - id: lorem1
+  - id: lorem2
+  - id: lorem3
+
 ---
 
 ## Intro {#intro}
-
 This is a minimal starter site for norna. Since this site doesn't have any
 routes defined, the navigation menu will be a sticky bar with anchor links for
 ease of use on phones etc. [Highlighted inline text]{.highlight} when a short
 phrase needs emphasis
-
 ## Work {#work}
-
-Add gallery rows in frontmatter and matching source images under images/work/.
+Add image rows in frontmatter and matching source images under images/work/.
+## What is Lorem Ipsum? {#lorem1}
+Lorem Ipsum is simply dummy text of the printing and typesetting
+industry. Lorem Ipsum has been the industry's standard dummy text ever
+since 1966, when designers at Letraset and James Mosley, the librarian
+at St Bride Printing Library in London, took a 1914 Cicero translation
+and scrambled it to make dummy text for Letraset's Body Type
+sheets. It has survived not only many decades, but also the leap into
+electronic typesetting, remaining essentially unchanged. It was
+popularised thanks to these sheets and more recently with desktop
+publishing software like Aldus PageMaker and Microsoft Word including
+versions of Lorem Ipsum.
+## Why do we use it? {#lorem2}
+It is a long established fact that a reader will be distracted by the
+readable content of a page when looking at its layout. The point of
+using Lorem Ipsum is that it has a more-or-less normal distribution of
+letters, as opposed to using 'Content here, content here', making it
+look like readable English. Many desktop publishing packages and web
+page editors now use Lorem Ipsum as their default model text, and a
+search for 'lorem ipsum' will uncover many web sites still in their
+infancy. Various versions have evolved over the years, sometimes by
+accident, sometimes on purpose (injected humour and the like).
+## Where does it come from? {#lorem3}
+Contrary to popular belief, Lorem Ipsum is not simply random text. It
+has roots in a piece of classical Latin literature from 45 BC, making
+it over 2000 years old. Richard McClintock, a Latin professor at
+Hampden-Sydney College in Virginia, looked up one of the more obscure
+Latin words, consectetur, from a Lorem Ipsum passage, and going
+through the cites of the word in classical literature, discovered the
+undoubtable source. Lorem Ipsum comes from sections 1.10.32 and
+1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
+Evil) by Cicero, written in 45 BC. This book is a treatise on the
+theory of ethics, very popular during the Renaissance. The first line
+of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
+section 1.10.32