@janga/norna 0.7.24 → 0.7.25

package/src/styles/content.css

@@ -351,33 +351,306 @@ ul {
 	margin-bottom: var(--space-content-block-gap);
 }
 
-.section-markdown table {
-	display: block;
+.norna-table-frame {
+	position: relative;
+	width: 100%;
+	margin-block: var(--section-body-paragraph-spacing, 0.85em);
+	margin-inline: 0;
+	color: inherit;
+}
+
+.section-markdown > .norna-table-frame {
+	--table-prose-width: 100%;
+	--table-end-width: calc((100cqi + var(--layout-reading-width)) / 2);
+	--table-canvas-width: 100cqi;
+	--table-canvas-inline-offset: calc((var(--layout-reading-width) - 100cqi) / 2);
+	width: var(--table-end-width);
+}
+
+.section-markdown > .norna-table-frame[data-table-layout='prose'] {
+	width: var(--table-prose-width);
+}
+
+.section-markdown > .norna-table-frame[data-table-layout='end'] {
+	width: var(--table-end-width);
+}
+
+.section-markdown > .norna-table-frame[data-table-layout='canvas'] {
+	width: var(--table-canvas-width);
+	margin-inline-start: var(--table-canvas-inline-offset);
+}
+
+.norna-table-scroll {
+	width: 100%;
 	max-width: 100%;
-	margin: var(--section-body-paragraph-spacing, 0.85em) 0;
-	border-collapse: collapse;
-	font-size: 0.92em;
-	line-height: 1.45;
+	border-inline: 1px solid transparent;
 	overflow-x: auto;
+	overflow-y: hidden;
 	overscroll-behavior-inline: contain;
 	scrollbar-gutter: stable;
 }
 
-.section-markdown :is(th, td) {
+.norna-table-scroll:focus-visible {
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
+	outline-offset: 2px;
+}
+
+.norna-table-navigation {
+	position: sticky;
+	top: var(--site-top-anchor-offset);
+	z-index: 5;
+	display: flex;
+	min-height: 2.75rem;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0;
+	background: var(--section-background-color, var(--color-page));
+	color: inherit;
+	pointer-events: none;
+}
+
+.norna-table-navigation[hidden] {
+	display: none;
+}
+
+.norna-table-navigation-buttons {
+	display: flex;
+	gap: 0.125rem;
+	background: transparent;
+	pointer-events: auto;
+}
+
+.norna-table-navigation button {
+	position: relative;
+	display: grid;
+	width: 2.75rem;
+	height: 2.75rem;
+	place-items: center;
+	border: 0;
+	border-radius: var(--corner-radius-small, 2px);
+	padding: 0;
+	background: transparent;
+	color: var(--section-secondary-text-color, var(--color-secondary-text));
+	cursor: pointer;
+}
+
+.norna-table-navigation button::before {
+	position: absolute;
+	inset: 0.3rem;
+	border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
+	border-radius: var(--corner-radius-small, 2px);
+	background: color-mix(
+		in srgb,
+		var(--color-surface-soft-background) 52%,
+		var(--section-background-color, var(--color-page))
+	);
+	content: '';
+}
+
+.norna-table-navigation button svg {
+	position: relative;
+	z-index: 1;
+}
+
+.norna-table-navigation button:hover:not(:disabled),
+.norna-table-navigation button:active:not(:disabled) {
+	color: var(--color-surface-emphasis-text);
+}
+
+.norna-table-navigation button:hover:not(:disabled)::before,
+.norna-table-navigation button:active:not(:disabled)::before {
+	border-color: var(--color-border);
+	background: var(--color-surface-emphasis-background);
+}
+
+.norna-table-navigation button:focus-visible {
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
+	outline-offset: 2px;
+	box-shadow: 0 0 0 calc(var(--focus-indicator-width) * 2) var(--color-focus-ring-contrast);
+}
+
+.norna-table-navigation button:disabled {
+	cursor: not-allowed;
+	opacity: 0.42;
+}
+
+.norna-table-frame:dir(rtl) .norna-table-navigation button svg {
+	transform: scaleX(-1);
+}
+
+.norna-table-sticky-heading {
+	display: none;
+	position: sticky;
+	z-index: 4;
+	top: calc(var(--site-top-anchor-offset) + var(--table-navigation-height, 0px));
+	width: 100%;
+	height: var(--table-sticky-heading-height, 0px);
+	overflow: hidden;
+	background: var(--section-background-color, var(--color-page));
+	pointer-events: none;
+}
+
+.norna-table-frame[data-table-overflow='true'][data-table-sticky-heading='true']
+	> .norna-table-sticky-heading {
+	display: block;
+}
+
+.norna-table-frame[data-table-overflow='true'][data-table-sticky-heading='true']
+	> .norna-table-scroll {
+	margin-block-start: calc(0px - var(--table-sticky-heading-height, 0px));
+}
+
+.norna-table-sticky-heading-track {
+	position: absolute;
+	top: 0;
+	left: 0;
+	transform: translateX(0);
+	transform-origin: left top;
+	will-change: transform;
+}
+
+.norna-table-sticky-heading-cell {
+	position: absolute;
+	overflow: hidden;
+	border-bottom: 1px solid color-mix(in srgb, currentColor 48%, transparent);
+	background: var(--section-background-color, var(--color-page));
+	color: inherit;
+}
+
+.norna-table-frame::before,
+.norna-table-frame::after {
+	position: absolute;
+	z-index: 3;
+	top: var(--table-navigation-height, 0px);
+	bottom: 0.75rem;
+	width: 2rem;
+	content: "";
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 120ms ease;
+}
+
+.norna-table-frame::before {
+	inset-inline-start: 0;
+	background: linear-gradient(
+		to right,
+		color-mix(in srgb, var(--section-background-color, var(--color-page)) 98%, transparent),
+		transparent
+	);
+	box-shadow: inset 0.5rem 0 0.7rem -0.65rem color-mix(in srgb, currentColor 62%, transparent);
+}
+
+.norna-table-frame::after {
+	inset-inline-end: 0;
+	background: linear-gradient(
+		to left,
+		color-mix(in srgb, var(--section-background-color, var(--color-page)) 98%, transparent),
+		transparent
+	);
+	box-shadow: inset -0.5rem 0 0.7rem -0.65rem color-mix(in srgb, currentColor 62%, transparent);
+}
+
+.norna-table-frame:dir(rtl)::before {
+	background: linear-gradient(
+		to left,
+		color-mix(in srgb, var(--section-background-color, var(--color-page)) 98%, transparent),
+		transparent
+	);
+	box-shadow: inset -0.5rem 0 0.7rem -0.65rem color-mix(in srgb, currentColor 62%, transparent);
+}
+
+.norna-table-frame:dir(rtl)::after {
+	background: linear-gradient(
+		to right,
+		color-mix(in srgb, var(--section-background-color, var(--color-page)) 98%, transparent),
+		transparent
+	);
+	box-shadow: inset 0.5rem 0 0.7rem -0.65rem color-mix(in srgb, currentColor 62%, transparent);
+}
+
+.norna-table-frame[data-table-at-end='true']::after {
+	opacity: 0;
+}
+
+.norna-table-frame[data-table-overflow='true'][data-table-at-end='false']::after,
+.norna-table-frame[data-table-overflow='true'][data-table-at-start='false']::before {
+	opacity: 1;
+}
+
+.norna-table-frame table {
+	display: table;
+	width: auto;
+	max-width: none;
+	margin: 0;
+	border-collapse: collapse;
+	font-size: 0.92em;
+	line-height: 1.45;
+}
+
+.section-markdown
+	> .norna-table-frame[data-table-layout='canvas'][data-table-overflow='false'] table {
+	margin-inline-start: auto;
+}
+
+.norna-table-frame :is(th, td) {
 	border-bottom: 1px solid color-mix(in srgb, currentColor 24%, transparent);
 	padding: 0.65rem 0.75rem;
 	text-align: left;
 	vertical-align: top;
 }
 
-.section-markdown thead th {
+.norna-table-frame thead th {
 	border-bottom-color: color-mix(in srgb, currentColor 48%, transparent);
+	background: var(--section-background-color, var(--color-page));
+}
+
+.section-markdown > .norna-table-frame[data-table-overflow='false'] .norna-table-scroll {
+	overflow: visible;
+}
+
+.section-markdown > .norna-table-frame[data-table-overflow='false'] thead th {
+	position: sticky;
+	top: var(--site-top-anchor-offset);
+	z-index: 2;
 }
 
-:root[data-focus-reading='on'] :is(
-	.site-nav-leading,
+@media (min-width: 961px) {
+	.site-page-layout-tree .section-markdown > .norna-table-frame {
+		--table-end-width: 100cqi;
+		--table-canvas-width: var(--table-end-width);
+		--table-canvas-inline-offset: 0px;
+	}
+
+	:root[data-reader-preferences-ready='true'][data-focus-reading='on']
+		.site-page-layout-tree .section-markdown > .norna-table-frame {
+		--table-canvas-width: calc(100cqi + var(--tree-navigation-width) + var(--tree-layout-gap));
+		--table-canvas-inline-offset: calc(0px - var(--tree-navigation-width) - var(--tree-layout-gap));
+	}
+}
+
+@media (min-width: 1101px) {
+	:root[data-reader-preferences-ready='true'][data-focus-reading='on']
+		.site-page-layout-tree .section-markdown > .norna-table-frame {
+		--table-end-width: calc(100cqi + var(--contents-navigation-width) + var(--tree-layout-gap));
+		--table-canvas-width: calc(
+			100cqi
+			+ var(--tree-navigation-width)
+			+ var(--contents-navigation-width)
+			+ (var(--tree-layout-gap) * 2)
+		);
+		--table-canvas-inline-offset: calc(0px - var(--tree-navigation-width) - var(--tree-layout-gap));
+	}
+}
+
+@media (min-width: 1281px) {
+	.site-page-layout-tree:not(.site-page-layout-contents) .section-markdown > .norna-table-frame {
+		--table-end-width: calc(100cqi + var(--contents-navigation-width) + var(--tree-layout-gap));
+		--table-canvas-width: var(--table-end-width);
+	}
+}
+
+:root[data-reader-preferences-ready='true'][data-focus-reading='on'] :is(
 	.site-nav,
-	.mobile-nav-menu,
 	.page-nav,
 	.tree-local-navigation,
 	.page-contents-navigation,
@@ -387,36 +660,33 @@ ul {
 	display: none !important;
 }
 
-:root[data-focus-reading='on'] .site-nav-row {
-	justify-content: flex-end;
-}
-
-@media (min-width: 701px) {
-	:root[data-focus-reading='on'] .site-page-layout-tree {
+@media (min-width: 961px) {
+	:root[data-reader-preferences-ready='true'][data-focus-reading='on'] .site-page-layout-tree {
 		display: grid;
 		grid-template-columns: var(--tree-navigation-width) minmax(0, 1fr);
 		gap: var(--tree-layout-gap);
 		width: min(calc(100% - (var(--content-gutter) * 2)), var(--tree-layout-width));
 	}
 
-	:root[data-focus-reading='on'] .site-page-layout-tree > .site-content {
+	:root[data-reader-preferences-ready='true'][data-focus-reading='on'] .site-page-layout-tree > .site-content {
 		grid-column: 2;
 		width: 100%;
 	}
 
-	:root[data-focus-reading='on'] .site-page-layout-tree .site-section::before {
+	:root[data-reader-preferences-ready='true'][data-focus-reading='on'] .site-page-layout-tree .site-section::before {
 		left: 0;
 		right: calc(0px - var(--tree-layout-outer-margin));
 	}
 }
 
 @media (min-width: 1101px) {
-	:root[data-focus-reading='on'] .site-page-layout-tree {
+	:root[data-reader-preferences-ready='true'][data-focus-reading='on'] .site-page-layout-tree {
 		grid-template-columns: var(--tree-navigation-width) minmax(0, 1fr) var(--contents-navigation-width);
 	}
 }
 
-:root[data-focus-reading='on'] .site-content-has-breadcrumbs > .site-section:first-of-type {
+:root[data-reader-preferences-ready='true'][data-focus-reading='on']
+	.site-content-has-breadcrumbs > .site-section:first-of-type {
 	padding-top: var(--space-nav-to-first-section);
 }
 
@@ -510,16 +780,21 @@ ul {
 	margin: 0 0 var(--section-body-paragraph-spacing, 1em);
 	border: 1px solid color-mix(in srgb, var(--color-code-text) 18%, transparent);
 	border-radius: var(--corner-radius-medium, 6px);
-	overflow: hidden;
+	overflow: visible;
 	background: var(--color-code-background);
 	color: var(--color-code-text);
 }
 
 .section-markdown .norna-code-title {
+	position: sticky;
+	top: var(--site-top-anchor-offset);
+	z-index: 2;
 	min-height: 3.25rem;
 	margin: 0;
 	padding: 0.85rem 3.85rem 0.75rem 0.9rem;
 	border-bottom: 1px solid color-mix(in srgb, var(--color-code-text) 22%, transparent);
+	border-radius: calc(var(--corner-radius-medium, 6px) - 1px) calc(var(--corner-radius-medium, 6px) - 1px) 0 0;
+	background: var(--color-code-background);
 	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 	font-size: 0.82rem;
 	font-weight: 650;
@@ -530,7 +805,7 @@ ul {
 .section-markdown .norna-code-example > pre.astro-code {
 	margin: 0;
 	border: 0;
-	border-radius: 0;
+	border-radius: 0 0 calc(var(--corner-radius-medium, 6px) - 1px) calc(var(--corner-radius-medium, 6px) - 1px);
 }
 
 .section-markdown .norna-code-example.code-block > pre.astro-code {

package/src/styles/media.css

@@ -25,7 +25,7 @@
 	margin-bottom: var(--space-content-block-gap);
 }
 
-.section-body > :is(.image-stack, .managed-images, .card-list) {
+.content-block-note-lane-boundary {
 	clear: both;
 }
 
@@ -215,7 +215,7 @@
 	min-width: 0;
 }
 
-@media (min-width: 701px) {
+@media (min-width: 961px) {
 	:root[data-image-presentation='prose-aligned'] .site-page-layout-tree .section-body {
 		grid-template-columns: minmax(0, var(--layout-reading-width)) minmax(0, 1fr);
 	}
@@ -227,16 +227,44 @@
 
 .managed-image-item {
 	display: grid;
-	gap: 0.55rem;
+	gap: 0;
 	align-content: start;
 	margin: 0;
 }
 
+.image-stack {
+	--image-caption-inline-gap: 0.75rem;
+}
+
 .image-stack .managed-image-item {
 	width: var(--layout-stack-item-width);
 	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
 }
 
+@media (min-width: 1101px) {
+	.image-stack .managed-image-item[data-image-caption-placement='persistent'] {
+		position: relative;
+		padding-block-end: var(--image-persistent-caption-reserve, 0);
+	}
+
+	.image-stack .managed-image-item[data-image-caption-placement='persistent'] > .image-meta {
+		position: absolute;
+		inset-block-start: var(--image-persistent-caption-block-start, 0);
+		inset-block-end: var(--image-persistent-caption-block-end, 0);
+		inset-inline-start: var(--image-persistent-caption-inline-start);
+		width: var(--image-persistent-caption-width, var(--section-note-width, 12rem));
+		margin: 0;
+		text-align: start;
+	}
+
+	.image-stack .managed-image-item[data-image-caption-placement='persistent'] > .image-meta .image-details {
+		position: sticky;
+		top: calc(var(--site-top-anchor-offset) + 1rem);
+		display: block;
+		padding: 0;
+	}
+}
+
 .managed-image-frame {
 	display: grid;
 	width: var(--layout-media-width);
@@ -246,6 +274,57 @@
 	place-items: center;
 }
 
+.managed-image-inspection-link {
+	position: relative;
+	display: grid;
+	width: min(100%, var(--managed-image-intrinsic-width, 100%));
+	max-width: 100%;
+	place-items: center;
+	color: inherit;
+}
+
+:root[data-image-presentation='centered-fit'] .managed-image-inspection-link {
+	width: min(
+		100%,
+		var(--managed-image-intrinsic-width, 100%),
+		calc(var(--image-max-height) * var(--managed-image-aspect-ratio, 100))
+	);
+}
+
+.managed-image-inspection-link:focus-visible {
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
+	outline-offset: 0.35rem;
+	box-shadow: 0 0 0 calc(var(--focus-indicator-width) * 2) var(--color-focus-ring-contrast);
+}
+
+.managed-image-inspection-link[data-image-inspection-available='true'] {
+	cursor: zoom-in;
+}
+
+.managed-image-inspection-affordance {
+	position: absolute;
+	top: 0.65rem;
+	right: 0.65rem;
+	display: none;
+	width: 2.25rem;
+	height: 2.25rem;
+	place-items: center;
+	border-radius: 999px;
+	background: var(--color-control-background);
+	box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 18%);
+	color: var(--color-control-text);
+	pointer-events: none;
+}
+
+.managed-image-inspection-link[data-image-inspection-available='true'] .managed-image-inspection-affordance {
+	display: grid;
+}
+
+.managed-image-inspection-affordance svg {
+	width: 1.125rem;
+	height: 1.125rem;
+}
+
 .managed-image {
 	display: block;
 	width: auto;
@@ -257,6 +336,111 @@
 	object-fit: contain;
 }
 
+:root[data-image-inspector-open='true'] {
+	overflow: hidden;
+}
+
+.image-inspector {
+	width: min(calc(100% - 2rem), 96rem);
+	height: calc(100svh - 2rem);
+	max-width: none;
+	max-height: none;
+	margin: auto;
+	border: 1px solid var(--color-border);
+	border-radius: var(--corner-radius-large, 8px);
+	padding: 0;
+	background: var(--color-page);
+	color: var(--color-primary-text);
+	box-shadow: 0 1rem 3rem rgb(0 0 0 / 28%);
+	overflow: hidden;
+}
+
+.image-inspector::backdrop {
+	background: rgb(0 0 0 / 62%);
+}
+
+.image-inspector-layout {
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr) auto;
+	gap: 0.75rem;
+	height: 100%;
+	padding: 0.75rem;
+}
+
+.image-inspector-controls {
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.5rem;
+}
+
+.image-inspector-controls button {
+	display: grid;
+	width: 2.75rem;
+	height: 2.75rem;
+	place-items: center;
+	border: 1px solid var(--color-border);
+	border-radius: var(--corner-radius-small, 2px);
+	padding: 0;
+	background: var(--color-surface-soft-background);
+	color: var(--color-surface-soft-text);
+	cursor: pointer;
+}
+
+.image-inspector-controls button:hover,
+.image-inspector-controls button:active {
+	background: var(--color-surface-emphasis-background);
+	color: var(--color-surface-emphasis-text);
+}
+
+.image-inspector-controls button:focus-visible {
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
+	outline-offset: 2px;
+	box-shadow: 0 0 0 calc(var(--focus-indicator-width) * 2) var(--color-focus-ring-contrast);
+}
+
+.image-inspector-controls [hidden] {
+	display: none;
+}
+
+.image-inspector-media {
+	display: grid;
+	min-width: 0;
+	min-height: 0;
+	place-items: center;
+	overflow: auto;
+	overscroll-behavior: contain;
+}
+
+.image-inspector-media img {
+	display: block;
+	width: auto;
+	height: auto;
+	margin: auto;
+}
+
+.image-inspector-media[data-image-inspector-mode='fit'] img {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.image-inspector-media[data-image-inspector-mode='actual'] {
+	display: block;
+}
+
+.image-inspector-media[data-image-inspector-mode='actual'] img {
+	max-width: none;
+	max-height: none;
+}
+
+.image-inspector-caption {
+	max-width: 72ch;
+	margin: 0 auto;
+	color: var(--color-secondary-text);
+	font-size: 0.95rem;
+	line-height: 1.5;
+	text-align: center;
+}
+
 .managed-image.managed-image-landscape {
 	width: 100%;
 	max-height: none;