@janga/norna 0.7.3 → 0.7.4

package/src/components/SiteSection.astro

@@ -35,22 +35,78 @@ 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)',
-		mobile: 'clamp(1.12rem, 1rem + 0.85vw, 1.42rem)',
+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>> = {
@@ -94,6 +150,9 @@ 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
@@ -104,7 +163,8 @@ const heading = typography.headings[sectionHeadingVisualLevel] as {
 	align: ResponsiveValue<TextAlign>;
 	size: TextSize;
 	lineHeight: number;
-	spacing: string;
+	spacingBefore: string;
+	spacingAfter: string;
 };
 const markdownHeadingLevels = ['h3', 'h4'] as const;
 const markdownHeadings = Object.fromEntries(markdownHeadingLevels.map((level) => [
@@ -113,13 +173,14 @@ const markdownHeadings = Object.fromEntries(markdownHeadingLevels.map((level) =>
 		align: ResponsiveValue<TextAlign>;
 		size: TextSize;
 		lineHeight: number;
-		spacing: string;
+		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, heading.size);
+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> = {
@@ -139,7 +200,7 @@ 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);
+	const fontSize = getHeadingSizeValue(level, headingConfig.size);
 
 	return [
 		`--section-markdown-${level}-align-desktop: ${headingConfig.align.desktop}`,
@@ -147,7 +208,8 @@ const markdownHeadingStyle = (level: 'h3' | 'h4') => {
 		`--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}`,
+		`--section-markdown-${level}-spacing-before: ${headingConfig.spacingBefore}`,
+		`--section-markdown-${level}-spacing-after: ${headingConfig.spacingAfter}`,
 	];
 };
 const sectionStyle = [
@@ -158,7 +220,7 @@ const sectionStyle = [
 	`--section-heading-font-size-desktop: ${headingFontSize.desktop}`,
 	`--section-heading-font-size-mobile: ${headingFontSize.mobile}`,
 	`--section-heading-line-height: ${heading.lineHeight}`,
-	`--section-heading-spacing: ${heading.spacing}`,
+	`--section-heading-spacing-after: ${heading.spacingAfter}`,
 	`--section-heading-width-desktop: ${headingWidth.desktop}`,
 	`--section-heading-width-mobile: ${headingWidth.mobile}`,
 	...markdownHeadingStyle('h3'),
@@ -176,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('; ');

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.');
@@ -59,7 +60,8 @@ const commonTextPresentationOverride = {
 };
 const headingPresentationOverride = z.object({
 	...commonTextPresentationOverride,
-	spacing: cssLength.optional(),
+	spacingBefore: cssLength.optional(),
+	spacingAfter: cssLength.optional(),
 }).strict();
 const headingLevelsPresentationOverride = z.object({
 	h1: headingPresentationOverride.optional(),
@@ -73,7 +75,7 @@ const bodyPresentationOverride = z.object({
 }).strict();
 const captionPresentationOverride = z.object({
 	...commonTextPresentationOverride,
-	spacing: cssLength.optional(),
+	spacingBefore: cssLength.optional(),
 }).strict();
 const typographyOverrides = z.object({
 	headings: headingLevelsPresentationOverride.optional(),
@@ -82,20 +84,22 @@ const typographyOverrides = z.object({
 }).strict();
 const typography = z.object({
 	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.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.fontFamily !== undefined || value.preset !== undefined || value.overrides !== undefined,
-	'Specify fontFamily, 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,
@@ -117,11 +121,9 @@ const themeLayoutSpacing = z.object({
 	firstSectionTop: responsiveCssLength.optional(),
 	imageGap: responsiveCssLength.optional(),
 	sectionGap: responsiveCssLength.optional(),
-	sectionHeadingToBody: responsiveCssLength.optional(),
-	subheadingRuleTop: responsiveCssLength.optional(),
-	subheadingTop: responsiveCssLength.optional(),
 }).strict();
 const themeLayout = z.object({
+	density: spacingDensity.optional(),
 	pageWidth: visualCssLength.optional(),
 	gutter: responsiveCssLength.optional(),
 	spacing: themeLayoutSpacing.optional(),

package/src/layouts/BaseLayout.astro

@@ -38,8 +38,6 @@ const documentStyle = [
 	`--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}`,
@@ -48,10 +46,6 @@ const documentStyle = [
 	`--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

@@ -31,9 +31,6 @@
 	--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);
@@ -46,12 +43,6 @@
 	--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;
@@ -337,7 +328,7 @@ 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);
 }
 
@@ -380,6 +371,31 @@ ul {
 	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);
 }
@@ -393,10 +409,21 @@ ul {
 	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: var(--space-subheading-top) 0 var(--section-markdown-h3-spacing, 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: var(--space-subheading-rule-top);
+	padding-top: 0.55em;
 	font-family: var(--font-sans);
 	font-size: var(--section-markdown-h3-font-size-desktop, 0.82rem);
 	letter-spacing: 0;
@@ -406,7 +433,10 @@ ul {
 }
 
 .section-markdown h4 {
-	margin: 0 0 var(--section-markdown-h4-spacing, 0.85rem);
+	margin:
+		var(--section-markdown-h4-spacing-before, 1.1em)
+		0
+		var(--section-markdown-h4-spacing-after, 0.4em);
 	color: inherit;
 	font-size: var(--section-markdown-h4-font-size-desktop, clamp(0.96rem, 0.94rem + 0.08vw, 1rem));
 	font-weight: 400;
@@ -625,7 +655,7 @@ ul {
 
 .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);
 }
@@ -647,13 +677,10 @@ ul {
 @media (max-width: 700px) {
 	:root {
 		--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);

package/starters/basic/README.md

@@ -32,9 +32,10 @@ site: {
 
 In GitHub repository settings, configure Pages to build from GitHub Actions.
 
-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`.
+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`.

package/starters/basic/site/theme.md

@@ -7,6 +7,7 @@
 # navigation:
 #   brand: site-wide brand/home text; defaults to the homepage title
 # layout:
+#   density: compact | normal | airy
 #   pageWidth: CSS length, e.g. 1180px
 #   gutter:
 #     desktop: CSS length or clamp(), e.g. clamp(1.25rem, 4vw, 3rem)
@@ -16,26 +17,17 @@
 #       desktop: CSS length or clamp(), e.g. clamp(1.875rem, 3vw, 2.75rem)
 #       mobile: CSS length, e.g. 1.375rem
 #     sectionGap:
-#       desktop: CSS length or clamp(), e.g. clamp(2.55rem, 4.2vw, 3.9rem)
-#       mobile: CSS length, e.g. 2.25rem
+#       desktop: CSS length or clamp(), e.g. clamp(1.4rem, 3vw, 2.75rem)
+#       mobile: CSS length, e.g. 1.5rem
 #     finalSectionBottom:
-#       desktop: CSS length or clamp(), e.g. clamp(2.55rem, 4.2vw, 3.9rem)
-#       mobile: CSS length, e.g. 2.25rem
-#     sectionHeadingToBody:
-#       desktop: CSS length or clamp(), e.g. clamp(0.5625rem, 1.25vw, 0.75rem)
-#       mobile: CSS length, e.g. 0.4375rem
+#       desktop: CSS length or clamp(), e.g. clamp(1.4rem, 3vw, 2.75rem)
+#       mobile: CSS length, e.g. 1.5rem
 #     bodyToImages:
-#       desktop: CSS length or clamp(), e.g. clamp(1.25rem, 2.5vw, 2rem)
-#       mobile: CSS length, e.g. 1.25rem
+#       desktop: CSS length, e.g. 1.25rem
+#       mobile: CSS length, e.g. 1rem
 #     imageGap:
-#       desktop: CSS length or clamp(), e.g. clamp(1.5rem, 3.5vw, 2.75rem)
-#       mobile: CSS length, e.g. 2.75rem
-#     subheadingTop:
-#       desktop: CSS length, e.g. 2rem
-#       mobile: CSS length, e.g. 1.6rem
-#     subheadingRuleTop:
-#       desktop: CSS length, e.g. 1rem
-#       mobile: CSS length, e.g. 0.8rem
+#       desktop: CSS length or clamp(), e.g. clamp(1.25rem, 2.8vw, 2rem)
+#       mobile: CSS length, e.g. 1.5rem
 # gallery:
 #   width: CSS length, e.g. 900px
 #   maxAvailableWidthPercent:
@@ -47,6 +39,7 @@
 # typography:
 #   fontFamily: CSS font-family stack
 #   preset: quiet-gallery | compact-gallery | text-forward | statement
+#   rhythm: compact | normal | airy
 #   overrides:
 #     headings:
 #       h2:
@@ -55,21 +48,24 @@
 #           mobile: left | center | right
 #         size: small | medium | large | xlarge
 #         lineHeight: number from 1 through 3
-#         spacing: CSS length, e.g. 0.65em
+#         spacingBefore: CSS length, e.g. 0
+#         spacingAfter: CSS length, e.g. 0.55em
 #       h3:
 #         align:
 #           desktop: left | center | right
 #           mobile: left | center | right
 #         size: small | medium | large | xlarge
 #         lineHeight: number from 1 through 3
-#         spacing: CSS length, e.g. 0.9rem
+#         spacingBefore: CSS length, e.g. 1.5em
+#         spacingAfter: CSS length, e.g. 0.5em
 #       h4:
 #         align:
 #           desktop: left | center | right
 #           mobile: left | center | right
 #         size: small | medium | large | xlarge
 #         lineHeight: number from 1 through 3
-#         spacing: CSS length, e.g. 0.85rem
+#         spacingBefore: CSS length, e.g. 1.1em
+#         spacingAfter: CSS length, e.g. 0.4em
 #     body:
 #       align:
 #         desktop: left | center | right
@@ -83,7 +79,7 @@
 #         mobile: left | center | right
 #       size: small | medium | large | xlarge
 #       lineHeight: number from 1 through 3
-#       spacing: CSS length, e.g. 0.5em
+#       spacingBefore: CSS length, e.g. 0.5em
 # presentation:
 #   backgroundColor: quoted hex color, e.g. "#000000"
 #   textColor: quoted hex color, e.g. "#f7f4ee"
@@ -99,35 +95,11 @@
 navigation:
   brand: Example Site
 layout:
+  density: normal
   pageWidth: 1180px
   gutter:
     desktop: clamp(1.25rem, 4vw, 3rem)
     mobile: 1rem
-  spacing:
-    firstSectionTop:
-      desktop: clamp(1.875rem, 3vw, 2.75rem)
-      mobile: 1.375rem
-    sectionGap:
-      desktop: clamp(2.55rem, 4.2vw, 3.9rem)
-      mobile: 2.25rem
-    finalSectionBottom:
-      desktop: clamp(2.55rem, 4.2vw, 3.9rem)
-      mobile: 2.25rem
-    sectionHeadingToBody:
-      desktop: clamp(0.5625rem, 1.25vw, 0.75rem)
-      mobile: 0.4375rem
-    bodyToImages:
-      desktop: clamp(1.25rem, 2.5vw, 2rem)
-      mobile: 1.25rem
-    imageGap:
-      desktop: clamp(1.5rem, 3.5vw, 2.75rem)
-      mobile: 2.75rem
-    subheadingTop:
-      desktop: 2rem
-      mobile: 1.6rem
-    subheadingRuleTop:
-      desktop: 1rem
-      mobile: 0.8rem
 gallery:
   width: 900px
   maxAvailableWidthPercent:
@@ -139,6 +111,7 @@ gallery:
 typography:
   fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
   preset: quiet-gallery
+  rhythm: normal
 presentation:
   backgroundColor: "#000000"
   textColor: "#f7f4ee"

package/starters/project/README.md

@@ -20,10 +20,10 @@ npm run dev -- --kill
 
 - `site/config.mjs`: technical settings such as URL, language labels, GitHub
   repository, and deploy workflow.
-- `site/theme.md`: site-wide visual settings such as brand text, colors,
-  frame colors, and inline text styles.
-- `site/content.md`: homepage title, sections, project summary, links,
-  install command, example usage, features, and next steps.
+- `site/theme.md`: site-wide visual settings such as brand text, layout
+  density, typography rhythm, colors, frame colors, and inline text styles.
+- `site/content.md`: homepage title, sections, placeholders, project summary,
+  links, install command, example usage, benefits, next steps, and license.
 - `site/routes/guide/route-content.md`: short secondary page with realistic
   project guide content.
 - `site/public/robots.txt`: static public file copied into the built site.
@@ -35,11 +35,11 @@ GitHub Pages workflow uses `npm ci`.
 ## Adapt The Starter
 
 1. Replace the project name, tagline, links, install command, example usage,
-   features, and use cases in `site/content.md`.
+   benefits, use cases, and license in `site/content.md`.
 2. Replace the guide examples in `site/routes/guide/route-content.md`, or
    delete the route if the homepage is enough.
-3. Edit `site/theme.md` for brand name, colors, frame colors, and inline text
-   styles.
+3. Edit `site/theme.md` for brand name, layout density, typography rhythm,
+   colors, frame colors, and inline text styles.
 4. Edit `site/config.mjs` for public URL, GitHub repository, footer text, and
    deploy workflow name.
 5. Update `package.json` with the site's package name and keep

package/starters/project/package-lock.json

@@ -6,7 +6,7 @@
     "": {
       "name": "project-site",
       "dependencies": {
-        "@janga/norna": "0.7.2"
+        "@janga/norna": "0.7.3"
       }
     },
     "node_modules/@astrojs/compiler-binding": {
@@ -1503,9 +1503,9 @@
       }
     },
     "node_modules/@janga/norna": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/@janga/norna/-/norna-0.7.2.tgz",
-      "integrity": "sha512-N0KPzTZmrBv+eABMqniJY8UQwDh4wM4dupsuahadUzum9bYFZxN1Mi0TWfV8rKOMHzzqA0gaiRYCY4ldIOQ9cw==",
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@janga/norna/-/norna-0.7.3.tgz",
+      "integrity": "sha512-2Op2fgDpdZWBarVswRgw8oyKQmssbYMcA8fXv2n2Y1UH8h1YDSbSt7l1WNzXXDlYkelOLAmlJAkgZ9rGIIN8xA==",
       "license": "GPL-3.0-only",
       "dependencies": {
         "astro": "^7.1.3",

package/starters/project/package.json

@@ -30,6 +30,6 @@
     "build": "npm run norna:build"
   },
   "dependencies": {
-    "@janga/norna": "0.7.2"
+    "@janga/norna": "0.7.3"
   }
 }