@janga/norna 0.7.8 → 0.7.10

package/src/styles/global.css

@@ -31,9 +31,12 @@
 	--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-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);
+	--space-content-block-gap-desktop: 1.5em;
+	--space-content-block-gap-mobile: 1.25em;
+	--space-content-block-gap: var(--space-content-block-gap-desktop);
+	--space-heading-to-block-desktop: 0.75em;
+	--space-heading-to-block-mobile: 0.7em;
+	--space-heading-to-block: var(--space-heading-to-block-desktop);
 	--space-gallery-item-desktop: clamp(1.5rem, 3.5vw, 2.75rem);
 	--space-gallery-item-mobile: 2.75rem;
 	--space-gallery-item: var(--space-gallery-item-desktop);
@@ -48,7 +51,7 @@
 	--content-gutter-mobile: 1rem;
 	--content-gutter: var(--content-gutter-desktop);
 	--site-top-anchor-offset: 4.5rem;
-	color-scheme: dark;
+	color-scheme: var(--color-scheme, dark);
 	scroll-behavior: smooth;
 	scroll-padding-top: var(--site-top-anchor-offset);
 }
@@ -130,12 +133,14 @@ a {
 .site-nav a,
 .mobile-nav-menu summary,
 .mobile-nav-panel a,
-.page-nav a {
+.site-nav-submenu a {
 	color: currentColor;
 	text-decoration: none;
 }
 
 .site-brand {
+	display: flex;
+	align-items: center;
 	flex: 0 0 auto;
 	font-size: 0.82rem;
 	font-weight: 700;
@@ -144,21 +149,31 @@ a {
 	text-transform: uppercase;
 }
 
+.site-brand-logo {
+	display: block;
+	width: auto;
+	height: var(--site-brand-logo-height, 2.6rem);
+	max-width: min(30vw, 18rem);
+}
+
 .site-nav ul,
-.mobile-nav-panel ul,
-.page-nav ul {
+.mobile-nav-panel ul {
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
 
-.site-nav ul {
+.site-nav > ul {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: flex-end;
 	gap: 0.35rem clamp(0.9rem, 2.6vw, 2rem);
 }
 
+.site-nav-item {
+	position: relative;
+}
+
 .site-nav a,
 .mobile-nav-panel a {
 	display: block;
@@ -183,71 +198,66 @@ a {
 	text-underline-offset: 0.35em;
 }
 
-.mobile-nav-menu {
-	display: none;
+.site-nav-submenu {
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	z-index: 10;
+	width: max-content;
+	min-width: 12rem;
+	padding-top: 0.7rem;
+	opacity: 0;
+	visibility: hidden;
+	pointer-events: none;
+	transform: translate(-50%, -0.35rem);
+	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
 }
 
-.page-nav {
-	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
+.site-nav-submenu > nav {
+	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
+	padding: 0.8rem 1rem;
+	background: var(--site-top-background-color, var(--color-nav-background));
+	box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.22);
 }
 
-.page-nav ul {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 0 clamp(1.4rem, 4vw, 3.25rem);
+.site-nav-submenu ul {
+	display: grid;
+	gap: 0.65rem;
 }
 
-.page-nav li {
-	position: relative;
+.site-nav-submenu a {
+	font-size: 0.76rem;
+	letter-spacing: 0.03em;
+	line-height: 1.3;
+	opacity: 0.78;
+	text-transform: none;
+	white-space: nowrap;
 }
 
-.page-nav li + li::before {
-	position: absolute;
-	top: 50%;
-	left: calc(clamp(1.4rem, 4vw, 3.25rem) / -2 - 0.1rem);
-	transform: translateY(-50%);
-	color: currentColor;
-	content: "/";
-	font-size: 0.75rem;
-	opacity: 0.28;
+.site-nav-submenu a:hover,
+.site-nav-submenu a:focus-visible {
+	opacity: 1;
+	text-decoration: underline;
+	text-underline-offset: 0.25em;
 }
 
-.page-nav a {
-	display: block;
-	position: relative;
-	padding: 1.05rem 0 0.95rem;
-	font-size: 0.76rem;
-	font-weight: 500;
-	letter-spacing: 0.12em;
-	line-height: 1;
-	opacity: 0.76;
-	text-decoration: none;
-	text-transform: uppercase;
+.site-nav-item:hover .site-nav-submenu,
+.site-nav-item:focus-within .site-nav-submenu {
+	opacity: 1;
+	visibility: visible;
+	pointer-events: auto;
+	transform: translate(-50%, 0);
 }
 
-.page-nav a::after {
-	position: absolute;
-	right: 0;
-	bottom: 0.62rem;
-	left: 0;
-	height: 1px;
-	transform: scaleX(0);
-	background: currentColor;
-	content: "";
-	opacity: 0;
-	transition: opacity 0.18s ease, transform 0.18s ease;
+.mobile-nav-menu {
+	display: none;
 }
 
-.page-nav a:hover,
-.page-nav a[aria-current='true'],
 .mobile-page-nav a[aria-current='true'] {
 	opacity: 1;
-}
-
-.page-nav a[aria-current='true']::after {
-	transform: scaleX(1);
-	opacity: 0.75;
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.35em;
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -264,6 +274,77 @@ a {
 	padding: 0;
 }
 
+.site-banners {
+	position: relative;
+	z-index: 2;
+	display: grid;
+	gap: 0.75rem;
+	width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
+	margin: 0 auto;
+	padding: 1rem 0 0;
+}
+
+.site-banner {
+	display: flex;
+	align-items: flex-start;
+	gap: 1rem;
+	border: 1px solid color-mix(in srgb, #ffd84d 42%, var(--color-border));
+	border-inline-start: 0.35rem solid #ffd84d;
+	padding: 0.8rem 0.9rem;
+	background: color-mix(in srgb, #ffd84d 12%, var(--color-surface));
+	color: var(--color-text);
+}
+
+.site-banner[hidden] {
+	display: none;
+}
+
+.site-banner-copy {
+	display: flex;
+	align-items: baseline;
+	gap: 0.65rem;
+	min-width: 0;
+	flex: 1 1 auto;
+}
+
+.site-banner-title,
+.site-banner-text {
+	margin: 0;
+}
+
+.site-banner-title {
+	flex: 0 0 auto;
+	white-space: nowrap;
+	font-weight: 700;
+}
+
+.site-banner-text {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	margin-top: 0.2rem;
+	color: color-mix(in srgb, currentColor 86%, transparent);
+}
+
+.site-banner-dismiss {
+	flex: 0 0 auto;
+	width: 2rem;
+	height: 2rem;
+	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
+	padding: 0;
+	background: transparent;
+	color: currentColor;
+	cursor: pointer;
+	font-size: 1.25rem;
+	line-height: 1;
+}
+
+.site-banner-dismiss:hover,
+.site-banner-dismiss:focus-visible {
+	background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
 .site-footer {
 	position: relative;
 	isolation: isolate;
@@ -332,6 +413,10 @@ a {
 	text-align: var(--section-heading-align-desktop, center);
 }
 
+.site-section-first-block-is-visual .section-header {
+	padding-bottom: var(--space-heading-to-block);
+}
+
 .section-header h1,
 .section-header h2,
 p,
@@ -344,7 +429,7 @@ ul {
 	margin-bottom: 0;
 	color: inherit;
 	font-size: var(--section-heading-font-size-desktop, clamp(1.35rem, 1.1rem + 0.9vw, 2rem));
-	font-weight: 400;
+	font-weight: var(--section-heading-font-weight, 400);
 	letter-spacing: 0;
 	line-height: var(--section-heading-line-height, 1.04);
 	text-transform: uppercase;
@@ -359,12 +444,96 @@ ul {
 	font-size: clamp(0.96rem, 0.94rem + 0.08vw, 1rem);
 }
 
+.section-reading-layout {
+	display: grid;
+	--section-reading-body-width: var(--section-body-width-desktop, var(--text-width));
+	--section-reading-inline-start: max(0px, calc((100% - var(--section-reading-body-width)) / 2));
+	grid-template-columns: minmax(0, var(--section-reading-body-width)) minmax(0, 13rem);
+	column-gap: 1.5rem;
+	row-gap: var(--section-body-paragraph-spacing, 1em);
+	width: min(
+		calc(100% - var(--section-reading-inline-start)),
+		calc(var(--section-reading-body-width) + 13rem + 1.5rem)
+	);
+	margin: 0 0 0 var(--section-reading-inline-start);
+	align-items: start;
+}
+
+.section-reading-layout .section-markdown {
+	grid-column: 1;
+	width: 100%;
+	margin: 0;
+}
+
+.section-note {
+	grid-column: 2;
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr);
+	column-gap: 0.25rem;
+	align-self: start;
+	margin: 0;
+	margin-top: var(--section-note-offset, 0px);
+	border-inline-start: 2px solid color-mix(in srgb, currentColor 35%, transparent);
+	padding: 0 0 0 0.35rem;
+	color: color-mix(in srgb, currentColor 76%, transparent);
+	font-size: 0.88em;
+	line-height: 1.45;
+	scroll-margin-top: calc(var(--site-top-anchor-offset) + 1rem);
+}
+
+.section-note-number {
+	display: block;
+	margin: 0;
+	color: inherit;
+	font-size: 0.82em;
+	font-weight: 700;
+	line-height: 1;
+	text-decoration: none;
+}
+
+.section-note-ref {
+	display: inline-block;
+	margin-left: 0.03em;
+	font-size: 0.72em;
+	line-height: 0;
+	white-space: nowrap;
+	vertical-align: super;
+}
+
+.section-note-ref a {
+	color: inherit;
+	text-decoration: underline;
+	text-decoration-thickness: 0.08em;
+	text-underline-offset: 0.15em;
+}
+
+.section-note.is-referenced,
+.section-note:target {
+	border-inline-start-color: currentColor;
+	background: color-mix(in srgb, currentColor 6%, transparent);
+}
+
+.section-note-ref a.is-referenced,
+.section-note-ref a:hover,
+.section-note-ref a:focus-visible {
+	text-decoration-thickness: 0.16em;
+}
+
+.section-note-content > :first-child {
+	margin-top: 0;
+}
+
+.section-note-content > :last-child {
+	margin-bottom: 0;
+}
+
 .section-markdown {
 	width: min(100%, var(--section-body-width-desktop, var(--text-width)));
-	margin: 0 auto var(--space-section-body-to-gallery);
+	max-width: 72ch;
+	margin: 0 auto;
 	font-size: var(--section-body-font-size-desktop, clamp(0.96rem, 0.94rem + 0.08vw, 1rem));
-	line-height: var(--section-body-line-height, 1.78);
-	text-align: var(--section-body-align-desktop, center);
+	line-height: var(--section-body-line-height, 1.6);
+	text-align: var(--section-body-align-desktop, left);
 }
 
 .section-markdown p {
@@ -396,14 +565,6 @@ ul {
 	font: inherit;
 }
 
-.section-markdown .inline-style {
-	color: var(--inline-style-color);
-}
-
-.section-body-text-only .section-markdown {
-	margin-bottom: 0;
-}
-
 .section-markdown > :last-child,
 .gallery-meta :last-child {
 	margin-bottom: 0;
@@ -426,6 +587,7 @@ ul {
 	padding-top: 0.55em;
 	font-family: var(--font-sans);
 	font-size: var(--section-markdown-h3-font-size-desktop, 0.82rem);
+	font-weight: var(--section-markdown-h3-font-weight, 700);
 	letter-spacing: 0;
 	line-height: var(--section-markdown-h3-line-height, 1.35);
 	text-align: var(--section-markdown-h3-align-desktop, left);
@@ -439,7 +601,7 @@ ul {
 		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;
+	font-weight: var(--section-markdown-h4-font-weight, 400);
 	letter-spacing: 0;
 	line-height: var(--section-markdown-h4-line-height, 1.5);
 	text-align: var(--section-markdown-h4-align-desktop, left);
@@ -463,7 +625,7 @@ ul {
 	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
 	gap: var(--card-list-gap, clamp(0.9rem, 2vw, 1.25rem));
 	width: min(100%, var(--card-list-width, var(--gallery-layout-width)));
-	margin: 0 auto var(--space-section-body-to-gallery);
+	margin: 0 auto;
 	text-align: left;
 	--card-list-width: var(--gallery-layout-width);
 	--card-list-gap: clamp(0.9rem, 2vw, 1.25rem);
@@ -476,6 +638,36 @@ ul {
 	--card-list-text-scale: 1;
 }
 
+.section-body > .section-reading-layout:not(:last-child),
+.section-body > .section-markdown:not(:last-child),
+.section-body > .card-list:not(:last-child),
+.section-body > .gallery:not(:last-child) {
+	margin-bottom: var(--space-content-block-gap);
+}
+
+@media (max-width: 1100px) {
+	.section-reading-layout {
+		display: block;
+		width: 100%;
+		margin: 0;
+	}
+
+	.section-reading-layout .section-markdown,
+	.section-reading-layout .section-note {
+		width: min(100%, var(--section-reading-body-width, var(--section-body-width-desktop, var(--text-width))));
+		margin-right: auto;
+		margin-left: auto;
+	}
+
+	.section-reading-layout .section-note {
+		margin-top: var(--section-body-paragraph-spacing, 0.85em);
+	}
+
+	.section-reading-layout .section-markdown + .section-markdown {
+		margin-top: var(--section-body-paragraph-spacing, 1em);
+	}
+}
+
 .card-list-width-text {
 	--card-list-width: var(--text-width);
 }
@@ -642,7 +834,7 @@ ul {
 
 .gallery-item {
 	display: grid;
-	gap: 0.7rem;
+	gap: 0.55rem;
 	align-content: start;
 	margin: 0;
 }
@@ -806,7 +998,7 @@ ul {
 }
 
 .gallery-carousel-captions {
-	width: min(100%, var(--gallery-layout-width));
+	width: min(100%, var(--gallery-layout-width), 72ch);
 	margin: 0 auto;
 }
 
@@ -830,7 +1022,7 @@ ul {
 }
 
 .gallery-meta {
-	width: min(100%, var(--gallery-layout-width));
+	width: min(100%, var(--gallery-layout-width), 72ch);
 	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);
@@ -853,7 +1045,8 @@ ul {
 @media (max-width: 700px) {
 	:root {
 		--space-nav-to-first-section: var(--space-nav-to-first-section-mobile);
-		--space-section-body-to-gallery: var(--space-section-body-to-gallery-mobile);
+		--space-content-block-gap: var(--space-content-block-gap-mobile);
+		--space-heading-to-block: var(--space-heading-to-block-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);
@@ -874,26 +1067,13 @@ ul {
 		overflow-wrap: anywhere;
 	}
 
-	.site-nav,
-	.site-top-has-site-nav .page-nav {
-		display: none;
-	}
-
-	.page-nav ul {
-		justify-content: center;
-		gap: 0 1.55rem;
-		padding: 0 1rem;
-		text-align: center;
+	.site-brand-logo {
+		height: min(var(--site-brand-logo-height, 2.6rem), 2.15rem);
+		max-width: min(48vw, 13rem);
 	}
 
-	.page-nav li + li::before {
-		left: -0.95rem;
-	}
-
-	.page-nav a {
-		padding: 0.95rem 0 0.85rem;
-		font-size: 0.72rem;
-		white-space: nowrap;
+	.site-nav {
+		display: none;
 	}
 
 	.mobile-nav-menu {
@@ -980,6 +1160,11 @@ ul {
 		width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
 	}
 
+	.site-banners {
+		width: min(calc(100% - 2rem), var(--page-width));
+		padding-top: 0.75rem;
+	}
+
 	.site-footer {
 		width: min(calc(100% - 2rem), 34rem);
 	}
@@ -1006,6 +1191,10 @@ ul {
 		text-align: var(--section-heading-align-mobile, var(--section-heading-align-desktop, center));
 	}
 
+	.section-reading-layout {
+		--section-reading-body-width: var(--section-body-width-mobile, var(--section-body-width-desktop, var(--text-width)));
+	}
+
 	.section-markdown {
 		width: min(100%, var(--section-body-width-mobile, var(--section-body-width-desktop, var(--text-width))));
 		font-size: var(

package/starters/basic/.github/workflows/deploy.yml

@@ -42,7 +42,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Build
+      - name: Check and build
         run: npm run build
 
       - name: Configure Pages

package/starters/basic/README.md

@@ -15,9 +15,10 @@ If the standard local port is blocked, start with:
 npm run dev -- --kill
 ```
 
-Edit site-wide visual defaults in `site/theme.md`, homepage content and section
-overrides in `site/content.md`, technical settings such as URL and locale
-labels in `site/config.mjs`, source images under `site/images/<section-id>/`,
+Edit shared brand, logo, banners and footer in `site/sitewide-content.md`,
+site-wide visual defaults in `site/theme.md`, homepage content and section
+metadata in `site/content.md`, and technical settings such as URL and locale
+labels in `site/config.mjs`. 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/`.
@@ -35,9 +36,9 @@ site: {
 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, colors, and site-wide typography are configured in
-`site/theme.md`. Page and section presentation overrides live in
-`site/content.md`.
+height limits, font, palettes, section surfaces, and site-wide typography are
+configured in `site/theme.md`. A route may replace that visual theme with its
+own `theme.md`.
 
 Commit `package-lock.json` after the first install so GitHub Actions can use
 `npm ci`.

package/starters/basic/site/config.mjs

@@ -19,19 +19,6 @@ export default {
 			gallery: 'Images',
 		},
 	},
-	footer: {
-		copyrightMessage: '(c) Example Owner.',
-		buildInfo: {
-			enabled: true,
-			text: 'Built',
-			dateTimeFormat: {
-				locale: 'en-GB',
-				timeZone: 'UTC',
-				dateStyle: 'short',
-				timeStyle: 'short',
-			},
-		},
-	},
 	github: {
 		repo: 'owner/example-site',
 		branch: 'main',

package/starters/basic/site/content.md

@@ -6,7 +6,7 @@ description: Minimal norna starter 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
-ease of use on phones etc. [Highlighted inline text]{.highlight} when a short
+ease of use on phones etc. **Highlighted inline text** when a short
 phrase needs emphasis
 ## Work {#work}
 Add Norna managed media blocks in Markdown where the media should appear. Put

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

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

package/starters/basic/site/theme.md

@@ -4,8 +4,6 @@
 # Active values below are ordinary YAML; this marked comment block is only help text.
 #
 # Available structure:
-# navigation:
-#   brand: site-wide brand/home text; defaults to the homepage title
 # layout:
 #   density: compact | normal | airy
 #   pageWidth: CSS length, e.g. 1180px
@@ -22,9 +20,12 @@
 #     finalSectionBottom:
 #       desktop: CSS length or clamp(), e.g. clamp(1.4rem, 3vw, 2.75rem)
 #       mobile: CSS length, e.g. 1.5rem
-#     bodyToImages:
-#       desktop: CSS length, e.g. 1.25rem
-#       mobile: CSS length, e.g. 1rem
+#     headingToBlock:
+#       desktop: CSS length, e.g. 0.75em
+#       mobile: CSS length, e.g. 0.7em
+#     blockGap:
+#       desktop: CSS length, e.g. 1.5em
+#       mobile: CSS length, e.g. 1.25em
 #     imageGap:
 #       desktop: CSS length or clamp(), e.g. clamp(1.25rem, 2.8vw, 2rem)
 #       mobile: CSS length, e.g. 1.5rem
@@ -81,19 +82,11 @@
 #       lineHeight: number from 1 through 3
 #       spacingBefore: CSS length, e.g. 0.5em
 # presentation:
-#   backgroundColor: quoted hex color, e.g. "#000000"
-#   textColor: quoted hex color, e.g. "#f7f4ee"
-#   inlineStyles:
-#     style-name:
-#       color: quoted hex color
-# frame:
-#   colors: presentation | theme
-#   colors:
-#     backgroundColor: quoted hex color
-#     textColor: quoted hex color
+#   palette: dark  # Alternatives: light, paper
+#   sectionSurfaces:
+#     mode: none | cycle
+#     sequence: [base, soft, emphasis]
 # norna:end theme-help
-navigation:
-  brand: Example Site
 layout:
   density: normal
   pageWidth: 1180px
@@ -113,11 +106,7 @@ typography:
   preset: quiet-gallery
   rhythm: normal
 presentation:
-  backgroundColor: "#000000"
-  textColor: "#f7f4ee"
-  inlineStyles:
-    highlight:
-      color: "#ffd84d"
-frame:
-  colors: presentation
+  palette: dark  # Alternatives: light, paper
+  sectionSurfaces:
+    mode: cycle
 ---