@janga/norna 0.7.23 → 0.7.24

package/src/lib/sectionContent.ts

@@ -36,7 +36,16 @@ type ParsedCardListBlock = {
 	width?: CardListWidth;
 	cards: CardListItem[];
 };
-type ParsedNornaBlock = ParsedImageBlock | ParsedCardListBlock;
+type ParsedPageListBlock = {
+	type: 'page-list';
+	line: number;
+};
+type ParsedNornaBlock = ParsedImageBlock | ParsedCardListBlock | ParsedPageListBlock;
+type PageListItem = {
+	title: string;
+	pathname: string;
+	description?: string;
+};
 type InlineNote = {
 	markdown: string;
 	number: number;
@@ -48,7 +57,8 @@ type SectionContentBlock =
 	| { type: 'html'; html: string }
 	| { type: 'image-stack'; images: ManagedImage[] }
 	| { type: 'image-carousel'; images: ManagedImage[] }
-	| { type: 'card-list'; layout: CardListLayout; flow: CardListFlow; size: CardListSize; width?: CardListWidth; cards: CardListItem[] };
+	| { type: 'card-list'; layout: CardListLayout; flow: CardListFlow; size: CardListSize; width?: CardListWidth; cards: CardListItem[] }
+	| { type: 'page-list'; pages: PageListItem[] };
 export type ResolvedSection = {
 	id: string | null;
 	title: string;
@@ -222,6 +232,7 @@ const resolveContentBlocks = async (
 	html: string,
 	blocks: ParsedNornaBlock[],
 	page: SitePage,
+	childPages: SitePage[],
 	inlineNotes: InlineNote[] = [],
 ) => {
 	const renderedNotes = await Promise.all(inlineNotes.map(async (note) => ({
@@ -252,6 +263,20 @@ const resolveContentBlocks = async (
 			});
 			continue;
 		}
+		if (block.type === 'page-list') {
+			if (childPages.length === 0) {
+				throw new Error(`${page.contentLabel} line ${block.line}: page-list has no listed direct child pages to display. Navigation categories are not pages. Add a listed direct child page or remove the block.`);
+			}
+			resolvedBlocks.push({
+				type: 'page-list',
+				pages: childPages.map((childPage) => ({
+					title: childPage.title,
+					pathname: childPage.pathname,
+					description: childPage.entry.data.page?.description,
+				})),
+			});
+			continue;
+		}
 
 		resolvedBlocks.push({
 			type: block.type,
@@ -268,6 +293,7 @@ const resolveContentBlocks = async (
 export const getSectionsContent = async (
 	html: string,
 	page: SitePage,
+	childPages: SitePage[] = [],
 ) => {
 	const pageDocument = page.markdownDocument;
 	const sourceLabel = page.contentLabel;
@@ -307,6 +333,9 @@ export const getSectionsContent = async (
 		if (bodySection.noteErrors.length > 0) {
 			throw new Error(bodySection.noteErrors[0].message);
 		}
+		if (bodySection.calloutErrors.length > 0) {
+			throw new Error(bodySection.calloutErrors[0].message);
+		}
 
 		const inlineNotes = bodySection.notes.map((note) => {
 			const number = nextNoteNumber;
@@ -326,7 +355,7 @@ export const getSectionsContent = async (
 			title,
 			titleHtml: await renderHeadingTitleHtml(bodySection.heading.source),
 			headingLevel,
-			contentBlocks: await resolveContentBlocks(content, bodySection.blocks, page, inlineNotes),
+			contentBlocks: await resolveContentBlocks(content, bodySection.blocks, page, childPages, inlineNotes),
 		});
 	}
 

package/src/lib/siteNavigation.ts

@@ -1,5 +1,12 @@
 import type { HeadingNavigation, SectionNavigation } from './sectionContent';
 import type { SiteNode, SitePage } from './sitePages';
+import {
+	flattenSiteNavigationTree as flattenSiteNavigationTreeShared,
+	getDirectChildPages as getDirectChildPagesShared,
+	getFirstPageInNavigationNode as getFirstPageInNavigationNodeShared,
+	getListedSiteNavigationTree as getListedSiteNavigationTreeShared,
+	getSequentialPageNavigation as getSequentialPageNavigationShared,
+} from '../../scripts/lib/site-navigation-tree.mjs';
 
 export type SiteNavigationEntry = {
 	node: SiteNode;
@@ -11,57 +18,29 @@ export type SiteNavigationNode = SiteNavigationEntry & {
 	children: SiteNavigationNode[];
 };
 
-export const getSiteNavigationTree = (entries: SiteNavigationEntry[]) => {
-	const nodes = new Map<string, SiteNavigationNode>();
-	const roots: SiteNavigationNode[] = [];
-
-	for (const entry of entries) {
-		nodes.set(entry.node.pagePath, { ...entry, children: [] });
-	}
-
-	for (const entry of entries) {
-		const node = nodes.get(entry.node.pagePath);
-		if (!node) continue;
-
-		if (entry.node.isHome || entry.node.parentPagePath === null) {
-			roots.push(node);
-			continue;
-		}
-
-		const parent = nodes.get(entry.node.parentPagePath);
-		if (!parent) {
-			throw new Error(`Site node "${entry.node.pagePath}" has no parent node "${entry.node.parentPagePath}".`);
-		}
-
-		parent.children.push(node);
-	}
-
-	return roots;
-};
-
-export const getListedSiteNavigationTree = (entries: SiteNavigationEntry[]) => {
-	const filterListed = (nodes: SiteNavigationNode[]): SiteNavigationNode[] => nodes.flatMap((node) => {
-		if (!node.node.isHome && !node.node.navigation.listed) return [];
-		const children = filterListed(node.children);
-		if (node.node.kind === 'category' && children.length === 0) return [];
-		return [{ ...node, children }];
-	});
-
-	return filterListed(getSiteNavigationTree(entries));
-};
-
-export const getFirstPageInNavigationNode = (node: SiteNavigationNode): SitePage | null => {
-	if (node.node.kind === 'page') return node.node;
-
-	for (const child of node.children) {
-		const page = getFirstPageInNavigationNode(child);
-		if (page) return page;
+export const getListedSiteNavigationTree = (entries: SiteNavigationEntry[]) => (
+	getListedSiteNavigationTreeShared(entries) as SiteNavigationNode[]
+);
+
+export const getFirstPageInNavigationNode = (node: SiteNavigationNode): SitePage | null => (
+	getFirstPageInNavigationNodeShared(node) as SitePage | null
+);
+
+export const flattenSiteNavigationTree = (nodes: SiteNavigationNode[]): SiteNavigationNode[] => (
+	flattenSiteNavigationTreeShared(nodes) as SiteNavigationNode[]
+);
+
+export const getSequentialPageNavigation = (
+	nodes: SiteNavigationNode[],
+	currentPagePath: string,
+): { previous: SitePage | null; next: SitePage | null } => (
+	getSequentialPageNavigationShared(nodes, currentPagePath) as {
+		previous: SitePage | null;
+		next: SitePage | null;
 	}
+);
 
-	return null;
-};
-
-export const flattenSiteNavigationTree = (nodes: SiteNavigationNode[]): SiteNavigationNode[] => nodes.flatMap((node) => [
-	node,
-	...flattenSiteNavigationTree(node.children),
-]);
+export const getDirectChildPages = (
+	nodes: SiteNavigationNode[],
+	currentPagePath: string,
+): SitePage[] => getDirectChildPagesShared(nodes, currentPagePath) as SitePage[];

package/src/lib/sitePublicAssets.ts

@@ -4,6 +4,7 @@ import { sitePublicDir } from '../../scripts/lib/site-paths.mjs';
 import { browserIconAssetDefinitions } from '../../scripts/lib/public-asset-conventions.mjs';
 import projectConfig from '../../scripts/lib/project-config.mjs';
 export { getLogoAsset } from '../../scripts/lib/logo-assets.mjs';
+export { getSocialImageAsset } from '../../scripts/lib/social-image-assets.mjs';
 import { withBasePath } from './basePath';
 
 type IconLink = {

package/src/pages/404.astro

@@ -0,0 +1,110 @@
+---
+import { getCollection } from 'astro:content';
+import { resolveNavigationModel } from '../../scripts/lib/navigation-model.mjs';
+import { getTextWidthCssValue, resolveFrameColors, resolvePagePresentation } from '../../scripts/lib/presentation.mjs';
+import { projectConfig, resolveThemeVisualConfig } from '../../scripts/lib/project-config.mjs';
+import SiteBanners from '../components/SiteBanners.astro';
+import SiteNavigation from '../components/SiteNavigation.astro';
+import SiteSection from '../components/SiteSection.astro';
+import BaseLayout from '../layouts/BaseLayout.astro';
+import type { ResolvedSection } from '../lib/sectionContent';
+import { flattenSiteNavigationTree, getListedSiteNavigationTree } from '../lib/siteNavigation';
+import { getSiteModel, type SitePage } from '../lib/sitePages';
+import { getLogoAsset } from '../lib/sitePublicAssets';
+import { getToday, isVisibleToday } from '../lib/visibility';
+
+const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
+const siteModel = await getSiteModel(await getCollection('site'));
+const { nodes: siteNodes, pages: sitePages } = siteModel;
+const homePage = sitePages.find((page) => page.isHome);
+if (!homePage) throw new Error('The required homepage is missing from the site page model.');
+
+const [siteTheme] = await getCollection('theme');
+if (!siteTheme) throw new Error('site/theme.yaml is required. Add a root theme before building the site.');
+const [sitewide] = await getCollection('sitewide');
+const sitewideData = sitewide?.data ?? {};
+const siteThemeData = siteTheme.data;
+const themeLabel = `${siteDirectory || 'site'}/${siteTheme.id}`;
+const visualTheme = resolveThemeVisualConfig(siteThemeData, themeLabel);
+const getPageContent = (page: SitePage) => page.markdownDocument.navigationHeadings.map((heading) => ({ ...heading }));
+const siteNavigation = siteNodes.map((node) => {
+	const headings = node.kind === 'page' ? getPageContent(node) : [];
+	return {
+		node,
+		headings,
+		sections: headings
+			.filter((heading) => heading.depth === 2)
+			.map(({ id, title }) => ({ id, title })),
+	};
+});
+const renderedNavigationEntries = flattenSiteNavigationTree(getListedSiteNavigationTree(siteNavigation));
+const navigationModel = resolveNavigationModel({
+	mode: projectConfig.navigation.mode,
+	nodes: renderedNavigationEntries.map(({ node, headings }) => ({
+		depth: Math.max(1, node.depth),
+		headings,
+		isHome: node.isHome,
+		kind: node.kind,
+		listed: node.navigation.listed,
+		pagePath: node.pagePath,
+	})),
+});
+const pagePresentation = resolvePagePresentation(siteThemeData, themeLabel, {
+	navigationMode: navigationModel.mode,
+});
+const pageTextWidth = getTextWidthCssValue(pagePresentation.typography.values.body.width);
+const frameColors = resolveFrameColors({ theme: siteThemeData, sourceLabel: themeLabel });
+const logoAsset = getLogoAsset();
+const logo = logoAsset
+	? {
+		src: logoAsset.href,
+		alt: homePage.title,
+		height: sitewideData.logo?.height,
+	}
+	: undefined;
+const today = getToday();
+const siteBanners = (sitewideData.banners ?? []).filter((banner) => isVisibleToday(banner.visible, today));
+const notFoundSection: ResolvedSection = {
+	id: null,
+	title: projectConfig.locale.labels.notFound,
+	titleHtml: projectConfig.locale.labels.notFound,
+	headingLevel: 1,
+	contentBlocks: [{
+		type: 'html',
+		html: `<p>${projectConfig.locale.labels.notFoundText}</p><p><a href="${projectConfig.site.basePath}">${projectConfig.locale.labels.returnHome}</a></p>`,
+	}],
+};
+const hasNavigationRailFrame = navigationModel.requestedMode === 'tree'
+	|| (
+		navigationModel.requestedMode === 'automatic'
+		&& (navigationModel.hasNestedPages || navigationModel.hasCategories)
+	);
+---
+
+<BaseLayout
+	title={projectConfig.locale.labels.notFound}
+	presentation={pagePresentation}
+	visualTheme={visualTheme}
+	frameColors={frameColors}
+	footer={sitewideData.footer}
+	indexable={false}
+>
+	<SiteNavigation
+		logo={logo}
+		navigationEntries={siteNavigation}
+		navigationMode={navigationModel.mode}
+		showTopNavigationSubmenus={navigationModel.requestedMode !== 'automatic' && navigationModel.mode !== 'tree'}
+		hasNavigationRailFrame={hasNavigationRailFrame}
+		frameColors={frameColors}
+		readerPreferences={pagePresentation.readerPreferences}
+	/>
+	{siteBanners.length > 0 && <SiteBanners banners={siteBanners} />}
+	<main class="site-content" id="main-content" style={`--page-text-width: ${pageTextWidth}`}>
+		<SiteSection
+			section={notFoundSection}
+			pagePresentation={pagePresentation}
+			visualTheme={visualTheme}
+			sectionIndex={0}
+		/>
+	</main>
+</BaseLayout>

package/src/pages/[...slug].astro

@@ -1,8 +1,11 @@
 ---
 import { getCollection } from 'astro:content';
 import { assertPageAliasModel, createPageAliasModel } from '../../scripts/lib/page-aliases.mjs';
+import { getGeneratedSiteRoutes } from '../../scripts/lib/page-aliases.mjs';
 import { getSitePublicFiles } from '../../scripts/lib/site-link-graph.mjs';
+import projectConfig from '../../scripts/lib/project-config.mjs';
 import PageAliasRedirect from '../components/PageAliasRedirect.astro';
+import SearchPage from '../components/SearchPage.astro';
 import SitePage from '../components/SitePage.astro';
 import { getSiteModel, getSitePage, isHomePageEntry } from '../lib/sitePages';
 
@@ -13,6 +16,7 @@ export async function getStaticPaths() {
 		categories: siteModel.categories,
 		pages: siteModel.pages,
 		publicFiles: await getSitePublicFiles(),
+		generatedRoutes: getGeneratedSiteRoutes({ searchEnabled: projectConfig.search.enabled }),
 	}));
 	const pagesByPathname = new Map(siteModel.pages.map((page) => [page.pathname, page]));
 
@@ -37,22 +41,28 @@ export async function getStaticPaths() {
 		};
 	});
 
-	return [...pagePaths, ...aliasPaths];
+	const searchPath = projectConfig.search.enabled
+		? [{ params: { slug: 'search' }, props: { searchPage: true } }]
+		: [];
+
+	return [...pagePaths, ...aliasPaths, ...searchPath];
 }
 
-const { alias, entry } = Astro.props;
+const { alias, entry, searchPage } = Astro.props;
 
-if (!alias && (!entry || isHomePageEntry(entry))) {
+if (!searchPage && !alias && (!entry || isHomePageEntry(entry))) {
 	throw new Error('Page entry is missing.');
 }
 
 const currentPage = entry ? await getSitePage(entry) : null;
 
-if (!alias && !currentPage?.pathSegment) {
+if (!searchPage && !alias && !currentPage?.pathSegment) {
 	throw new Error(`Page "${entry.id}" needs a page id.`);
 }
 ---
 
-{alias
+{searchPage
+	? <SearchPage />
+	: alias
 	? <PageAliasRedirect targetPathname={alias.targetPathname} targetTitle={alias.targetTitle} />
 	: <SitePage entry={entry} />}

package/src/styles/content.css

@@ -252,24 +252,6 @@ ul {
 	min-width: 0;
 }
 
-@media (min-width: 1101px) {
-	@container (min-width: 55rem) {
-		.section-note {
-			float: right;
-			clear: right;
-			width: var(--layout-note-width);
-			margin: 0 calc(0px - var(--layout-note-width) - var(--layout-note-gap)) 0.75rem var(--layout-note-gap);
-		}
-	}
-
-	.site-page-layout-contents .section-note {
-		float: none;
-		clear: none;
-		width: 100%;
-		margin: var(--section-body-paragraph-spacing, 0.85em) 0 0;
-	}
-}
-
 .section-markdown {
 	width: var(--layout-reading-width);
 	max-width: none;
@@ -280,6 +262,95 @@ ul {
 	text-align: var(--section-body-align-desktop, left);
 }
 
+.norna-search {
+	--pagefind-ui-scale: 0.88;
+	--pagefind-ui-primary: var(--color-link-text);
+	--pagefind-ui-text: var(--color-primary-text);
+	--pagefind-ui-background: var(--color-page);
+	--pagefind-ui-border: var(--color-nav-separator);
+	--pagefind-ui-tag: var(--color-surface-soft-background);
+	--pagefind-ui-border-width: 1px;
+	--pagefind-ui-border-radius: var(--corner-radius-medium);
+	--pagefind-ui-image-border-radius: var(--corner-radius-medium);
+	--pagefind-ui-font: var(--font-sans);
+	width: var(--layout-reading-width);
+	margin: var(--space-content-block-gap) var(--layout-inline-end-margin) 0 var(--layout-inline-start-margin);
+}
+
+.norna-search > [data-search-status] {
+	margin: 0;
+	color: var(--color-secondary-text);
+}
+
+.child-page-list {
+	width: var(--layout-reading-width);
+	margin-block: 0;
+	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
+	font-size: var(--section-body-font-size-desktop, clamp(0.96rem, 0.94rem + 0.08vw, 1rem));
+	line-height: var(--section-body-line-height, 1.6);
+	text-align: left;
+}
+
+.child-page-list ul {
+	display: grid;
+	gap: 0;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.child-page-list li {
+	margin: 0;
+	border-top: 1px solid var(--color-nav-separator);
+}
+
+.child-page-list li:last-child {
+	border-bottom: 1px solid var(--color-nav-separator);
+}
+
+.child-page-list a {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	align-items: center;
+	gap: 1rem;
+	padding: 0.9rem 0.15rem;
+	color: inherit;
+	text-decoration: none;
+}
+
+.child-page-list a:hover,
+.child-page-list a:focus-visible {
+	background: var(--color-surface-soft-background);
+}
+
+.child-page-list-copy {
+	display: grid;
+	min-width: 0;
+	gap: 0.2rem;
+}
+
+.child-page-list-copy strong {
+	font-size: 1em;
+	font-weight: 650;
+	line-height: 1.35;
+}
+
+.child-page-list-copy > span {
+	color: var(--section-secondary-text-color, var(--color-secondary-text));
+	font-size: 0.9em;
+	line-height: 1.45;
+}
+
+.child-page-list svg {
+	width: 1rem;
+	height: 1rem;
+	stroke-width: 1.75;
+}
+
+.section-body > .child-page-list:not(:last-child) {
+	margin-bottom: var(--space-content-block-gap);
+}
+
 .section-markdown table {
 	display: block;
 	max-width: 100%;
@@ -363,6 +434,61 @@ ul {
 	margin-bottom: 0;
 }
 
+.section-markdown .norna-callout {
+	--callout-accent: var(--color-accent);
+	--callout-background: var(--color-surface-soft-background);
+	--callout-text: var(--color-surface-soft-text);
+	display: flow-root;
+	margin: 0 0 var(--section-body-paragraph-spacing, 1em);
+	border: 1px solid color-mix(in srgb, var(--callout-accent) 52%, transparent);
+	border-inline-start: 0.3rem solid var(--callout-accent);
+	border-radius: var(--corner-radius-medium, 6px);
+	padding: 0.85rem 1rem;
+	background: var(--callout-background);
+	color: var(--callout-text);
+}
+
+.section-markdown .norna-callout-important {
+	--callout-background: var(--color-surface-emphasis-background);
+	--callout-text: var(--color-surface-emphasis-text);
+}
+
+.section-markdown .norna-callout-tip {
+	--callout-accent: var(--color-success-accent);
+	--callout-background: var(--color-success-surface);
+	--callout-text: var(--color-success-text);
+}
+
+.section-markdown :is(.norna-callout-warning, .norna-callout-caution) {
+	--callout-accent: var(--color-warning-accent);
+	--callout-background: var(--color-warning-surface);
+	--callout-text: var(--color-warning-text);
+}
+
+.section-markdown .norna-callout-danger {
+	--callout-accent: var(--color-error-accent);
+	--callout-background: var(--color-error-surface);
+	--callout-text: var(--color-error-text);
+}
+
+.section-markdown .norna-callout-label {
+	margin: 0 0 0.35rem;
+	color: inherit;
+	font-family: var(--font-sans);
+	font-size: 0.78rem;
+	font-weight: 700;
+	letter-spacing: 0;
+	line-height: 1.35;
+}
+
+.section-markdown .norna-callout a {
+	color: inherit;
+}
+
+.section-markdown .norna-callout > :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);
@@ -380,11 +506,55 @@ ul {
 	margin: 0 0 var(--section-body-paragraph-spacing, 1em);
 }
 
+.section-markdown .norna-code-example {
+	margin: 0 0 var(--section-body-paragraph-spacing, 1em);
+	border: 1px solid color-mix(in srgb, var(--color-code-text) 18%, transparent);
+	border-radius: var(--corner-radius-medium, 6px);
+	overflow: hidden;
+	background: var(--color-code-background);
+	color: var(--color-code-text);
+}
+
+.section-markdown .norna-code-title {
+	min-height: 3.25rem;
+	margin: 0;
+	padding: 0.85rem 3.85rem 0.75rem 0.9rem;
+	border-bottom: 1px solid color-mix(in srgb, var(--color-code-text) 22%, transparent);
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+	font-size: 0.82rem;
+	font-weight: 650;
+	line-height: 1.35;
+	overflow-wrap: anywhere;
+}
+
+.section-markdown .norna-code-example > pre.astro-code {
+	margin: 0;
+	border: 0;
+	border-radius: 0;
+}
+
+.section-markdown .norna-code-example.code-block > pre.astro-code {
+	padding-right: 0.9rem;
+}
+
 .section-markdown .code-block > pre.astro-code {
 	margin: 0;
 	padding-right: 3.85rem;
 }
 
+.section-markdown pre.astro-code.norna-code-has-highlighted-lines code {
+	display: block;
+}
+
+.section-markdown pre.astro-code .norna-code-line-highlighted {
+	display: inline-block;
+	width: calc(100% + 1.8rem);
+	margin-inline: -0.9rem;
+	padding-inline: calc(0.9rem - 3px) 0.9rem;
+	border-inline-start: 3px solid var(--color-code-text);
+	background: color-mix(in srgb, var(--color-code-text) 14%, var(--color-code-background));
+}
+
 .code-block-copy {
 	position: absolute;
 	top: 0.5rem;
@@ -443,6 +613,10 @@ ul {
 	margin-bottom: 0;
 }
 
+.section-markdown > .norna-code-example:last-child {
+	margin-bottom: 0;
+}
+
 .section-markdown blockquote > pre.astro-code:last-child {
 	margin-bottom: 0;
 }
@@ -492,3 +666,53 @@ ul {
 .section-markdown li + li {
 	margin-top: 0.35rem;
 }
+
+.section-markdown [data-footnote-ref] {
+	color: inherit;
+	font-size: 0.72em;
+	font-weight: 700;
+	text-decoration-thickness: 0.08em;
+	text-underline-offset: 0.15em;
+}
+
+.section-markdown [data-footnotes] {
+	margin-top: calc(var(--section-body-paragraph-spacing, 1em) * 1.75);
+	border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
+	padding-top: var(--section-body-paragraph-spacing, 1em);
+	font-size: 0.88em;
+	line-height: 1.5;
+}
+
+.section-markdown [data-footnotes] > .sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	overflow: hidden;
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+.section-markdown [data-footnotes] ol {
+	display: block;
+	margin: 0;
+	padding-inline-start: 1.5rem;
+}
+
+.section-markdown [data-footnotes] li {
+	padding-inline-start: 0.2rem;
+	scroll-margin-top: calc(var(--site-top-anchor-offset) + 1rem);
+}
+
+.section-markdown [data-footnotes] li:target {
+	background: color-mix(in srgb, currentColor 6%, transparent);
+}
+
+.section-markdown [data-footnote-backref] {
+	margin-inline-start: 0.15em;
+	color: inherit;
+	text-decoration: none;
+}

package/src/styles/media.css

@@ -291,10 +291,6 @@
 	outline: none;
 }
 
-:root[data-image-presentation='prose-aligned'] .image-carousel {
-	--layout-carousel-width: min(100%, var(--layout-media-width));
-}
-
 .image-carousel:focus-visible {
 	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
 	outline-offset: 0.5rem;
@@ -317,7 +313,6 @@
 }
 
 :root[data-image-presentation='prose-aligned'] .image-carousel-stage {
-	max-height: none;
 	margin-inline: 0 auto;
 }