@janga/norna 0.7.23 → 0.7.25

package/src/styles/responsive.css

@@ -88,18 +88,6 @@
 		text-transform: uppercase;
 	}
 
-	.mobile-nav-menu > summary::after {
-		content: "☰";
-		font-size: 1rem;
-		line-height: 1;
-		opacity: 0.86;
-	}
-
-	.mobile-nav-menu[open] > summary::after {
-		content: "×";
-		font-size: 1.25rem;
-	}
-
 	.mobile-nav-menu > summary::-webkit-details-marker {
 		display: none;
 	}
@@ -135,6 +123,29 @@
 		text-transform: none;
 	}
 
+	.mobile-nav-panel .navigation-tree-controls {
+		position: static;
+		margin-bottom: 1rem;
+		padding-bottom: 1rem;
+		background: var(--site-top-background-color, var(--color-page));
+	}
+
+	.mobile-nav-panel .navigation-tree-filter > input {
+		min-height: 2.75rem;
+		font-size: 0.9rem;
+	}
+
+	.mobile-nav-panel .navigation-tree-commands > button {
+		width: 2.75rem;
+		height: 2.75rem;
+		background: var(--site-top-background-color, var(--color-page));
+	}
+
+	.mobile-nav-panel .navigation-tree-commands svg {
+		width: 1.15rem;
+		height: 1.15rem;
+	}
+
 	.mobile-nav-panel :is(ul, ol) {
 		display: grid;
 		gap: 0;
@@ -165,7 +176,9 @@
 		text-transform: none;
 	}
 
-	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-summary {
+	.navigation-page-tree-mobile
+		.navigation-page-disclosure.navigation-category-disclosure
+		> .navigation-page-summary {
 		position: static;
 		display: flex;
 		align-items: center;
@@ -179,11 +192,34 @@
 		color: var(--color-secondary-text);
 	}
 
-	.navigation-page-tree-mobile .navigation-page-disclosure > .navigation-page-open-link {
-		display: none;
+	.navigation-page-tree-mobile
+		.navigation-page-node-page-disclosure {
+		display: grid;
+		grid-template-columns: 2.5rem minmax(0, 1fr);
+	}
+
+	.navigation-page-tree-mobile
+		.navigation-page-node-page-disclosure
+		> .navigation-page-disclosure
+		> .navigation-page-summary {
+		position: static;
+		display: grid;
+		place-items: center;
+		width: 100%;
+		height: auto;
+		min-height: 3.25rem;
+		padding: 0;
+		color: var(--color-secondary-text);
+	}
+
+	.navigation-page-tree-mobile .navigation-page-node-page-disclosure > .navigation-page-open-link {
+		position: static;
+		grid-column: 2;
+		grid-row: 1;
+		display: flex;
 		align-items: center;
 		min-height: 3.25rem;
-		width: calc(100% - 2.5rem);
+		width: 100%;
 		padding: 0.75rem 0;
 		font-size: 0.94rem;
 		line-height: 1.35;
@@ -191,10 +227,6 @@
 		overflow-wrap: anywhere;
 	}
 
-	.navigation-page-tree-mobile .navigation-page-disclosure[open] > .navigation-page-open-link {
-		display: flex;
-	}
-
 	.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 {
@@ -228,6 +260,7 @@
 	}
 
 	.navigation-page-tree-mobile .navigation-page-branch-content {
+		grid-column: 1 / -1;
 		margin-left: 0.35rem;
 		border-left: 1px solid color-mix(in srgb, currentColor 20%, transparent);
 		padding-left: 1rem;
@@ -237,6 +270,14 @@
 		margin: 0 0 0.45rem;
 	}
 
+	.navigation-page-tree-mobile .navigation-page-sections-disclosure > summary {
+		top: 0;
+		right: 0;
+		left: auto;
+		width: 2.5rem;
+		height: 3.25rem;
+	}
+
 	.navigation-page-branch-content > .navigation-page-tree-mobile > .navigation-page-node {
 		border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
 	}
@@ -348,6 +389,14 @@
 		display: none;
 	}
 
+	.page-sequence-navigation {
+		grid-template-columns: 1fr;
+	}
+
+	.page-sequence-empty {
+		display: none;
+	}
+
 	.site-banners {
 		width: min(calc(100% - 2rem), var(--page-width));
 		padding-top: 0.75rem;
@@ -450,11 +499,21 @@
 		gap: var(--space-image-item);
 	}
 
-	.image-details {
-		padding: 0 0.25rem;
-		font-size: 1rem;
+		.image-details {
+			padding: 0 0.25rem;
+			font-size: 1rem;
+		}
+
+		.image-inspector {
+			width: calc(100% - 1rem);
+			height: calc(100svh - 1rem);
+		}
+
+		.image-inspector-layout {
+			gap: 0.5rem;
+			padding: 0.5rem;
+		}
 	}
-}
 
 @media (forced-colors: active) {
 	:root,
@@ -505,12 +564,28 @@
 	.display-settings-panel,
 	.mobile-nav-panel,
 	.site-nav-submenu > nav,
+	.norna-callout,
+	.norna-code-example,
 	.card-list-item,
+	.page-sequence-link,
 	.image-carousel-button,
-	.image-carousel-position {
-		border: 1px solid CanvasText;
-		box-shadow: none;
-	}
+		.image-carousel-position {
+			border: 1px solid CanvasText;
+			box-shadow: none;
+		}
+
+		.image-inspector,
+		.image-inspector-controls button,
+		.norna-table-navigation button,
+		.managed-image-inspection-affordance {
+			border: 1px solid CanvasText;
+			box-shadow: none;
+		}
+
+		.norna-table-navigation button::before {
+			border: 0;
+			background: transparent;
+		}
 
 	:is(.display-settings button, .display-settings-segmented span, .mobile-nav-menu > summary, .site-banner-dismiss) {
 		border-color: ButtonText;
@@ -518,6 +593,47 @@
 		color: ButtonText;
 	}
 
+	.norna-code-line-highlighted {
+		border-inline-start-color: Highlight !important;
+		background: Canvas !important;
+	}
+
+	.norna-table-frame::before,
+	.norna-table-frame::after {
+		top: 50%;
+		bottom: auto;
+		width: 0.55rem;
+		height: 0.55rem;
+		border-block-start: 2px solid CanvasText;
+		border-inline-end: 2px solid CanvasText;
+		background: none;
+	}
+
+	.norna-table-sticky-heading,
+	.norna-table-sticky-heading-cell {
+		border-color: CanvasText;
+		background: Canvas;
+		color: CanvasText;
+	}
+
+	.norna-table-frame::before {
+		inset-inline-start: 0.4rem;
+		transform: translateY(-50%) rotate(-135deg);
+	}
+
+	.norna-table-frame::after {
+		inset-inline-end: 0.4rem;
+		transform: translateY(-50%) rotate(45deg);
+	}
+
+	.norna-table-frame:dir(rtl)::before {
+		transform: translateY(-50%) rotate(45deg);
+	}
+
+	.norna-table-frame:dir(rtl)::after {
+		transform: translateY(-50%) rotate(-135deg);
+	}
+
 	:is(.display-settings-segmented input:checked + span, .image-carousel-button:hover:not(:disabled)) {
 		background: Highlight;
 		color: HighlightText;

package/starters/basic/README.md

@@ -1,4 +1,4 @@
-# norna Starter
+# Norna Starter
 
 This is a minimal site repository starter for `@janga/norna`.
 
@@ -9,11 +9,8 @@ npm install
 npm run norna:dev
 ```
 
-If the standard local port is blocked, start with:
-
-```sh
-npm run norna:dev
-```
+Open the address printed by the development server. Stop it later with
+`npm run norna:dev:stop`.
 
 Edit shared logo settings, banners, and footer in
 `site/sitewide-content.yaml`,
@@ -63,16 +60,6 @@ still selects this project's locally installed Norna version.
 Use `npm run norna:engine:version` to inspect the installed engine and
 `npm run norna:engine:update` to update it.
 
-Generic documentation lives in the `norna` repository:
-
-- `docs/README.md`
-- `docs/site-files.md`
-- `docs/public-files.md`
-- `docs/content.md`
-- `docs/theme.md`
-- `docs/typography.md`
-- `docs/pages.md`
-- `docs/configuration.md`
-- `docs/commands.md`
-- `docs/images-and-metadata.md`
-- `docs/publishing.md`
+Start with the [illustrated Getting Started guide](https://janga.github.io/norna/getting-started/install-norna/).
+Use the [Markdown reference index](https://github.com/janga/norna/blob/main/docs/README.md)
+for exact file contracts, syntax, commands, and publishing behavior.

package/starters/basic/package.json

@@ -14,6 +14,7 @@
     "norna:config:check": "norna config:check",
     "norna:content:check": "norna content:check",
     "norna:sync": "norna content:sync",
+    "norna:navigation:review": "norna navigation:review",
     "norna:theme:presets": "norna theme:presets",
     "norna:theme:export": "norna theme:export",
     "norna:typography:profiles": "norna typography profiles",

package/starters/basic/site/pages/000-home/content.md

@@ -1,57 +1,20 @@
 ---
 page:
-  description: Minimal norna starter site.
+  description: A new site created with Norna.
 ---
 
-# Example Site
+# My Site
 
+This is a new Norna site. Replace this introduction with a short description
+of what visitors can find here.
 
-## Intro {#intro}
-This is a minimal starter site for norna. Since this site doesn't have any
-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 directly under `images/`.
+## Welcome
 
-````
-```norna-image-stack
-- image: example.jpg
-  caption: Replace this with a real image and caption.
-```
-````
-## What is Lorem Ipsum? {#lorem1}
-Lorem Ipsum is simply dummy text of the printing and typesetting
-industry. Lorem Ipsum has been the industry's standard dummy text ever
-since 1966, when designers at Letraset and James Mosley, the librarian
-at St Bride Printing Library in London, took a 1914 Cicero translation
-and scrambled it to make dummy text for Letraset's Body Type
-sheets. It has survived not only many decades, but also the leap into
-electronic typesetting, remaining essentially unchanged. It was
-popularised thanks to these sheets and more recently with desktop
-publishing software like Aldus PageMaker and Microsoft Word including
-versions of Lorem Ipsum.
-## Why do we use it? {#lorem2}
-It is a long established fact that a reader will be distracted by the
-readable content of a page when looking at its layout. The point of
-using Lorem Ipsum is that it has a more-or-less normal distribution of
-letters, as opposed to using 'Content here, content here', making it
-look like readable English. Many desktop publishing packages and web
-page editors now use Lorem Ipsum as their default model text, and a
-search for 'lorem ipsum' will uncover many web sites still in their
-infancy. Various versions have evolved over the years, sometimes by
-accident, sometimes on purpose (injected humour and the like).
-## Where does it come from? {#lorem3}
-Contrary to popular belief, Lorem Ipsum is not simply random text. It
-has roots in a piece of classical Latin literature from 45 BC, making
-it over 2000 years old. Richard McClintock, a Latin professor at
-Hampden-Sydney College in Virginia, looked up one of the more obscure
-Latin words, consectetur, from a Lorem Ipsum passage, and going
-through the cites of the word in classical literature, discovered the
-undoubtable source. Lorem Ipsum comes from sections 1.10.32 and
-1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
-Evil) by Cicero, written in 45 BC. This book is a treatise on the
-theory of ethics, very popular during the Renaissance. The first line
-of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
-section 1.10.32
+Edit this page in `site/pages/000-home/content.md`. Every H2 starts a section
+and becomes a destination in this one-page site's navigation.
+
+## Next steps
+
+Add your own text, then choose a preset in `site/theme.yaml`. Put local images
+in this page's `images/` directory and reference them through a Norna image
+block when the site needs them.