@janga/norna 0.7.22 → 0.7.24

package/src/styles/page-layout.css

@@ -0,0 +1,786 @@
+/* Page frame, tree navigation, breadcrumbs, and shared layout coordinates. */
+
+.site-content {
+	/* Shared coordinates keep prose and structured blocks on the same axis. */
+	--layout-inline-start-margin: auto;
+	--layout-inline-end-margin: auto;
+	--layout-stack-item-width: 100%;
+	position: relative;
+	z-index: 2;
+	width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
+	margin: 0 auto;
+	padding: 0;
+}
+
+.site-page-layout:not(.site-page-layout-tree) {
+	display: contents;
+}
+
+.site-page-layout-tree {
+	--tree-layout-width: max(var(--page-width), 86rem);
+	--tree-layout-outer-margin: max(var(--content-gutter), calc((100vw - var(--tree-layout-width)) / 2));
+	--tree-navigation-width: 14rem;
+	--contents-navigation-width: 11rem;
+	--tree-layout-gap: var(--local-navigation-gap, clamp(1.5rem, 3vw, 3rem));
+	display: grid;
+	grid-template-columns: var(--tree-navigation-width) minmax(0, 1fr) var(--contents-navigation-width);
+	align-items: start;
+	gap: var(--tree-layout-gap);
+	min-height: calc(100svh - var(--site-top-anchor-offset));
+	width: min(calc(100% - (var(--content-gutter) * 2)), var(--tree-layout-width));
+	margin: 0 auto;
+}
+
+.site-page-layout-tree > .site-content {
+	width: 100%;
+	min-width: 0;
+}
+
+.site-page-layout-tree .site-section {
+	background-color: transparent;
+}
+
+@media (min-width: 701px) {
+	.site-page-layout-tree > .site-content {
+		--layout-inline-start-margin: 0;
+		--layout-inline-end-margin: auto;
+		--layout-stack-item-width: min(100%, var(--image-layout-width));
+	}
+}
+
+.tree-local-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));
+	--tree-current-item-background: color-mix(
+		in srgb,
+		var(--color-surface-soft-background) 58%,
+		var(--color-page)
+	);
+	position: sticky;
+	top: calc(var(--site-top-anchor-offset) + 1.25rem);
+	z-index: 3;
+	min-height: 0;
+	max-height: calc(100svh - var(--site-top-anchor-offset) - 2.5rem);
+	border-inline-end: 1px solid var(--color-nav-separator);
+	padding: 1.25rem 0.75rem 1.25rem 0.35rem;
+	background: var(--color-page);
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	scrollbar-gutter: stable;
+}
+
+.navigation-tree-controls {
+	position: sticky;
+	top: 0;
+	z-index: 4;
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	gap: 0.45rem;
+	margin: 0 0 0.85rem;
+	border-bottom: 1px solid var(--color-nav-separator);
+	padding: 0 0 0.75rem;
+	background: var(--color-page);
+}
+
+.navigation-tree-filter {
+	position: relative;
+	grid-column: 1 / -1;
+	display: flex;
+	align-items: center;
+}
+
+.navigation-tree-filter > svg {
+	position: absolute;
+	left: 0.55rem;
+	width: 0.95rem;
+	height: 0.95rem;
+	pointer-events: none;
+	opacity: 0.62;
+}
+
+.navigation-tree-filter > input {
+	min-width: 0;
+	width: 100%;
+	min-height: 2.15rem;
+	border: 1px solid var(--color-border);
+	border-radius: var(--corner-radius-small, 2px);
+	padding: 0.4rem 0.55rem 0.4rem 1.85rem;
+	background: var(--color-page);
+	color: var(--color-primary-text);
+	font: inherit;
+	font-size: 0.78rem;
+	letter-spacing: 0;
+}
+
+.navigation-tree-filter > input::placeholder {
+	color: var(--color-secondary-text);
+	opacity: 0.8;
+}
+
+.navigation-tree-filter > input:focus-visible {
+	outline: 2px solid var(--color-focus-ring);
+	outline-offset: 2px;
+}
+
+.navigation-tree-commands {
+	grid-column: 1 / -1;
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.35rem;
+}
+
+.navigation-tree-commands > button {
+	display: grid;
+	place-items: center;
+	width: 2.15rem;
+	height: 2.15rem;
+	border: 1px solid var(--color-border);
+	border-radius: var(--corner-radius-small, 2px);
+	padding: 0;
+	background: var(--color-page);
+	color: var(--color-secondary-text);
+	cursor: pointer;
+}
+
+.navigation-tree-commands > button:hover,
+.navigation-tree-commands > button:focus-visible {
+	background: var(--color-surface-soft-background);
+	color: var(--color-primary-text);
+}
+
+.navigation-tree-commands > button:focus-visible {
+	outline: 2px solid var(--color-focus-ring);
+	outline-offset: 2px;
+}
+
+.navigation-tree-commands > button:disabled {
+	cursor: not-allowed;
+	opacity: 0.38;
+}
+
+.navigation-tree-commands svg {
+	width: 1rem;
+	height: 1rem;
+}
+
+.navigation-tree-filter-empty {
+	grid-column: 1 / -1;
+	margin: 0.2rem 0 0;
+	color: var(--color-secondary-text);
+	font-size: 0.75rem;
+	line-height: 1.4;
+}
+
+[data-tree-filter-active='true'] .navigation-page-sections,
+[data-tree-filter-active='true'] .navigation-page-sections-disclosure {
+	display: none;
+}
+
+:root[data-appearance='dark'] .tree-local-navigation {
+	--tree-current-item-background: 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);
+	}
+}
+
+.page-contents-navigation {
+	color: var(--color-secondary-text);
+}
+
+.page-contents-navigation-rail {
+	position: sticky;
+	top: calc(var(--site-top-anchor-offset) + 1.25rem);
+	z-index: 3;
+	min-height: 0;
+	max-height: calc(100svh - var(--site-top-anchor-offset) - 2.5rem);
+	border-inline-start: 1px solid var(--color-nav-separator);
+	padding: 1.5rem 0 1.5rem 1rem;
+	background: var(--color-page);
+	overflow-y: auto;
+	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);
+	font-size: 0.7rem;
+	font-weight: 700;
+	letter-spacing: 0;
+	line-height: 1.3;
+}
+
+@media (min-width: 701px) and (max-width: 1100px) {
+	.site-page-layout-tree {
+		--tree-layout-width: max(var(--page-width), 76rem);
+		grid-template-columns: var(--tree-navigation-width) minmax(0, 1fr);
+	}
+
+	.page-contents-navigation-rail {
+		display: none;
+	}
+
+	.page-contents-navigation-inline {
+		display: block;
+	}
+}
+
+.navigation-page-sections {
+	margin: 0.1rem 0 0.45rem 0.25rem;
+	border-left: 1px solid color-mix(in srgb, currentColor 26%, transparent);
+	padding: 0.15rem 0 0.2rem 0.75rem;
+}
+
+.navigation-page-tree-sidebar
+	.navigation-page-sections-disclosure > .navigation-page-sections {
+	margin-inline-start: var(--tree-disclosure-offset);
+}
+
+.navigation-page-sections-disclosure > summary {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: grid;
+	place-items: center;
+	width: var(--tree-disclosure-offset);
+	height: 1.95rem;
+	border: 0;
+	border-radius: var(--corner-radius-small, 2px);
+	list-style: none;
+	cursor: pointer;
+	color: var(--color-secondary-text);
+}
+
+.navigation-page-sections-disclosure > summary::-webkit-details-marker {
+	display: none;
+}
+
+.navigation-page-sections-disclosure > summary:hover,
+.navigation-page-sections-disclosure > summary:focus-visible {
+	background: color-mix(in srgb, currentColor 8%, transparent);
+	color: var(--color-primary-text);
+}
+
+.navigation-page-sections-disclosure[open]
+	> summary .navigation-page-chevron::before {
+	transform: rotate(90deg);
+}
+
+.navigation-page-tree,
+.page-contents-links {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.navigation-page-node {
+	position: relative;
+}
+
+.navigation-page-node[hidden] {
+	display: none !important;
+}
+
+.navigation-page-tree-sidebar .navigation-page-link {
+	display: block;
+	border-radius: var(--corner-radius-small, 2px);
+	padding: 0.375rem 0.3rem 0.375rem var(--tree-disclosure-offset);
+	color: var(--color-secondary-text);
+	font-size: 0.84rem;
+	font-weight: 400;
+	line-height: 1.4;
+	text-decoration: none;
+}
+
+.tree-local-navigation
+	> nav
+	> .navigation-page-tree-sidebar
+	> .navigation-page-node
+	> .navigation-page-link {
+	color: var(--color-primary-text);
+	font-size: 0.9rem;
+	font-weight: 650;
+}
+
+.navigation-page-tree-sidebar .navigation-page-link:hover,
+.navigation-page-tree-sidebar .navigation-page-link:focus-visible {
+	background: color-mix(in srgb, var(--color-surface-soft-background) 68%, transparent);
+	color: var(--color-primary-text);
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.28em;
+}
+
+.navigation-page-tree-sidebar .navigation-page-link[aria-current='page'] {
+	background: var(--tree-current-item-background);
+	color: var(--color-primary-text);
+	font-weight: 650;
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.28em;
+}
+
+.navigation-page-tree-sidebar .navigation-page-tree-sidebar {
+	margin: 0.15rem 0 0.2rem 0.25rem;
+	border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+	padding-left: 0.75rem;
+}
+
+.navigation-page-disclosure > .navigation-page-summary {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	border: 0;
+	border-radius: var(--corner-radius-small, 2px);
+	padding: 0.375rem 0.3rem 0.375rem 0;
+	font-size: 0.84rem;
+	font-weight: 400;
+	line-height: 1.4;
+	list-style: none;
+	cursor: pointer;
+	color: var(--color-secondary-text);
+}
+
+.navigation-page-disclosure > .navigation-page-summary > .navigation-page-summary-title {
+	min-width: 0;
+	width: calc(100% - 2rem);
+	overflow-wrap: anywhere;
+}
+
+.navigation-page-disclosure {
+	position: relative;
+}
+
+.navigation-page-disclosure-sidebar.navigation-category-disclosure {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+}
+
+.navigation-page-disclosure-sidebar.navigation-category-disclosure
+	> .navigation-page-summary {
+	display: grid;
+	grid-template-columns: var(--tree-disclosure-icon-width) minmax(0, 1fr);
+	column-gap: var(--tree-disclosure-gap);
+	justify-content: normal;
+}
+
+.navigation-page-disclosure-sidebar.navigation-category-disclosure
+	> .navigation-page-summary > .navigation-page-summary-title {
+	grid-column: 2;
+	width: auto;
+}
+
+.navigation-page-disclosure-sidebar.navigation-category-disclosure
+	> .navigation-page-summary > .navigation-page-chevron {
+	grid-column: 1;
+	grid-row: 1;
+	display: grid;
+	place-items: center;
+	width: var(--tree-disclosure-icon-width);
+	height: 1.35em;
+}
+
+.navigation-page-node-page-disclosure {
+	display: grid;
+	grid-template-columns: var(--tree-disclosure-offset) minmax(0, 1fr);
+}
+
+.navigation-page-node-page-disclosure
+	> .navigation-page-disclosure
+	> .navigation-page-summary {
+	grid-column: 1;
+	grid-row: 1;
+	display: grid;
+	place-items: center;
+	width: 100%;
+	min-height: 1.95rem;
+	padding: 0;
+}
+
+.navigation-page-node-page-disclosure > .navigation-page-disclosure {
+	grid-column: 1;
+	grid-row: 1;
+}
+
+.navigation-page-node-page-disclosure > .navigation-page-open-link {
+	grid-column: 2;
+	grid-row: 1;
+}
+
+.navigation-page-node-page-disclosure > .navigation-page-branch-content {
+	grid-column: 1 / -1;
+	grid-row: 2;
+}
+
+.navigation-page-node-page-disclosure
+	> .navigation-page-disclosure:not([open])
+	~ .navigation-page-branch-content {
+	display: none;
+}
+
+.navigation-page-disclosure > .navigation-page-summary::-webkit-details-marker {
+	display: none;
+}
+
+.navigation-page-disclosure > .navigation-page-summary:hover,
+.navigation-page-disclosure > .navigation-page-summary:focus-visible {
+	background: color-mix(in srgb, var(--color-surface-soft-background) 68%, transparent);
+	color: var(--color-primary-text);
+}
+
+.navigation-page-disclosure[data-current-page='true'] > .navigation-page-summary {
+	background: var(--tree-current-item-background);
+	color: var(--color-primary-text);
+	font-weight: 650;
+}
+
+.navigation-page-disclosure[data-current-page='true'] + .navigation-page-open-link {
+	background: var(--tree-current-item-background);
+}
+
+.navigation-page-disclosure > .navigation-page-summary:hover > :first-child,
+.navigation-page-disclosure > .navigation-page-summary:focus-visible > :first-child,
+.navigation-page-disclosure[data-current-page='true'] > .navigation-page-summary > :first-child {
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.28em;
+}
+
+.navigation-category-disclosure[data-current-branch='true'] > .navigation-page-summary {
+	color: var(--color-primary-text);
+	font-weight: 600;
+}
+
+.navigation-page-open-link {
+	display: block;
+	min-width: 0;
+	width: 100%;
+	border-radius: var(--corner-radius-small, 2px);
+	padding: 0.375rem 0.3rem 0.375rem 0;
+	color: var(--color-secondary-text);
+	font-size: 0.84rem;
+	font-weight: 400;
+	line-height: 1.4;
+	overflow: visible;
+	overflow-wrap: anywhere;
+	text-decoration: none;
+	white-space: normal;
+}
+
+.navigation-page-node-page-disclosure > .navigation-page-open-link {
+	width: 100%;
+}
+
+.navigation-page-open-link:hover,
+.navigation-page-open-link:focus-visible {
+	background: color-mix(in srgb, var(--color-surface-soft-background) 68%, transparent);
+	color: var(--color-primary-text);
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.28em;
+}
+
+.navigation-page-open-link[aria-current='page'] {
+	color: var(--color-primary-text);
+	font-weight: 650;
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.28em;
+}
+
+.navigation-page-chevron::before {
+	display: block;
+	content: "›";
+	font-size: 1.15rem;
+	line-height: 1;
+	transition: transform 140ms ease;
+}
+
+.navigation-page-disclosure[open] > .navigation-page-summary .navigation-page-chevron::before {
+	transform: rotate(90deg);
+}
+
+.navigation-page-tree-sidebar .navigation-page-chevron::before {
+	width: 0.38rem;
+	height: 0.38rem;
+	border-right: 1.5px solid currentColor;
+	border-bottom: 1.5px solid currentColor;
+	content: '';
+	transform: rotate(-45deg);
+}
+
+.navigation-page-tree-sidebar
+	.navigation-page-disclosure[open]
+	> .navigation-page-summary .navigation-page-chevron::before,
+.navigation-page-tree-sidebar
+	.navigation-page-sections-disclosure[open]
+	> summary .navigation-page-chevron::before {
+	transform: rotate(45deg);
+}
+
+.tree-local-navigation
+	> nav
+	> .navigation-page-tree-sidebar
+	> .navigation-page-node
+	> .navigation-page-disclosure
+	> .navigation-page-summary {
+	color: var(--color-primary-text);
+	font-size: 0.9rem;
+	font-weight: 650;
+}
+
+.tree-local-navigation
+	> nav
+	> .navigation-page-tree-sidebar
+	> .navigation-page-node
+	> .navigation-page-open-link {
+	color: var(--color-primary-text);
+	font-size: 0.9rem;
+	font-weight: 650;
+}
+
+.navigation-page-tree-sidebar .navigation-page-disclosure > .navigation-page-branch-content,
+.navigation-page-tree-sidebar .navigation-page-node-page-disclosure > .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-sidebar .navigation-page-disclosure .navigation-page-tree-sidebar,
+.navigation-page-tree-sidebar .navigation-page-branch-content > .navigation-page-tree-sidebar {
+	margin: 0.15rem 0;
+	border-left: 0;
+	padding-left: 0;
+}
+
+.page-contents-links li + li {
+	margin-top: 0.45rem;
+}
+
+.page-contents-links ol {
+	margin: 0.45rem 0 0;
+	padding-left: 0.8rem;
+	border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+	list-style: none;
+}
+
+.page-contents-links a {
+	position: relative;
+	display: block;
+	color: var(--color-secondary-text);
+	font-size: 0.8rem;
+	line-height: 1.4;
+	text-decoration: none;
+}
+
+.page-contents-links a:hover,
+.page-contents-links a:focus-visible,
+.page-contents-links a[aria-current='location'] {
+	color: var(--color-primary-text);
+	text-decoration: underline;
+	text-underline-offset: 0.25em;
+}
+
+.page-contents-links a[aria-current='location']::before {
+	position: absolute;
+	top: 0.15em;
+	bottom: 0.15em;
+	left: -0.85rem;
+	width: 2px;
+	border-radius: 1px;
+	background: currentColor;
+	content: '';
+}
+
+.navigation-page-tree-sidebar .navigation-page-sections .page-contents-links a {
+	margin-inline: -0.4rem 0.2rem;
+	border-radius: var(--corner-radius-small, 2px);
+	padding-inline: 0.4rem;
+}
+
+.navigation-page-tree-sidebar
+	.navigation-page-sections .page-contents-links a[aria-current='location'] {
+	background: var(--tree-current-item-background);
+	color: var(--color-primary-text);
+	text-decoration-thickness: 1.5px;
+}
+
+.navigation-page-tree-sidebar
+	.navigation-page-sections .page-contents-links a[aria-current='location']::before {
+	content: none;
+}
+
+.site-breadcrumbs {
+	min-height: calc(clamp(1rem, 2.5vw, 1.5rem) + 1.35rem);
+	width: min(100%, var(--reader-text-width, var(--page-text-width, var(--text-width))));
+	margin-block: 0;
+	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
+	padding-top: clamp(1rem, 2.5vw, 1.5rem);
+	font-size: 1rem;
+	line-height: 1.4;
+	overflow: visible;
+}
+
+.site-breadcrumbs ol {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0;
+	margin: 0;
+	padding: 0;
+	font-size: 0.78rem;
+	list-style: none;
+}
+
+.site-breadcrumbs li {
+	display: flex;
+	min-width: 0;
+	align-items: center;
+}
+
+.site-breadcrumbs li:last-child {
+	flex: 0 1 auto;
+}
+
+.site-breadcrumbs li + li::before {
+	margin: 0 0.55rem;
+	content: "/";
+	opacity: 0.38;
+}
+
+.site-breadcrumbs a {
+	display: block;
+	min-width: 0;
+	color: var(--color-secondary-text);
+	overflow: visible;
+	overflow-wrap: anywhere;
+	text-decoration: none;
+}
+
+.site-breadcrumbs a:hover,
+.site-breadcrumbs a:focus-visible {
+	color: var(--color-primary-text);
+	text-decoration: underline;
+	text-underline-offset: 0.25em;
+}
+
+.site-breadcrumbs [aria-current='page'] {
+	display: block;
+	min-width: 0;
+	overflow: visible;
+	overflow-wrap: anywhere;
+	font-weight: 650;
+}
+
+.site-content-has-breadcrumbs > .site-section:first-of-type {
+	padding-top: clamp(1.15rem, 2.5vw, 1.75rem);
+}
+
+.site-content-has-page-sequence > .site-section:last-of-type,
+.site-content-has-edit-source > .site-section:last-of-type {
+	padding-bottom: var(--space-content-block-gap);
+}
+
+.edit-source-link {
+	width: min(100%, var(--reader-text-width, var(--page-text-width, var(--text-width))));
+	margin: 0 var(--layout-inline-end-margin) var(--space-content-block-gap) var(--layout-inline-start-margin);
+	border-top: 1px solid var(--color-nav-separator);
+	padding-top: 0.75rem;
+	color: var(--color-secondary-text);
+	font-size: 0.84rem;
+}
+
+.edit-source-link a {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.45rem;
+	color: inherit;
+	text-decoration: none;
+}
+
+.edit-source-link a:hover,
+.edit-source-link a:focus-visible {
+	color: var(--color-primary-text);
+	text-decoration: underline;
+	text-underline-offset: 0.25em;
+}
+
+.edit-source-link svg {
+	width: 0.95rem;
+	height: 0.95rem;
+	stroke-width: 1.75;
+}
+
+.site-content-has-edit-source:not(.site-content-has-page-sequence) > .edit-source-link {
+	margin-bottom: var(--space-final-section-bottom);
+}
+
+.page-sequence-navigation {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 0.75rem;
+	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);
+	padding: 0 0 var(--space-final-section-bottom);
+}
+
+.page-sequence-link {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr);
+	align-items: center;
+	gap: 0.65rem;
+	min-width: 0;
+	border: 1px solid var(--color-nav-separator);
+	border-radius: var(--corner-radius-medium);
+	padding: 0.8rem;
+	color: var(--color-primary-text);
+	text-decoration: none;
+}
+
+.page-sequence-link:hover,
+.page-sequence-link:focus-visible {
+	border-color: var(--color-primary-text);
+	background: var(--color-surface-soft-background);
+}
+
+.page-sequence-link > svg {
+	width: 1rem;
+	height: 1rem;
+	stroke-width: 1.75;
+}
+
+.page-sequence-link > span {
+	display: grid;
+	min-width: 0;
+	gap: 0.15rem;
+}
+
+.page-sequence-next {
+	grid-template-columns: minmax(0, 1fr) auto;
+	text-align: right;
+}
+
+.page-sequence-direction {
+	color: var(--color-secondary-text);
+	font-size: 0.72rem;
+	font-weight: 650;
+	line-height: 1.3;
+}
+
+.page-sequence-title {
+	font-size: 0.92rem;
+	font-weight: 650;
+	line-height: 1.35;
+	overflow-wrap: anywhere;
+}