@janga/norna 0.7.17 → 0.7.18

package/src/styles/global.css

@@ -99,6 +99,19 @@ a {
 	color: var(--color-page);
 }
 
+.visually-hidden {
+	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;
+}
+
 .skip-link {
 	position: fixed;
 	top: 0.75rem;
@@ -359,6 +372,10 @@ a {
 	text-underline-offset: 0.35em;
 }
 
+.page-nav .page-nav-page-top {
+	font-weight: 700;
+}
+
 .mobile-nav-sections a[aria-current='location'] {
 	opacity: 1;
 	text-decoration: underline;
@@ -380,29 +397,288 @@ a {
 	padding: 0;
 }
 
+.site-page-layout:not(.site-page-layout-tree) {
+	display: contents;
+}
+
+.site-page-layout-tree {
+	display: grid;
+	grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
+	align-items: start;
+	gap: var(--local-navigation-gap, clamp(1.5rem, 3vw, 3rem));
+	min-height: calc(100svh - var(--site-top-anchor-offset));
+	width: min(calc(100% - (var(--content-gutter) * 2)), max(var(--page-width), 76rem));
+	margin: 0 auto;
+}
+
+.site-page-layout-tree > .site-content {
+	width: 100%;
+	min-width: 0;
+}
+
+.tree-local-navigation {
+	position: sticky;
+	top: calc(var(--site-top-anchor-offset) + 1.25rem);
+	z-index: 3;
+	max-height: calc(100svh - var(--site-top-anchor-offset) - 2.5rem);
+	padding: 1.5rem 0;
+	background: var(--color-page);
+	overflow-y: auto;
+	overscroll-behavior: contain;
+}
+
+.navigation-page-sections {
+	margin: 0.15rem 0 0.55rem 0.3rem;
+	border-left: 2px solid color-mix(in srgb, currentColor 38%, transparent);
+	padding: 0.2rem 0 0.25rem 0.85rem;
+}
+
+.navigation-page-tree,
+.page-contents-links {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.navigation-page-node {
+	position: relative;
+}
+
+.navigation-page-tree-sidebar .navigation-page-link {
+	display: block;
+	padding: 0.45rem 2rem 0.45rem 0;
+	color: inherit;
+	font-size: 0.86rem;
+	line-height: 1.35;
+	opacity: 0.72;
+	text-decoration: none;
+}
+
+.navigation-page-tree-sidebar > .navigation-page-node > .navigation-page-link {
+	font-size: 0.94rem;
+	font-weight: 700;
+	opacity: 1;
+}
+
+.navigation-page-tree-sidebar .navigation-page-link:hover,
+.navigation-page-tree-sidebar .navigation-page-link:focus-visible,
+.navigation-page-tree-sidebar .navigation-page-link[aria-current='page'] {
+	opacity: 1;
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.28em;
+}
+
+.navigation-page-tree-sidebar .navigation-page-tree-sidebar {
+	margin: 0.25rem 0 0.25rem 0.3rem;
+	border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+	padding-left: 0.85rem;
+}
+
+.navigation-page-branch:not(.navigation-page-disclosure) > summary {
+	position: absolute;
+	top: 0.25rem;
+	right: 0;
+	display: grid;
+	place-items: center;
+	width: 1.8rem;
+	height: 1.8rem;
+	border: 0;
+	border-radius: var(--shape-radius-small, 2px);
+	list-style: none;
+	cursor: pointer;
+	opacity: 0.66;
+}
+
+.navigation-page-branch:not(.navigation-page-disclosure) > summary::-webkit-details-marker {
+	display: none;
+}
+
+.navigation-page-branch:not(.navigation-page-disclosure) > summary:hover,
+.navigation-page-branch:not(.navigation-page-disclosure) > summary:focus-visible {
+	background: color-mix(in srgb, currentColor 8%, transparent);
+	opacity: 1;
+}
+
+.navigation-page-branch:not(.navigation-page-disclosure) > summary > [aria-hidden='true']::before {
+	content: "+";
+}
+
+.navigation-page-branch:not(.navigation-page-disclosure)[open] > summary > [aria-hidden='true']::before {
+	content: "−";
+}
+
+.navigation-page-disclosure > .navigation-page-summary {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	border: 0;
+	border-radius: var(--shape-radius-small, 2px);
+	padding: 0.45rem 0;
+	font-size: 0.86rem;
+	line-height: 1.35;
+	list-style: none;
+	cursor: pointer;
+	opacity: 0.72;
+}
+
+.navigation-page-disclosure {
+	position: relative;
+}
+
+.navigation-page-disclosure > .navigation-page-summary::-webkit-details-marker {
+	display: none;
+}
+
+.navigation-page-disclosure > .navigation-page-summary:hover,
+.navigation-page-disclosure > .navigation-page-summary:focus-visible,
+.navigation-page-disclosure[data-current-page='true'] > .navigation-page-summary {
+	opacity: 1;
+}
+
+.navigation-page-disclosure > .navigation-page-summary:hover > :first-child,
+.navigation-page-disclosure > .navigation-page-summary:focus-visible > :first-child,
+.navigation-page-disclosure[data-current-page='true'] > .navigation-page-summary > :first-child {
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.28em;
+}
+
+.navigation-page-disclosure[open] > .navigation-page-summary > .navigation-page-summary-title {
+	opacity: 0;
+}
+
+.navigation-page-open-link {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+	max-width: calc(100% - 2rem);
+	padding: 0.45rem 0;
+	color: inherit;
+	font-size: 0.86rem;
+	line-height: 1.35;
+	opacity: 0.72;
+	overflow: hidden;
+	text-decoration: none;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.navigation-page-disclosure[open] > .navigation-page-open-link {
+	display: block;
+}
+
+.navigation-page-open-link:hover,
+.navigation-page-open-link:focus-visible,
+.navigation-page-open-link[aria-current='page'] {
+	opacity: 1;
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.28em;
+}
+
+.navigation-page-chevron::before {
+	display: block;
+	content: "›";
+	font-size: 1.15rem;
+	line-height: 1;
+	transition: transform 140ms ease;
+}
+
+.navigation-page-disclosure[open] > .navigation-page-summary .navigation-page-chevron::before {
+	transform: rotate(90deg);
+}
+
+.navigation-page-tree-sidebar > .navigation-page-node > .navigation-page-disclosure > .navigation-page-summary {
+	font-size: 0.94rem;
+	font-weight: 700;
+	opacity: 1;
+}
+
+.navigation-page-tree-sidebar > .navigation-page-node > .navigation-page-disclosure > .navigation-page-open-link {
+	font-size: 0.94rem;
+	font-weight: 700;
+	opacity: 1;
+}
+
+.navigation-page-tree-sidebar .navigation-page-disclosure > .navigation-page-branch-content {
+	margin: 0.1rem 0 0.25rem 0.3rem;
+	border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+	padding-left: 0.85rem;
+}
+
+.navigation-page-tree-sidebar .navigation-page-disclosure .navigation-page-tree-sidebar {
+	margin: 0.25rem 0;
+	border-left: 0;
+	padding-left: 0;
+}
+
+.navigation-page-disclosure[data-current-branch='true']:not([data-current-page='true']):not([data-sections-open='true'])
+	> .navigation-page-branch-content > .navigation-page-sections {
+	display: none;
+}
+
+.page-contents-links li + li {
+	margin-top: 0.45rem;
+}
+
+.page-contents-links ol {
+	margin: 0.45rem 0 0;
+	padding-left: 0.8rem;
+	border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+	list-style: none;
+}
+
+.page-contents-links a {
+	display: block;
+	color: inherit;
+	font-size: 0.8rem;
+	line-height: 1.4;
+	opacity: 0.64;
+	text-decoration: none;
+}
+
+.page-contents-links a:hover,
+.page-contents-links a:focus-visible,
+.page-contents-links a[aria-current='location'] {
+	opacity: 1;
+	text-decoration: underline;
+	text-underline-offset: 0.25em;
+}
+
 .site-breadcrumbs {
-	width: min(100%, 60ch, var(--text-width));
+	height: calc(clamp(1rem, 2.5vw, 1.5rem) + 1.35rem);
+	width: min(100%, var(--page-text-width, var(--text-width)));
 	margin: 0 auto;
 	padding-top: clamp(1rem, 2.5vw, 1.5rem);
 	font-size: 1rem;
 	line-height: 1.4;
+	overflow: hidden;
 }
 
 .site-breadcrumbs ol {
 	display: flex;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
 	gap: 0;
 	margin: 0;
 	padding: 0;
 	font-size: 0.78rem;
 	list-style: none;
+	white-space: nowrap;
 }
 
 .site-breadcrumbs li {
 	display: flex;
+	min-width: 0;
 	align-items: center;
 }
 
+.site-breadcrumbs li:last-child {
+	flex: 0 1 auto;
+}
+
 .site-breadcrumbs li + li::before {
 	margin: 0 0.55rem;
 	content: "/";
@@ -410,9 +686,13 @@ a {
 }
 
 .site-breadcrumbs a {
+	display: block;
+	min-width: 0;
 	color: inherit;
 	opacity: 0.72;
+	overflow: hidden;
 	text-decoration: none;
+	text-overflow: ellipsis;
 }
 
 .site-breadcrumbs a:hover,
@@ -423,7 +703,11 @@ a {
 }
 
 .site-breadcrumbs [aria-current='page'] {
+	display: block;
+	min-width: 0;
+	overflow: hidden;
 	font-weight: 650;
+	text-overflow: ellipsis;
 }
 
 .site-content-has-breadcrumbs > .site-section:first-of-type {
@@ -550,6 +834,10 @@ a {
 	pointer-events: none;
 }
 
+.site-page-layout-tree .site-section::before {
+	left: 0;
+}
+
 .site-section + .site-section {
 	margin-top: 0;
 	padding-top: var(--space-section-to-section);
@@ -726,7 +1014,7 @@ ul {
 .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;
+	border-radius: var(--shape-radius-medium, 6px);
 	padding: 0.78rem 0.9rem;
 	background: #0d1117 !important;
 	font-size: 0.92em;
@@ -903,7 +1191,7 @@ ul {
 	align-content: start;
 	margin: 0;
 	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
-	border-radius: 8px;
+	border-radius: var(--shape-radius-large, 8px);
 	padding: var(--card-list-padding);
 	background: color-mix(in srgb, var(--section-background-color, var(--color-page)) 92%, currentColor 8%);
 	color: inherit;
@@ -1335,9 +1623,12 @@ ul {
 		text-transform: none;
 	}
 
-	.mobile-nav-panel ul {
+	.mobile-nav-panel :is(ul, ol) {
 		display: grid;
 		gap: 0;
+		margin: 0;
+		padding: 0;
+		list-style: none;
 	}
 
 	.navigation-page-tree-mobile > .navigation-page-node {
@@ -1348,74 +1639,129 @@ ul {
 		border-top: 0;
 	}
 
-	.navigation-page-tree-mobile .navigation-page-link,
-	.mobile-navigation-branch > summary,
-	.mobile-navigation-page-links a {
+	.navigation-page-tree-mobile .navigation-page-link {
 		display: flex;
 		align-items: center;
 		width: 100%;
 		min-height: 3.25rem;
-		padding: 0.75rem 0;
+		padding: 0.75rem 2.5rem 0.75rem 0;
+		color: inherit;
+		font-size: 0.94rem;
+		letter-spacing: 0;
+		line-height: 1.35;
+		opacity: 0.78;
+		text-decoration: none;
+		text-transform: none;
 	}
 
-	.mobile-navigation-branch > summary {
+	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary {
+		position: static;
+		display: flex;
+		align-items: center;
 		justify-content: space-between;
-		border: 0;
+		width: 100%;
+		height: auto;
+		min-height: 3.25rem;
+		padding: 0.75rem 0;
 		font-size: 0.94rem;
-		font-weight: 650;
-		letter-spacing: 0;
 		line-height: 1.35;
-		list-style: none;
-		text-transform: none;
-		cursor: pointer;
+		opacity: 0.78;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-open-link {
+		display: none;
+		align-items: center;
+		min-height: 3.25rem;
+		max-width: calc(100% - 2.5rem);
+		padding: 0.75rem 0;
+		font-size: 0.94rem;
+		line-height: 1.35;
+		opacity: 0.78;
 	}
 
-	.mobile-nav-menu .mobile-navigation-branch > summary::after {
-		content: "+";
-		font-size: 1.1rem;
-		font-weight: 400;
-		opacity: 0.7;
+	.navigation-page-tree-mobile .navigation-page-disclosure[open] > .navigation-page-open-link {
+		display: flex;
 	}
 
-	.mobile-nav-menu .mobile-navigation-branch[open] > summary::after {
-		content: "−";
+	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary:hover,
+	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary:focus-visible,
+	.navigation-page-node-current > .navigation-page-disclosure > .navigation-page-summary {
+		background: transparent;
+		opacity: 1;
 	}
 
-	.mobile-navigation-branch > summary::-webkit-details-marker {
-		display: none;
+	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary:hover > :first-child,
+	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary:focus-visible > :first-child,
+	.navigation-page-node-current > .navigation-page-disclosure > .navigation-page-summary > :first-child {
+		text-decoration: underline;
+		text-decoration-thickness: 1px;
+		text-underline-offset: 0.3em;
+	}
+
+	.navigation-page-chevron::before {
+		display: block;
+		content: "›";
+		font-size: 1.25rem;
+		line-height: 1;
+		transition: transform 140ms ease;
+	}
+
+	.navigation-page-disclosure[open] > .navigation-page-summary .navigation-page-chevron::before {
+		transform: rotate(90deg);
+	}
+
+	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary > [aria-hidden='true']::before,
+	.navigation-page-tree-mobile .navigation-page-disclosure[open] > .navigation-page-summary > [aria-hidden='true']::before {
+		content: "›";
 	}
 
-	.mobile-navigation-branch-content {
+	.navigation-page-tree-mobile .navigation-page-branch-content {
 		margin-left: 0.35rem;
 		border-left: 1px solid color-mix(in srgb, currentColor 20%, transparent);
 		padding-left: 1rem;
 	}
 
-	.mobile-navigation-page-links li,
-	.mobile-navigation-branch-content > .navigation-page-tree-mobile > .navigation-page-node {
-		border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
-	}
-
-	.mobile-navigation-page-links li:first-child {
-		border-top: 0;
+	.navigation-page-tree-mobile .navigation-page-sections {
+		margin: 0 0 0.45rem;
 	}
 
-	.mobile-navigation-page-links a,
-	.navigation-page-tree-mobile .navigation-page-link {
-		font-size: 0.9rem;
-		letter-spacing: 0;
-		line-height: 1.35;
-		text-transform: none;
+	.navigation-page-branch-content > .navigation-page-tree-mobile > .navigation-page-node {
+		border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
 	}
 
-	.navigation-page-node-current > .navigation-page-link,
-	.navigation-page-node-current > .mobile-navigation-branch > summary > span,
-	.navigation-page-node-current-branch > .mobile-navigation-branch > summary > span {
+	.navigation-page-tree-mobile .navigation-page-link:hover,
+	.navigation-page-tree-mobile .navigation-page-link:focus-visible,
+	.navigation-page-tree-mobile .navigation-page-link[aria-current='page'] {
+		opacity: 1;
 		text-decoration: underline;
 		text-decoration-thickness: 1px;
 		text-underline-offset: 0.3em;
 	}
 
+	.page-contents-links-mobile {
+		margin-top: 0.25rem;
+	}
+
+	.page-contents-links-mobile > li {
+		border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+	}
+
+	.page-contents-links-mobile li + li {
+		margin-top: 0;
+	}
+
+	.page-contents-links-mobile ol {
+		border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+		padding-left: 1rem;
+	}
+
+	.page-contents-links-mobile a {
+		min-height: 3.2rem;
+		padding: 0.85rem 0;
+		font-size: 0.92rem;
+		opacity: 0.78;
+	}
+
 	.mobile-nav-panel a,
 	.mobile-nav-page-open,
 	.mobile-nav-back {
@@ -1539,10 +1885,15 @@ ul {
 		opacity: 0.78;
 	}
 
-	.mobile-nav-sections .mobile-nav-overview {
+	.mobile-nav-sections .mobile-nav-overview,
+	.mobile-nav-sections .mobile-nav-page-top {
 		font-weight: 650;
 	}
 
+	.mobile-nav-sections li:not(.mobile-nav-page-top-item) a {
+		padding-left: 1rem;
+	}
+
 	.mobile-nav-sections a:hover,
 	.mobile-nav-sections a:focus-visible,
 	.mobile-nav-sections a[aria-current='location'] {
@@ -1560,6 +1911,23 @@ ul {
 		width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
 	}
 
+	.site-page-layout-tree {
+		display: block;
+		width: 100%;
+	}
+
+	.site-page-layout-tree > .site-content {
+		width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
+	}
+
+	.site-page-layout-tree .site-section::before {
+		left: calc(50% - 50vw);
+	}
+
+	.tree-local-navigation {
+		display: none;
+	}
+
 	.site-banners {
 		width: min(calc(100% - 2rem), var(--page-width));
 		padding-top: 0.75rem;

package/starters/basic/README.md

@@ -18,9 +18,9 @@ npm run norna:dev -- --kill
 Edit shared logo settings, banners, and footer in
 `site/sitewide-content.yaml`,
 site-wide visual defaults in `site/theme.yaml`, homepage content and section
-metadata in `site/content.md`, and technical settings such as URL and locale
-in `site/config.yaml`. Keep managed homepage source images directly under
-`site/images/` and static public files under `site/public/`.
+metadata in `site/pages/000-home/content.md`, and technical settings such as URL
+and locale in `site/config.yaml`. Keep managed homepage source images under
+`site/pages/000-home/images/` and static public files under `site/public/`.
 
 For a GitHub Pages project site without a custom domain, include the repository
 path in the public URL:
@@ -34,10 +34,10 @@ Norna derives `/repository-name/` as the base path. Use a root URL such as
 
 In GitHub repository settings, configure Pages to build from GitHub Actions.
 
-Page width, side gutters, layout density, typography rhythm, image width, image
-height limits, font, palettes, section surfaces, and site-wide typography are
-configured in `site/theme.yaml`. A page may replace that visual theme with its
-own `theme.yaml`.
+Page width, side gutters, content spacing, image sizing, palette, shape, and
+site-wide typography are configured in `site/theme.yaml`. A page may use a
+limited `theme.yaml` for local text width, content spacing, managed-image
+sizing, and section background pattern.
 
 Commit `package-lock.json` after the first install so GitHub Actions can use
 `npm ci`.