@janga/norna 0.7.24 → 0.7.25

package/src/styles/navigation.css

@@ -99,7 +99,7 @@
 	transition: border-color 0.18s ease, background-color 0.18s ease;
 }
 
-:root[data-focus-reading='on'] .display-settings summary {
+:root[data-reader-preferences-ready='true'][data-focus-reading='on'] .display-settings summary {
 	grid-template-columns: auto auto;
 	gap: 0.4rem;
 	width: auto;
@@ -142,7 +142,7 @@
 	white-space: nowrap;
 }
 
-:root[data-focus-reading='on'] .display-settings-focus-status {
+:root[data-reader-preferences-ready='true'][data-focus-reading='on'] .display-settings-focus-status {
 	display: block;
 }
 
@@ -430,6 +430,171 @@
 	display: none;
 }
 
+.mobile-nav-trigger-icon {
+	display: block;
+	width: 1rem;
+	height: 1rem;
+	stroke-width: 2;
+}
+
+.mobile-nav-trigger-close,
+.mobile-nav-menu[open] .mobile-nav-trigger-open {
+	display: none;
+}
+
+.mobile-nav-menu[open] .mobile-nav-trigger-close {
+	display: block;
+}
+
+.mobile-nav-panel-actions {
+	display: flex;
+	justify-content: flex-end;
+	width: min(100%, 32rem);
+	margin: 0 auto 0.5rem;
+}
+
+.mobile-nav-close {
+	display: grid;
+	width: 2.75rem;
+	height: 2.75rem;
+	place-items: center;
+	border: 1px solid currentColor;
+	border-radius: 50%;
+	padding: 0;
+	background: transparent;
+	color: currentColor;
+	cursor: pointer;
+}
+
+.mobile-nav-close:hover,
+.mobile-nav-close:focus-visible {
+	background: color-mix(in srgb, currentColor 9%, transparent);
+}
+
+.mobile-nav-close:focus-visible {
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
+	outline-offset: 2px;
+}
+
+.mobile-nav-close svg {
+	width: 1.1rem;
+	height: 1.1rem;
+	stroke-width: 2;
+}
+
+.mobile-navigation-open {
+	overflow: hidden;
+}
+
+@media (min-width: 701px) {
+	.mobile-nav-menu {
+		position: relative;
+		flex: 0 0 auto;
+		margin-left: auto;
+	}
+
+	:root[data-reader-preferences-ready='true'][data-focus-reading='on'] .mobile-nav-menu {
+		display: block;
+	}
+
+	.mobile-nav-menu > summary {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		min-height: 2.75rem;
+		border: 1px solid currentColor;
+		padding: 0.55rem 0.75rem;
+		color: var(--site-top-text-color, var(--color-primary-text));
+		font-size: 0.72rem;
+		font-weight: 700;
+		letter-spacing: 0.1em;
+		line-height: 1;
+		list-style: none;
+		text-transform: uppercase;
+	}
+
+	.mobile-nav-menu > summary::-webkit-details-marker {
+		display: none;
+	}
+
+	.mobile-nav-panel {
+		position: fixed;
+		top: var(--site-top-anchor-offset);
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 20;
+		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-page));
+		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-site-nav {
+		width: min(100%, 32rem);
+		margin: 0 auto;
+	}
+
+	.mobile-nav-panel h2 {
+		margin: 0 0 1.25rem;
+		font-size: 1.4rem;
+		font-weight: 650;
+		letter-spacing: 0;
+		line-height: 1.2;
+		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 a {
+		font-family: inherit;
+		font-size: 0.9rem;
+		letter-spacing: 0;
+		line-height: 1.4;
+		text-transform: none;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-link {
+		display: block;
+		border-radius: var(--corner-radius-small, 2px);
+		padding: 0.45rem 0.3rem 0.45rem var(--tree-disclosure-offset);
+		color: var(--color-secondary-text);
+		text-decoration: none;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-branch-content {
+		margin: 0.1rem 0 0.2rem 0.25rem;
+		border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+		padding-left: 0.75rem;
+	}
+
+	.navigation-page-tree-mobile .navigation-page-tree-mobile {
+		margin: 0.15rem 0;
+		border-left: 0;
+		padding-left: 0;
+	}
+}
+
+@media (min-width: 701px) and (max-width: 960px) {
+	.site-top[data-navigation-mode='tree'] .site-nav {
+		display: none;
+	}
+
+	.site-top[data-navigation-mode='tree'] .mobile-nav-menu {
+		display: block;
+	}
+}
+
 .page-nav {
 	border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
 }
@@ -440,7 +605,7 @@
 
 .page-nav-inner {
 	display: flex;
-	align-items: center;
+	align-items: baseline;
 	justify-content: center;
 	gap: clamp(1.1rem, 2.5vw, 2rem);
 	width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));

package/src/styles/page-layout.css

@@ -40,7 +40,7 @@
 	background-color: transparent;
 }
 
-@media (min-width: 701px) {
+@media (min-width: 961px) {
 	.site-page-layout-tree > .site-content {
 		--layout-inline-start-margin: 0;
 		--layout-inline-end-margin: auto;
@@ -48,7 +48,7 @@
 	}
 }
 
-.tree-local-navigation {
+:is(.tree-local-navigation, .mobile-site-nav, .page-contents-navigation) {
 	--tree-disclosure-icon-width: 0.9rem;
 	--tree-disclosure-gap: 0.6rem;
 	--tree-disclosure-offset: calc(var(--tree-disclosure-icon-width) + var(--tree-disclosure-gap));
@@ -57,6 +57,9 @@
 		var(--color-surface-soft-background) 58%,
 		var(--color-page)
 	);
+}
+
+.tree-local-navigation {
 	position: sticky;
 	top: calc(var(--site-top-anchor-offset) + 1.25rem);
 	z-index: 3;
@@ -177,13 +180,23 @@
 	display: none;
 }
 
-:root[data-appearance='dark'] .tree-local-navigation {
-	--tree-current-item-background: var(--color-surface-soft-background);
+:root[data-appearance='dark']
+	:is(.tree-local-navigation, .mobile-site-nav, .page-contents-navigation) {
+	--tree-current-item-background: color-mix(
+		in srgb,
+		var(--color-surface-emphasis-background) 64%,
+		var(--color-surface-soft-background)
+	);
 }
 
 @media (prefers-color-scheme: dark) {
-	:root[data-appearance='system'] .tree-local-navigation {
-		--tree-current-item-background: var(--color-surface-soft-background);
+	:root[data-appearance='system']
+		:is(.tree-local-navigation, .mobile-site-nav, .page-contents-navigation) {
+		--tree-current-item-background: color-mix(
+			in srgb,
+			var(--color-surface-emphasis-background) 64%,
+			var(--color-surface-soft-background)
+		);
 	}
 }
 
@@ -204,14 +217,6 @@
 	overscroll-behavior: contain;
 }
 
-.page-contents-navigation-inline {
-	display: none;
-	width: min(100%, var(--reader-text-width, var(--page-text-width, var(--text-width))));
-	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
-	border-block: 1px solid var(--color-nav-separator);
-	padding: 0.85rem 0;
-}
-
 .page-contents-navigation-label {
 	margin: 0 0 0.65rem;
 	color: var(--color-primary-text);
@@ -221,7 +226,7 @@
 	line-height: 1.3;
 }
 
-@media (min-width: 701px) and (max-width: 1100px) {
+@media (min-width: 961px) and (max-width: 1280px) {
 	.site-page-layout-tree {
 		--tree-layout-width: max(var(--page-width), 76rem);
 		grid-template-columns: var(--tree-navigation-width) minmax(0, 1fr);
@@ -230,9 +235,30 @@
 	.page-contents-navigation-rail {
 		display: none;
 	}
+}
+
+@media (min-width: 1281px) {
+	.site-page-layout-tree[data-page-contents-placement='contents-rail']
+		.tree-local-navigation .navigation-page-sections,
+	.site-page-layout-tree[data-page-contents-placement='contents-rail']
+		.tree-local-navigation .navigation-page-sections-disclosure {
+		display: none;
+	}
+}
 
-	.page-contents-navigation-inline {
+@media (max-width: 960px) {
+	.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));
+	}
+
+	.tree-local-navigation,
+	.page-contents-navigation {
+		display: none;
 	}
 }
 
@@ -593,6 +619,12 @@
 	text-underline-offset: 0.25em;
 }
 
+.page-contents-navigation-rail .page-contents-links a[aria-current='location'] {
+	border-radius: var(--corner-radius-small, 2px);
+	background: var(--tree-current-item-background);
+	box-shadow: 0 0 0 0.2rem var(--tree-current-item-background);
+}
+
 .page-contents-links a[aria-current='location']::before {
 	position: absolute;
 	top: 0.15em;

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;
 	}
@@ -511,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,
@@ -571,10 +569,23 @@
 	.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;
@@ -587,6 +598,42 @@
 		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;