@janga/norna 0.7.16 → 0.7.17

package/src/styles/global.css

@@ -44,6 +44,9 @@
 	--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-page-title-to-first-section-desktop: clamp(0.9rem, 1.6vw, 1.4rem);
+	--space-page-title-to-first-section-mobile: 0.9rem;
+	--space-page-title-to-first-section: var(--space-page-title-to-first-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);
@@ -193,13 +196,18 @@ a {
 }
 
 .site-nav a:hover,
+.site-nav a:focus-visible,
 .site-nav a[aria-current='page'],
 .mobile-nav-panel a:hover,
+.mobile-nav-panel a:focus-visible,
 .mobile-nav-panel a[aria-current='page'] {
 	opacity: 1;
 }
 
-.site-nav a[aria-current='page'] {
+.site-nav > ul > .site-nav-item > a:hover,
+.site-nav > ul > .site-nav-item > a:focus-visible,
+.site-nav > ul > .site-nav-item > a[aria-current='page'],
+.site-nav > ul > .site-nav-item-current-branch > a {
 	text-decoration: underline;
 	text-decoration-thickness: 1px;
 	text-underline-offset: 0.35em;
@@ -232,6 +240,20 @@ a {
 	gap: 0.65rem;
 }
 
+.site-nav-submenu .navigation-page-tree-submenu {
+	gap: 0.75rem;
+}
+
+.site-nav-submenu .navigation-page-tree-submenu .navigation-page-tree-submenu {
+	margin: 0.15rem 0 0 0.35rem;
+	border-left: 1px solid color-mix(in srgb, currentColor 24%, transparent);
+	padding-left: 0.75rem;
+}
+
+.site-nav-submenu .navigation-page-link {
+	font-weight: 650;
+}
+
 .site-nav-submenu a {
 	font-size: 0.76rem;
 	letter-spacing: 0.03em;
@@ -242,7 +264,8 @@ a {
 }
 
 .site-nav-submenu a:hover,
-.site-nav-submenu a:focus-visible {
+.site-nav-submenu a:focus-visible,
+.site-nav-submenu a[aria-current='location'] {
 	opacity: 1;
 	text-decoration: underline;
 	text-underline-offset: 0.25em;
@@ -256,6 +279,13 @@ a {
 	transform: translate(-50%, 0);
 }
 
+.site-nav-item[data-submenu-dismissed='true'] .site-nav-submenu {
+	opacity: 0;
+	visibility: hidden;
+	pointer-events: none;
+	transform: translate(-50%, -0.35rem);
+}
+
 .mobile-nav-menu {
 	display: none;
 }
@@ -264,10 +294,29 @@ a {
 	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
 }
 
+.page-nav-inner {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: clamp(1.1rem, 2.5vw, 2rem);
+	width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
+	margin: 0 auto;
+}
+
+.page-nav-label {
+	flex: 0 0 auto;
+	font-size: 0.7rem;
+	font-weight: 650;
+	letter-spacing: 0.08em;
+	opacity: 0.55;
+	text-transform: uppercase;
+	white-space: nowrap;
+}
+
 .page-nav ul {
 	display: flex;
 	flex-wrap: wrap;
-	justify-content: center;
+	justify-content: flex-start;
 	gap: 0 clamp(1.4rem, 4vw, 3.25rem);
 	margin: 0;
 	padding: 0;
@@ -302,14 +351,15 @@ a {
 }
 
 .page-nav a:hover,
-.page-nav a:focus-visible {
+.page-nav a:focus-visible,
+.page-nav a[aria-current='location'] {
 	opacity: 1;
 	text-decoration: underline;
 	text-decoration-thickness: 1px;
 	text-underline-offset: 0.35em;
 }
 
-.mobile-page-nav a[aria-current='true'] {
+.mobile-nav-sections a[aria-current='location'] {
 	opacity: 1;
 	text-decoration: underline;
 	text-decoration-thickness: 1px;
@@ -330,6 +380,56 @@ a {
 	padding: 0;
 }
 
+.site-breadcrumbs {
+	width: min(100%, 60ch, var(--text-width));
+	margin: 0 auto;
+	padding-top: clamp(1rem, 2.5vw, 1.5rem);
+	font-size: 1rem;
+	line-height: 1.4;
+}
+
+.site-breadcrumbs ol {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0;
+	margin: 0;
+	padding: 0;
+	font-size: 0.78rem;
+	list-style: none;
+}
+
+.site-breadcrumbs li {
+	display: flex;
+	align-items: center;
+}
+
+.site-breadcrumbs li + li::before {
+	margin: 0 0.55rem;
+	content: "/";
+	opacity: 0.38;
+}
+
+.site-breadcrumbs a {
+	color: inherit;
+	opacity: 0.72;
+	text-decoration: none;
+}
+
+.site-breadcrumbs a:hover,
+.site-breadcrumbs a:focus-visible {
+	opacity: 1;
+	text-decoration: underline;
+	text-underline-offset: 0.25em;
+}
+
+.site-breadcrumbs [aria-current='page'] {
+	font-weight: 650;
+}
+
+.site-content-has-breadcrumbs > .site-section:first-of-type {
+	padding-top: clamp(1.15rem, 2.5vw, 1.75rem);
+}
+
 .site-banners {
 	position: relative;
 	z-index: 2;
@@ -455,6 +555,18 @@ a {
 	padding-top: var(--space-section-to-section);
 }
 
+.site-section-page-title-empty .section-header {
+	padding-bottom: 0;
+}
+
+.site-section-page-title-empty .section-header h1 {
+	padding-bottom: 0;
+}
+
+.site-section-page-title-empty + .site-section {
+	padding-top: var(--space-page-title-to-first-section);
+}
+
 .site-section:last-child {
 	padding-bottom: var(--space-final-section-bottom);
 }
@@ -467,11 +579,12 @@ a {
 .section-header {
 	width: min(100%, var(--section-heading-width-desktop, 760px));
 	margin: 0 auto;
-	padding: 0 0 var(--section-heading-spacing-after, 0.55em);
+	padding: 0;
 	text-align: var(--section-heading-align-desktop, center);
 }
 
-.site-section-first-block-is-visual .section-header {
+.site-section-first-block-is-visual .section-header h1,
+.site-section-first-block-is-visual .section-header h2 {
 	padding-bottom: var(--space-heading-to-block);
 }
 
@@ -485,6 +598,7 @@ ul {
 .section-header h1,
 .section-header h2 {
 	margin-bottom: 0;
+	padding-bottom: var(--section-heading-spacing-after, 0.55em);
 	color: inherit;
 	font-size: var(--section-heading-font-size-desktop, clamp(1.35rem, 1.1rem + 0.9vw, 2rem));
 	font-weight: var(--section-heading-font-weight, 400);
@@ -1115,6 +1229,7 @@ ul {
 		--space-heading-to-block: var(--space-heading-to-block-mobile);
 		--space-image-item: var(--space-image-item-mobile);
 		--space-section-to-section: var(--space-section-to-section-mobile);
+		--space-page-title-to-first-section: var(--space-page-title-to-first-section-mobile);
 		--space-final-section-bottom: var(--space-final-section-bottom-mobile);
 		--content-gutter: var(--content-gutter-mobile);
 		--image-max-available-width: var(--image-max-available-width-mobile);
@@ -1122,6 +1237,10 @@ ul {
 		--site-top-anchor-offset: 6.25rem;
 	}
 
+	.site-top {
+		backdrop-filter: none;
+	}
+
 	.site-nav-row {
 		width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
 		padding: 0.75rem 0;
@@ -1146,30 +1265,20 @@ ul {
 		display: block;
 		position: relative;
 		flex: 0 0 auto;
+		margin-left: auto;
 	}
 
-	.page-nav ul {
-		gap: 0 1.55rem;
-		padding: 0 1rem;
-		text-align: center;
-	}
-
-	.page-nav li + li::before {
-		left: -0.95rem;
-	}
-
-	.page-nav a {
-		padding: 0.95rem 0 0.85rem;
-		font-size: 0.72rem;
-		white-space: nowrap;
+	.page-nav {
+		display: none;
 	}
 
-	.mobile-nav-menu summary {
+	.mobile-nav-menu > summary {
 		display: flex;
 		align-items: center;
-		gap: 0.42rem;
+		gap: 0.5rem;
+		min-height: 2.75rem;
 		border: 1px solid currentColor;
-		padding: 0.5rem 0.7rem 0.44rem;
+		padding: 0.55rem 0.75rem;
 		font-size: 0.72rem;
 		font-weight: 700;
 		letter-spacing: 0.1em;
@@ -1179,63 +1288,272 @@ ul {
 		text-transform: uppercase;
 	}
 
-	.mobile-nav-menu summary::after {
-		content: "▾";
-		font-size: 0.82em;
+	.mobile-nav-menu > summary::after {
+		content: "☰";
+		font-size: 1rem;
 		line-height: 1;
-		opacity: 0.78;
+		opacity: 0.86;
 	}
 
-	.mobile-nav-menu[open] summary::after {
-		transform: rotate(180deg);
+	.mobile-nav-menu[open] > summary::after {
+		content: "×";
+		font-size: 1.25rem;
 	}
 
-	.mobile-nav-menu summary::-webkit-details-marker {
+	.mobile-nav-menu > summary::-webkit-details-marker {
 		display: none;
 	}
 
 	.mobile-nav-panel {
-		position: absolute;
-		top: calc(100% + 0.75rem);
+		position: fixed;
+		top: var(--site-top-anchor-offset);
 		right: 0;
-		display: grid;
-		gap: 1.75rem;
-		width: min(82vw, 22rem);
-		border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
-		padding: 1rem;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		max-height: none;
+		border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
+		padding: clamp(1.25rem, 5vw, 2rem) var(--content-gutter) max(1.5rem, env(safe-area-inset-bottom));
 		background: var(--site-top-background-color, var(--color-nav-background));
-		box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.28);
+		box-shadow: 0 1.5rem 3.5rem rgb(0 0 0 / 0.32);
 		color: var(--site-top-text-color, var(--color-text));
+		overflow-y: auto;
+		overscroll-behavior: contain;
 	}
 
-	.mobile-nav-panel h2 {
-		margin: 0 0 0.75rem;
-		font-size: 0.68rem;
-		font-weight: 700;
-		letter-spacing: 0.14em;
-		line-height: 1;
-		text-transform: uppercase;
+	.mobile-site-nav {
+		width: min(100%, 32rem);
+		margin: 0 auto;
 	}
 
-	.mobile-page-nav {
-		border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
-		padding-top: 1.05rem;
+	.mobile-nav-panel h2 {
+		margin: 0 0 1.25rem;
+		font-size: clamp(1.25rem, 5vw, 1.55rem);
+		font-weight: 650;
+		letter-spacing: 0;
+		line-height: 1.2;
+		text-transform: none;
 	}
 
 	.mobile-nav-panel ul {
 		display: grid;
-		gap: 0.65rem;
+		gap: 0;
+	}
+
+	.navigation-page-tree-mobile > .navigation-page-node {
+		border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
+	}
+
+	.navigation-page-tree-mobile > .navigation-page-node:first-child {
+		border-top: 0;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-link,
+	.mobile-navigation-branch > summary,
+	.mobile-navigation-page-links a {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		min-height: 3.25rem;
+		padding: 0.75rem 0;
+	}
+
+	.mobile-navigation-branch > summary {
+		justify-content: space-between;
+		border: 0;
+		font-size: 0.94rem;
+		font-weight: 650;
+		letter-spacing: 0;
+		line-height: 1.35;
+		list-style: none;
+		text-transform: none;
+		cursor: pointer;
+	}
+
+	.mobile-nav-menu .mobile-navigation-branch > summary::after {
+		content: "+";
+		font-size: 1.1rem;
+		font-weight: 400;
+		opacity: 0.7;
+	}
+
+	.mobile-nav-menu .mobile-navigation-branch[open] > summary::after {
+		content: "−";
+	}
+
+	.mobile-navigation-branch > summary::-webkit-details-marker {
+		display: none;
+	}
+
+	.mobile-navigation-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;
+	}
+
+	.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-node-current > .navigation-page-link,
+	.navigation-page-node-current > .mobile-navigation-branch > summary > span,
+	.navigation-page-node-current-branch > .mobile-navigation-branch > summary > span {
+		text-decoration: underline;
+		text-decoration-thickness: 1px;
+		text-underline-offset: 0.3em;
+	}
+
+	.mobile-nav-panel a,
+	.mobile-nav-page-open,
+	.mobile-nav-back {
+		font-family: inherit;
+		font-size: 0.94rem;
+		letter-spacing: 0;
+		line-height: 1.35;
+		text-transform: none;
+	}
+
+	.mobile-nav-page {
+		border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
+		padding: 0;
 	}
 
-	.mobile-nav-panel a {
-		font-size: 0.82rem;
-		letter-spacing: 0.06em;
+	.mobile-nav-page:first-child {
+		border-top: 0;
+	}
+
+	.mobile-nav-page > a,
+	.mobile-nav-page-open {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		min-height: 3.4rem;
+		padding: 0.8rem 0;
+		font-weight: 600;
+	}
+
+	.mobile-nav-page-open {
+		display: none;
+		border: 0;
+		background: transparent;
+		color: currentColor;
+		cursor: pointer;
+		font-weight: 600;
+		text-align: left;
+	}
+
+	.mobile-nav-page-open::after {
+		content: "›";
+		font-size: 1.35rem;
+		line-height: 1;
+		opacity: 0.68;
 	}
 
-	.mobile-page-nav a[aria-current='true'] {
+	.mobile-nav-page-open:hover > span,
+	.mobile-nav-page-open:focus-visible > span,
+	.mobile-nav-page-open[aria-current='page'] > span {
 		text-decoration: underline;
 		text-decoration-thickness: 1px;
-		text-underline-offset: 0.35em;
+		text-underline-offset: 0.3em;
+	}
+
+	.mobile-nav-menu[data-mobile-navigation-ready='true'] .mobile-nav-page-open,
+	.mobile-nav-menu[data-mobile-navigation-ready='true'] .mobile-nav-back {
+		display: flex;
+	}
+
+	.mobile-nav-menu[data-mobile-navigation-ready='true'] .mobile-nav-page-fallback {
+		display: none;
+	}
+
+	.mobile-nav-view[hidden] {
+		display: none;
+	}
+
+	.mobile-nav-menu:not([data-mobile-navigation-ready='true']) .mobile-nav-page-view:not([data-current-page='true']) {
+		display: none;
+	}
+
+	.mobile-nav-page-view + .mobile-nav-page-view,
+	.mobile-nav-view + .mobile-nav-view {
+		margin-top: 2rem;
+	}
+
+	.mobile-nav-menu[data-mobile-navigation-ready='true'] .mobile-nav-view {
+		margin-top: 0;
+	}
+
+	.mobile-nav-back {
+		display: none;
+		align-items: center;
+		gap: 0.55rem;
+		min-height: 2.75rem;
+		margin: -0.4rem 0 0.65rem;
+		border: 0;
+		padding: 0;
+		background: transparent;
+		color: currentColor;
+		cursor: pointer;
+		opacity: 0.78;
+	}
+
+	.mobile-nav-back::before {
+		content: "‹";
+		font-size: 1.35rem;
+		line-height: 1;
+	}
+
+	.mobile-nav-back:hover,
+	.mobile-nav-back:focus-visible {
+		opacity: 1;
+		text-decoration: underline;
+		text-underline-offset: 0.25em;
+	}
+
+	.mobile-nav-sections {
+		border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+	}
+
+	.mobile-nav-sections li {
+		border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+	}
+
+	.mobile-nav-sections a {
+		min-height: 3.2rem;
+		padding: 0.85rem 0;
+		font-size: 0.92rem;
+		opacity: 0.78;
+	}
+
+	.mobile-nav-sections .mobile-nav-overview {
+		font-weight: 650;
+	}
+
+	.mobile-nav-sections a:hover,
+	.mobile-nav-sections a:focus-visible,
+	.mobile-nav-sections a[aria-current='location'] {
+		opacity: 1;
+		text-decoration: underline;
+		text-decoration-thickness: 1px;
+		text-underline-offset: 0.25em;
+	}
+
+	.mobile-navigation-open {
+		overflow: hidden;
 	}
 
 	.site-content {

package/starters/basic/README.md

@@ -15,14 +15,12 @@ If the standard local port is blocked, start with:
 npm run norna:dev -- --kill
 ```
 
-Edit the shared navigation label, logo settings, banners, and footer in
+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 source images under `site/images/<section-id>/`
-and static public files under `site/public/`. The image folder name should
-match the section id in Markdown, for example `## Work {#work}` uses
-`site/images/work/`.
+in `site/config.yaml`. Keep managed homepage source images directly under
+`site/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:
@@ -38,7 +36,7 @@ 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 route may replace that visual theme with its
+configured in `site/theme.yaml`. A page may replace that visual theme with its
 own `theme.yaml`.
 
 Commit `package-lock.json` after the first install so GitHub Actions can use
@@ -73,7 +71,7 @@ Generic documentation lives in the `norna` repository:
 - `docs/content.md`
 - `docs/theme.md`
 - `docs/typography.md`
-- `docs/routes.md`
+- `docs/pages.md`
 - `docs/configuration.md`
 - `docs/commands.md`
 - `docs/images-and-metadata.md`

package/starters/basic/site/content.md

@@ -1,16 +1,19 @@
 ---
-title: Example Site
-description: Minimal norna starter site.
+page:
+  description: Minimal norna starter site.
 ---
 
+# Example Site
+
+
 ## 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
+pages defined, the navigation menu will be a sticky bar with anchor links for
 ease of use on phones etc. **Highlighted inline text** when a short
 phrase needs emphasis
 ## Work {#work}
 Add Norna image blocks in Markdown where the images should appear. Put
-matching source images under `images/work/`.
+matching source images directly under `images/`.
 
 ````
 ```norna-image-stack

package/starters/basic/site/sitewide-content.yaml

@@ -1,12 +1,3 @@
-navigation:
-  label: Example Site
 footer:
   copyrightMessage: (c) Example Owner.
-  buildInfo:
-    enabled: true
-    text: Built
-    dateTimeFormat:
-      locale: en-GB
-      timeZone: UTC
-      dateStyle: short
-      timeStyle: short
+  buildInfo: true

package/starters/project/README.md

@@ -19,13 +19,13 @@ npm run norna:dev -- --kill
 ## Files
 
 - `site/config.yaml`: public URL and optional language and smooth scrolling.
-- `site/sitewide-content.yaml`: shared navigation identity, banners, and footer.
+- `site/sitewide-content.yaml`: shared logo display settings, banners, and footer.
 - `site/theme.yaml`: site-wide visual settings such as layout density, typography
   rhythm, palettes, section surfaces, and typography.
 - `site/content.md`: homepage title, sections, placeholders, project summary,
   links, install command, example usage, benefits, next steps, Norna blocks,
   and license.
-- `site/routes/010-guide/content.md`: short secondary page with realistic
+- `site/pages/010-guide/content.md`: short secondary page with realistic
   project guide content.
 - `site/public/robots.txt`: static public file copied into the built site.
 
@@ -37,14 +37,14 @@ GitHub Pages workflow uses `npm ci`.
 
 1. Replace the project name, tagline, links, install command, example usage,
    benefits, use cases, and license in `site/content.md`.
-2. Replace the guide examples in `site/routes/010-guide/content.md`, or
-   delete the route if the homepage is enough.
-3. Edit `site/sitewide-content.yaml` for the navigation label, logo display,
+2. Replace the guide examples in `site/pages/010-guide/content.md`, or
+   delete the page if the homepage is enough.
+3. Edit `site/sitewide-content.yaml` for logo display settings,
    banners, and footer.
 4. Edit `site/theme.yaml` for layout density, typography rhythm, palette, section
    surfaces, and typography.
-5. Put any local source images in the image folder for the Markdown section
-   that references them, for example `site/images/intro/`.
+5. Put managed homepage source images directly in `site/images/`. Images for
+   an additional page belong directly in that page's `images/` directory.
 6. Edit `site/config.yaml` for the public URL and, when needed, language or smooth
    scrolling. Deploy commands discover the GitHub repository and default branch.
 7. Update `package.json` with the site's package name and keep
@@ -79,6 +79,6 @@ Generic Norna documentation lives in the Norna repository:
 - `docs/content.md`
 - `docs/theme.md`
 - `docs/typography.md`
-- `docs/routes.md`
+- `docs/pages.md`
 - `docs/configuration.md`
 - `docs/commands.md`