@janga/norna 0.7.26 → 0.7.28

package/src/lib/sitePages.ts

@@ -1,12 +1,12 @@
 import type { CollectionEntry } from 'astro:content';
 import path from 'node:path';
-import { decodePageDirectoryPath, parsePageDirectoryPath } from '../../scripts/lib/page-model.mjs';
+import { decodePageEntryId, parsePageDirectoryPath } from '../../scripts/lib/page-model.mjs';
 import { parsePageMarkdown } from '../../scripts/lib/page-markdown.mjs';
 import { readSiteFile } from '../../scripts/lib/site-content.mjs';
-import { homePageDirectory } from '../../scripts/lib/site-conventions.mjs';
+import { homePageDirectory, getPageSourceDirectory } from '../../scripts/lib/site-conventions.mjs';
 import { assertCategoryDestinationModel, createCategoryDestinationModel } from '../../scripts/lib/category-destinations.mjs';
 import { getSiteStructure } from '../../scripts/lib/site-structure.mjs';
-import { sitePagesDir, sitePagesLabel } from '../../scripts/lib/site-paths.mjs';
+import { siteDir, siteDirLabel } from '../../scripts/lib/site-paths.mjs';
 
 type SiteEntry = CollectionEntry<'site'>;
 
@@ -44,28 +44,15 @@ export type SitePage = SiteNodeBase & {
 export type SiteCategory = SiteNodeBase & {
 	kind: 'category';
 	categorySourceLabel: string;
+	description?: string;
 };
 
 export type SiteNode = SitePage | SiteCategory;
 
-const pageIdMarker = '-page-';
-
-const stripPageIdPrefix = (id: string) => {
-	const markerIndex = id.lastIndexOf(pageIdMarker);
-	if (markerIndex === -1) return null;
-
-	const candidate = id.slice(markerIndex + pageIdMarker.length);
-	try {
-		return parsePageDirectoryPath(decodePageDirectoryPath(candidate)).pageDirectory;
-	} catch {
-		return null;
-	}
-};
-
-export const isHomePageEntry = (entry: SiteEntry) => stripPageIdPrefix(entry.id) === homePageDirectory;
+export const isHomePageEntry = (entry: SiteEntry) => decodePageEntryId(siteDirLabel, entry.id) === homePageDirectory;
 
 export const getPageDirectory = (entry: SiteEntry) => {
-	const pageDirectory = stripPageIdPrefix(entry.id);
+	const pageDirectory = decodePageEntryId(siteDirLabel, entry.id);
 	if (!pageDirectory) throw new Error(`Page entry "${entry.id}" has no valid page directory.`);
 	return pageDirectory;
 };
@@ -89,8 +76,9 @@ const compareNumberPaths = (left: number[], right: number[]) => {
 
 const readPageMarkdownDocument = async (entry: SiteEntry) => {
 	const pageDirectory = getPageDirectory(entry);
-	const contentLabel = `${sitePagesLabel}/${pageDirectory}/content.md`;
-	const contentPath = path.join(sitePagesDir, pageDirectory, 'content.md');
+	const contentRelativePath = [getPageSourceDirectory(pageDirectory), 'content.md'].filter(Boolean).join('/');
+	const contentLabel = `${siteDirLabel}/${contentRelativePath}`;
+	const contentPath = path.join(siteDir, contentRelativePath);
 	const { body, frontmatter } = await readSiteFile(contentPath, contentLabel);
 	const markdownDocument = await parsePageMarkdown(body, {
 		label: contentLabel,
@@ -155,6 +143,7 @@ const createSiteCategory = (category: Awaited<ReturnType<typeof getSiteStructure
 	pathSegment: category.pagePath,
 	pathname: getPagePathname(category.pagePath),
 	categorySourceLabel: category.categorySourceLabel,
+	description: category.description,
 	pageDirectory: category.pageDirectory,
 	pageDirectories: category.pageDirectories,
 	pageId: category.pageId,
@@ -175,7 +164,7 @@ const createSitePages = async (entries: SiteEntry[]) => {
 
 	for (const page of pages) {
 		if (page.isHome && page.navigation.listed === false) {
-			throw new Error(`${homePageDirectory} is the required homepage and cannot set navigation.listed to false.`);
+			throw new Error(`The homepage at ${siteDirLabel}/root/content.md cannot set navigation.listed to false.`);
 		}
 		const existing = pathnames.get(page.pathname);
 		if (existing) {
@@ -204,7 +193,7 @@ const createSitePages = async (entries: SiteEntry[]) => {
 		siblingPageOrders.set(pageOrderKey, page);
 	}
 	if (!pages.some(({ isHome }) => isHome)) {
-		throw new Error(`Homepage page entry ${homePageDirectory} is missing.`);
+		throw new Error(`Homepage content ${siteDirLabel}/root/content.md is missing.`);
 	}
 
 	return pages.sort((left, right) => (

package/src/pages/404.astro

@@ -20,7 +20,7 @@ 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.');
+if (!siteTheme) throw new Error('site/root/tree-theme.yaml is required. Add the shared site theme before building the site.');
 const [sitewide] = await getCollection('sitewide');
 const sitewideData = sitewide?.data ?? {};
 const siteThemeData = siteTheme.data;

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

@@ -45,28 +45,18 @@ export async function getStaticPaths() {
 		? [{ params: { slug: 'search' }, props: { searchPage: true } }]
 		: [];
 
-	const categoryPaths = siteModel.categoryDestinations.destinations.map((destination) => ({
-		params: { slug: destination.category.pathSegment },
-		props: destination.kind === 'redirect' ? {
-			alias: {
-				targetPathname: destination.target.pathname,
-				targetTitle: destination.target.title,
-				categoryTitle: destination.category.title,
-			},
-		} : { categoryPath: destination.pathname },
-	}));
-	return [...pagePaths, ...aliasPaths, ...searchPath, ...categoryPaths];
+	return [...pagePaths, ...aliasPaths, ...searchPath];
 }
 
-const { alias, entry, searchPage, categoryPath } = Astro.props;
+const { alias, entry, searchPage } = Astro.props;
 
-if (!searchPage && !alias && !categoryPath && (!entry || isHomePageEntry(entry))) {
+if (!searchPage && !alias && (!entry || isHomePageEntry(entry))) {
 	throw new Error('Page entry is missing.');
 }
 
 const currentPage = entry ? await getSitePage(entry) : null;
 
-if (!searchPage && !alias && !categoryPath && !currentPage?.pathSegment) {
+if (!searchPage && !alias && !currentPage?.pathSegment) {
 	throw new Error(`Page "${entry.id}" needs a page id.`);
 }
 ---
@@ -75,4 +65,4 @@ if (!searchPage && !alias && !categoryPath && !currentPage?.pathSegment) {
 	? <SearchPage />
 	: alias
 	? <PageAliasRedirect targetPathname={alias.targetPathname} targetTitle={alias.targetTitle} categoryTitle={alias.categoryTitle} />
-	: <SitePage entry={entry} categoryPath={categoryPath} />}
+	: <SitePage entry={entry} />}

package/src/pages/index.astro

@@ -2,10 +2,8 @@
 import { getCollection } from 'astro:content';
 import SitePage from '../components/SitePage.astro';
 import { isHomePageEntry } from '../lib/sitePages';
-import { homePageDirectory } from '../../scripts/lib/site-conventions.mjs';
+import { siteContentLabel } from '../../scripts/lib/site-paths.mjs';
 
-const siteDirectory = (process.env.NORNA_SITE_DIR ?? 'site').trim();
-const siteContentLabel = `${siteDirectory || 'site'}/pages/${homePageDirectory}/content.md`;
 const entries = await getCollection('site');
 const site = entries.find(isHomePageEntry);
 

package/src/styles/area-navigation.css

@@ -0,0 +1,399 @@
+/* Area menus, integrated H2 navigation and the tree-mode reading frame. */
+.site-reading-location,
+.area-navigation-switcher {
+	display: none;
+}
+
+/* An elevated dark panel needs a distinct surface and edge: a black shadow
+   cannot separate it from the page. Keep its link feedback distinct as well. */
+:root[data-area-navigation][data-appearance='dark'] {
+	--area-menu-background: var(--color-surface-soft-background);
+	--area-menu-border: color-mix(in srgb, var(--color-primary-text) 40%, var(--color-surface-soft-background));
+	--area-menu-hover-background: var(--color-surface-emphasis-background);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root[data-area-navigation][data-appearance='system'] {
+		--area-menu-background: var(--color-surface-soft-background);
+		--area-menu-border: color-mix(in srgb, var(--color-primary-text) 40%, var(--color-surface-soft-background));
+		--area-menu-hover-background: var(--color-surface-emphasis-background);
+	}
+}
+
+:root[data-area-navigation] .site-nav-row {
+	position: relative;
+}
+
+:root[data-area-navigation] .site-nav-item:has(.area-navigation-menu) {
+	position: static;
+}
+
+:root[data-area-navigation] .site-nav > ul > .site-nav-item > a,
+:root[data-area-navigation] .area-navigation-menu > summary {
+	display: flex;
+	align-items: center;
+	min-height: var(--target-size-minimum);
+	padding-block: 0;
+	width: auto;
+	color: var(--color-secondary-text);
+	font-size: 0.78rem;
+	font-weight: 500;
+	letter-spacing: 0.08em;
+	line-height: 1.2;
+	text-transform: uppercase;
+}
+
+:root[data-area-navigation] .area-navigation-menu > summary {
+	position: relative;
+	isolation: isolate;
+	text-decoration: none;
+}
+
+/* Paint around the trigger without moving its label or neighboring links. */
+:root[data-area-navigation] .area-navigation-menu > summary::before {
+	position: absolute;
+	inset: -0.25rem -0.6rem;
+	z-index: -1;
+	border: 1px solid transparent;
+	border-radius: var(--corner-radius-small);
+	content: '';
+	pointer-events: none;
+}
+
+:root[data-area-navigation] .area-navigation-menu > summary:is(:hover, :focus-visible),
+:root[data-area-navigation] .area-navigation-menu[open] > summary,
+:root[data-area-navigation] .site-nav-item-current-branch .area-navigation-menu > summary {
+	color: var(--site-top-text-color, var(--color-primary-text));
+}
+
+:root[data-area-navigation] .area-navigation-menu > summary:is(:hover, :focus-visible)::before,
+:root[data-area-navigation] .area-navigation-menu[open] > summary::before {
+	border-color: color-mix(in srgb, currentColor 22%, transparent);
+	background: color-mix(in srgb, currentColor 8%, transparent);
+}
+
+:root[data-area-navigation] .area-navigation-panel {
+	--area-menu-width: min(calc(var(--area-menu-columns) * 16rem), calc(100vw - 2rem));
+	/* Anchor to the entire sticky row, including wrapped global links. This
+	   also fits without the optional JavaScript panel-position adjustment. */
+	inset-inline-end: 0;
+	width: var(--area-menu-width);
+	max-width: calc(100vw - 2rem);
+	border-radius: var(--corner-radius-medium);
+	border-color: var(--area-menu-border, var(--color-border));
+	background: var(--area-menu-background, var(--site-top-background-color, var(--color-page)));
+	padding: 1rem;
+	display: grid;
+	grid-template-columns: repeat(var(--area-menu-columns), minmax(0, 1fr));
+	gap: 1rem;
+}
+
+:root[data-area-navigation] .area-navigation-choices {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	display: grid;
+	grid-column: span var(--area-group-columns);
+	grid-template-rows: repeat(var(--area-group-rows), auto);
+	grid-template-columns: repeat(var(--area-group-columns), minmax(0, 1fr));
+	grid-auto-flow: column;
+	grid-auto-columns: minmax(0, 1fr);
+	gap: 0.75rem 1rem;
+	align-content: start;
+}
+
+:root[data-area-navigation] [data-area-choice-group='branches'] + [data-area-choice-group='pages'] {
+	border-inline-start: 1px solid var(--color-border);
+	padding-inline-start: 1rem;
+}
+
+:root[data-area-navigation] [data-area-choice-group='pages'] {
+	row-gap: 0.15rem;
+}
+
+:root[data-area-navigation] [data-area-choice-group='pages'] .area-navigation-title {
+	font-weight: 400;
+}
+
+:root[data-area-navigation] .area-navigation-choices a {
+	display: flex;
+	flex-direction: column;
+	gap: 0.45rem;
+	height: 100%;
+	padding: 0.65rem 0.75rem;
+	border-radius: var(--corner-radius-small);
+	color: var(--color-primary-text);
+	font-size: 0.875rem;
+	font-weight: 400;
+	letter-spacing: 0;
+	line-height: 1.4;
+	text-decoration: none;
+	text-transform: none;
+	overflow-wrap: break-word;
+}
+
+:root[data-area-navigation] .area-navigation-choices a:is(:hover, :focus-visible) {
+	background: var(--area-menu-hover-background, var(--color-surface-soft-background));
+}
+
+:root[data-area-navigation] .area-navigation-title {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+	gap: 0.4rem;
+	font-weight: 500;
+}
+
+:root[data-area-navigation] .area-navigation-title svg {
+	flex: 0 0 auto;
+	width: 0.85rem;
+	height: 0.85rem;
+}
+
+:root[data-area-navigation] .area-navigation-description {
+	color: var(--color-secondary-text);
+	font-size: 0.8rem;
+	line-height: 1.55;
+}
+
+:root[data-area-navigation] .area-navigation-other-roots {
+	grid-column: 1 / -1;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.25rem 0.75rem;
+	margin: 0;
+	border-block-start: 1px solid var(--color-border);
+	padding: 0.75rem 0 0;
+	list-style: none;
+}
+
+:root[data-area-navigation] .area-navigation-other-roots a {
+	display: block;
+	padding: 0.45rem 0.75rem;
+	border-radius: var(--corner-radius-small);
+	color: var(--color-secondary-text);
+	font-size: 0.8rem;
+	font-weight: 400;
+	line-height: 1.4;
+	text-decoration: none;
+}
+
+:root[data-area-navigation] .area-navigation-other-roots a:is(:hover, :focus-visible) {
+	background: var(--area-menu-hover-background, var(--color-surface-soft-background));
+	color: var(--color-primary-text);
+}
+
+:root[data-area-navigation] .navigation-area-title {
+	display: block;
+	margin: 0 0 1rem;
+	color: var(--color-primary-text);
+	font-size: 0.95rem;
+	font-weight: 600;
+	text-decoration: none;
+}
+
+:root[data-area-navigation] a.navigation-area-title:is(:hover, :focus-visible) {
+	text-decoration: underline;
+	text-underline-offset: 0.25em;
+}
+
+/* The sticky controls mask 1.25rem above their box. Keep that background
+   below the area's linked title, including its underline. */
+:root[data-area-navigation] .navigation-area-title:has(+ .navigation-tree-controls) {
+	margin-block-end: 1.5rem;
+}
+
+/* Scoped pages are now at the tree's first level. Override the ordinary
+   first-level emphasis as well as current-page emphasis at every depth. */
+:root[data-navigation-continuity][data-area-navigation]
+	.tree-local-navigation .navigation-page-tree
+	:is(.navigation-page-link, .navigation-page-open-link, .navigation-page-summary) {
+	font-size: 0.84rem;
+	font-weight: 400;
+}
+
+@media (min-width: 961px) {
+	:root[data-area-reading-frame] {
+		--area-reading-rail-width: 16rem;
+		--area-reading-header-height: 4rem;
+		--site-top-anchor-offset: calc(var(--area-reading-header-height) + 1px + var(--nav-top-safety-inset));
+		--area-reading-outer-margin: max(var(--content-gutter), calc((100vw - max(var(--page-width), 86rem)) / 2));
+		--area-reading-content-start: calc(var(--area-reading-outer-margin) + var(--area-reading-rail-width) + var(--local-navigation-gap, clamp(1.5rem, 3vw, 3rem)));
+	}
+
+	:root[data-area-reading-frame] .site-page-layout-tree > .site-content {
+		grid-column: 2;
+	}
+
+	/* One sticky row shares the article/tree columns. The ordinary header
+	   measurement supplies anchor offsets and the fixed tree's upper edge. */
+	:root[data-area-reading-frame]:not([data-focus-reading='on']) .site-top {
+		background: var(--color-page);
+		color: var(--color-primary-text);
+	}
+
+	/* Keep header geometry stable when Focus reading switches to compact controls. */
+	:root[data-area-reading-frame] .site-nav-row {
+		min-height: var(--area-reading-header-height);
+		padding: 0.625rem 0;
+	}
+
+	:root[data-area-reading-frame]:not([data-focus-reading='on']) .site-nav-row {
+		display: grid;
+		grid-template-columns: var(--area-reading-rail-width) minmax(0, 1fr);
+		column-gap: var(--local-navigation-gap, clamp(1.5rem, 3vw, 3rem));
+		width: min(calc(100% - (var(--content-gutter) * 2)), max(var(--page-width), 86rem));
+	}
+
+	:root[data-area-reading-frame]:not([data-focus-reading='on']) .site-nav-leading {
+		grid-column: 1;
+		grid-row: 1;
+		max-width: calc(100% - 6rem);
+		padding-inline-start: 0.35rem;
+	}
+
+	:root[data-area-reading-frame]:not([data-focus-reading='on']) .site-brand {
+		min-width: 0;
+		max-width: 100%;
+		min-height: 2.25rem;
+		overflow: hidden;
+		color: inherit;
+		text-decoration: none;
+	}
+
+	:root[data-area-reading-frame] .site-brand-logo {
+		max-width: 100%;
+		max-height: 2.25rem;
+		object-fit: contain;
+	}
+
+	:root[data-area-reading-frame]:not([data-focus-reading='on']) .site-nav-actions {
+		grid-column: 1;
+		grid-row: 1;
+		justify-self: end;
+		gap: 0.35rem;
+		padding-inline-end: 0.75rem;
+	}
+
+	:root[data-area-reading-frame]:not([data-focus-reading='on']) .site-reading-location {
+		display: flex;
+		grid-column: 2;
+		grid-row: 1;
+		align-items: center;
+		gap: 0.65rem;
+		min-width: 0;
+	}
+
+	:root[data-area-reading-frame] .site-reading-location .site-breadcrumbs {
+		flex: 1 1 auto;
+		min-width: 0;
+		min-height: 0;
+		width: auto;
+		margin: 0;
+		padding: 0;
+	}
+
+	:root[data-area-reading-frame] .site-reading-location .site-breadcrumbs ol {
+		flex-wrap: nowrap;
+	}
+
+	:root[data-area-reading-frame] .site-reading-location .site-breadcrumbs li > :is(a, span) {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	:root[data-area-reading-frame] .site-reading-location-label {
+		font-size: 0.78rem;
+		font-weight: 650;
+	}
+
+	/* The in-article breadcrumb remains available in the compact layout. */
+	:root[data-area-reading-frame] .site-content > .site-breadcrumbs {
+		display: none;
+	}
+
+	:root[data-area-reading-frame] .site-content-has-breadcrumbs > .site-section:first-of-type {
+		padding-top: var(--space-nav-to-first-section);
+	}
+
+	:root[data-area-reading-frame]:not([data-focus-reading='on']) .display-settings-panel {
+		left: 0;
+		right: auto;
+		max-height: calc(100svh - 4.5rem);
+	}
+
+	:root[data-area-reading-frame]:not([data-focus-reading='on']) .tree-local-navigation {
+		position: fixed;
+		top: var(--site-top-anchor-offset);
+		left: var(--area-reading-outer-margin);
+		bottom: 0;
+		width: var(--area-reading-rail-width);
+		max-height: calc(100svh - var(--site-top-anchor-offset));
+	}
+
+	:root[data-area-reading-frame] .site-banners {
+		width: calc(100% - var(--area-reading-content-start) - var(--area-reading-outer-margin));
+		margin-inline: var(--area-reading-content-start) var(--area-reading-outer-margin);
+	}
+
+	:root[data-area-reading-frame]:not([data-focus-reading='on']) .area-navigation-switcher {
+		position: static;
+		display: block;
+		flex: 0 0 auto;
+		min-width: 0;
+	}
+
+	:root[data-area-reading-frame] .area-navigation-switcher > summary {
+		width: 2.25rem;
+		height: 2.25rem;
+		border-radius: var(--corner-radius-small);
+	}
+
+	:root[data-area-reading-frame] .area-navigation-switcher > summary:is(:hover, :focus-visible),
+	:root[data-area-reading-frame] .area-navigation-switcher[open] > summary {
+		background: var(--color-surface-soft-background);
+	}
+
+	:root[data-area-reading-frame] .area-navigation-switcher > summary svg {
+		flex: 0 0 auto;
+		transform: none;
+	}
+
+	:root[data-area-reading-frame] .area-navigation-switcher .area-navigation-panel {
+		/* Fit beneath the shared row before the disclosure's toggle event.
+		   This also keeps the panel visible without JavaScript. */
+		inset-inline-start: min(
+			calc(var(--area-reading-rail-width) + var(--local-navigation-gap, clamp(1.5rem, 3vw, 3rem))),
+			calc(100% - var(--area-menu-width))
+		);
+		inset-inline-end: auto;
+		inset-block-start: 100%;
+		max-height: calc(100svh - var(--site-top-anchor-offset) - 1rem);
+		background: var(--area-menu-background, var(--color-page));
+		color: var(--color-primary-text);
+		overscroll-behavior: contain;
+	}
+
+	:root[data-area-navigation] .site-page-layout-tree {
+		--tree-navigation-width: 16rem;
+		grid-template-columns: var(--tree-navigation-width) minmax(0, 1fr);
+	}
+
+	/* The recovered right column belongs to the content canvas. Do not count
+	   the old outline allowance a second time for notes or wide blocks. */
+	:root[data-area-navigation] .site-page-layout-tree .section-markdown > :is(.norna-table-frame, .code-block) {
+		--wide-block-end-width: 100cqi;
+		--wide-block-canvas-width: var(--wide-block-end-width);
+	}
+
+	:root[data-area-navigation][data-reader-preferences-ready='true'][data-focus-reading='on'] .site-page-layout-tree {
+		grid-template-columns: var(--tree-navigation-width) minmax(0, 1fr);
+	}
+
+	:root[data-area-navigation][data-reader-preferences-ready='true'][data-focus-reading='on']
+		.site-page-layout-tree .section-markdown > :is(.norna-table-frame, .code-block) {
+		--wide-block-end-width: 100cqi;
+		--wide-block-canvas-width: calc(100cqi + var(--tree-navigation-width) + var(--tree-layout-gap));
+	}
+}

package/src/styles/content.css

@@ -466,7 +466,8 @@ ul {
 }
 
 .section-markdown > .norna-table-frame {
-	width: var(--wide-block-end-width);
+	/* Start in the same lane that the layout enhancement tries first. */
+	width: var(--wide-block-prose-width);
 }
 
 .section-markdown > :is([data-table-layout='prose'], [data-code-layout='prose']) {
@@ -784,32 +785,10 @@ ul {
 	}
 }
 
-@media (min-width: 1101px) {
-	:root[data-reader-preferences-ready='true'][data-focus-reading='on']
-		.site-page-layout-tree .section-markdown > :is(.norna-table-frame, .code-block) {
-		--wide-block-end-width: calc(100cqi + var(--contents-navigation-width) + var(--tree-layout-gap));
-		--wide-block-canvas-width: calc(
-			100cqi
-			+ var(--tree-navigation-width)
-			+ var(--contents-navigation-width)
-			+ (var(--tree-layout-gap) * 2)
-		);
-		--wide-block-canvas-inline-offset: calc(0px - var(--tree-navigation-width) - var(--tree-layout-gap));
-	}
-}
-
-@media (min-width: 1281px) {
-	.site-page-layout-tree:not(.site-page-layout-contents) .section-markdown > :is(.norna-table-frame, .code-block) {
-		--wide-block-end-width: calc(100cqi + var(--contents-navigation-width) + var(--tree-layout-gap));
-		--wide-block-canvas-width: var(--wide-block-end-width);
-	}
-}
-
 :root[data-reader-preferences-ready='true'][data-focus-reading='on'] :is(
 	.site-nav,
 	.page-nav,
 	.tree-local-navigation,
-	.page-contents-navigation,
 	.site-breadcrumbs,
 	.site-footer
 ) {
@@ -835,12 +814,6 @@ ul {
 	}
 }
 
-@media (min-width: 1101px) {
-	:root[data-reader-preferences-ready='true'][data-focus-reading='on'] .site-page-layout-tree {
-		grid-template-columns: var(--tree-navigation-width) minmax(0, 1fr) var(--contents-navigation-width);
-	}
-}
-
 :root[data-reader-preferences-ready='true'][data-focus-reading='on']
 	.site-content-has-breadcrumbs > .site-section:first-of-type {
 	padding-top: var(--space-nav-to-first-section);
@@ -983,8 +956,9 @@ ul {
 	padding: 0.78rem 0.9rem;
 	background: var(--color-code-background) !important;
 	color: var(--color-code-text);
-	font-size: 0.92em;
-	line-height: 1.45;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+	font-size: 0.875rem;
+	line-height: 1.43;
 	text-align: left;
 }