@janga/norna 0.7.25 → 0.7.26

package/src/styles/foundations.css

@@ -23,6 +23,9 @@
 	--color-warning-accent: var(--palette-light-warning-accent, #7a5600);
 	--color-warning-surface: var(--palette-light-warning-surface, #fff4c2);
 	--color-warning-text: var(--palette-light-warning-text, #3b2b00);
+	--color-caution-accent: var(--palette-light-caution-accent, #a34b00);
+	--color-caution-surface: var(--palette-light-caution-surface, #ffead6);
+	--color-caution-text: var(--palette-light-caution-text, #542300);
 	--color-error-accent: var(--palette-light-error-accent, #a12d2d);
 	--color-error-surface: var(--palette-light-error-surface, #fce8e8);
 	--color-error-text: var(--palette-light-error-text, #5f1616);
@@ -113,6 +116,9 @@
 	--color-warning-accent: var(--palette-dark-warning-accent);
 	--color-warning-surface: var(--palette-dark-warning-surface);
 	--color-warning-text: var(--palette-dark-warning-text);
+	--color-caution-accent: var(--palette-dark-caution-accent);
+	--color-caution-surface: var(--palette-dark-caution-surface);
+	--color-caution-text: var(--palette-dark-caution-text);
 	--color-error-accent: var(--palette-dark-error-accent);
 	--color-error-surface: var(--palette-dark-error-surface);
 	--color-error-text: var(--palette-dark-error-text);
@@ -158,6 +164,9 @@
 		--color-warning-accent: var(--palette-dark-warning-accent);
 		--color-warning-surface: var(--palette-dark-warning-surface);
 		--color-warning-text: var(--palette-dark-warning-text);
+		--color-caution-accent: var(--palette-dark-caution-accent);
+		--color-caution-surface: var(--palette-dark-caution-surface);
+		--color-caution-text: var(--palette-dark-caution-text);
 		--color-error-accent: var(--palette-dark-error-accent);
 		--color-error-surface: var(--palette-dark-error-surface);
 		--color-error-text: var(--palette-dark-error-text);

package/src/styles/media.css

@@ -191,6 +191,7 @@
 
 .card-list-content p:not(.card-list-badge) {
 	margin: 0;
+	white-space: pre-line;
 	font-size: calc(var(--section-body-font-size-desktop, 1rem) * var(--card-list-text-scale));
 	line-height: var(--section-body-line-height, 1.5);
 }
@@ -674,6 +675,10 @@
 	text-align: var(--section-caption-align-desktop, center);
 }
 
+.image-meta .image-details > span {
+	white-space: pre-line;
+}
+
 :root[data-image-presentation='prose-aligned'] .image-stack .image-meta {
 	margin-inline: 0 auto;
 }

package/src/styles/navigation.css

@@ -277,8 +277,7 @@
 .site-brand,
 .site-nav a,
 .mobile-nav-menu summary,
-.mobile-nav-panel a,
-.site-nav-submenu a {
+.mobile-nav-panel a {
 	color: currentColor;
 	text-decoration: none;
 }
@@ -321,8 +320,66 @@
 
 .site-nav-item {
 	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.top-page-menu > summary {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: var(--target-size-minimum);
+	min-height: var(--target-size-minimum);
+	list-style: none;
+	cursor: pointer;
+}
+
+.top-page-menu > summary::-webkit-details-marker { display: none; }
+.top-page-menu > summary svg { width: 1rem; height: 1rem; }
+.top-page-menu[open] > summary svg { transform: rotate(180deg); }
+.top-page-menu > summary:hover { color: var(--color-accent); }
+.top-page-menu > summary:focus-visible { outline: 2px solid var(--color-focus-ring); }
+
+.top-page-panel {
+	position: absolute;
+	inset-block-start: 100%;
+	inset-inline-end: 0;
+	z-index: 10;
+	width: max-content;
+	min-width: 12rem;
+	max-width: min(24rem, calc(100vw - (var(--content-gutter) * 2)));
+	max-height: calc(100svh - var(--site-top-anchor-offset, 8rem) - 1rem);
+	overflow: auto;
+	border: 1px solid var(--color-border);
+	padding: 0.75rem;
+	background: var(--site-top-background-color, var(--color-page));
+	box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.16);
+	transform: translateX(var(--top-page-panel-shift, 0px));
+}
+
+.site-nav-item:first-child .top-page-panel {
+	inset-inline-start: 0;
+	inset-inline-end: auto;
+}
+
+.site-nav .top-page-panel a {
+	padding: 0.4rem;
+	font-size: 0.875rem;
+	letter-spacing: 0;
+	line-height: 1.4;
+	text-transform: none;
+	overflow-wrap: break-word;
 }
 
+.top-page-panel a:is(:hover, :focus-visible, [aria-current='location']) {
+	text-decoration: underline;
+	text-underline-offset: 0.2em;
+}
+
+.top-page-children:not(:first-child) { border-top: 1px solid var(--color-border); margin-top: 0.5rem; }
+.top-page-children > p { margin: 0.5rem 0; font-size: 0.75rem; }
+.top-page-children .navigation-page-tree .navigation-page-tree { padding-inline-start: 1rem; }
+
 .site-nav a,
 .mobile-nav-panel a {
 	display: block;
@@ -353,78 +410,6 @@
 	text-underline-offset: 0.35em;
 }
 
-.site-nav-submenu {
-	position: absolute;
-	top: 100%;
-	left: 50%;
-	z-index: 10;
-	width: max-content;
-	max-width: min(24rem, calc(100vw - (var(--content-gutter) * 2)));
-	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;
-}
-
-.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-page));
-	box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.22);
-}
-
-.site-nav-submenu ul {
-	display: grid;
-	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;
-	line-height: 1.3;
-	text-transform: none;
-	white-space: normal;
-}
-
-.site-nav-submenu a:hover,
-.site-nav-submenu a:focus-visible,
-.site-nav-submenu a[aria-current='location'] {
-	color: var(--site-top-text-color, var(--color-primary-text));
-	text-decoration: underline;
-	text-underline-offset: 0.25em;
-}
-
-.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);
-}
-
-.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;
@@ -447,10 +432,14 @@
 }
 
 .mobile-nav-panel-actions {
+	position: sticky;
+	top: 0;
+	z-index: 5;
 	display: flex;
 	justify-content: flex-end;
 	width: min(100%, 32rem);
 	margin: 0 auto 0.5rem;
+	background: var(--site-top-background-color, var(--color-page));
 }
 
 .mobile-nav-close {

package/src/styles/page-layout.css

@@ -526,6 +526,13 @@
 	text-underline-offset: 0.28em;
 }
 
+:is(.tree-local-navigation, .mobile-site-nav) [data-reading-position-ancestor] {
+	background: var(--tree-current-item-background);
+	color: var(--color-primary-text);
+	text-decoration: underline;
+	text-underline-offset: 0.28em;
+}
+
 .navigation-page-chevron::before {
 	display: block;
 	content: "›";

package/src/styles/responsive.css

@@ -576,17 +576,11 @@
 
 		.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;
 		background: ButtonFace;
@@ -610,7 +604,8 @@
 	}
 
 	.norna-table-sticky-heading,
-	.norna-table-sticky-heading-cell {
+	.norna-table-sticky-heading-cell,
+	.norna-table-frame[data-table-row-headers='true'] tbody th[scope='row'] {
 		border-color: CanvasText;
 		background: Canvas;
 		color: CanvasText;