@janga/norna 0.7.18 → 0.7.23

package/src/styles/media.css

@@ -0,0 +1,523 @@
+/* Cards, managed images, captions, and carousels. */
+
+.card-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+	gap: var(--card-list-gap, clamp(0.9rem, 2vw, 1.25rem));
+	width: var(--layout-card-list-width);
+	margin-block: 0;
+	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
+	text-align: left;
+	--card-list-width: min(56rem, var(--page-width));
+	--layout-card-list-width: min(100%, var(--card-list-width));
+	--card-list-gap: clamp(0.9rem, 2vw, 1.25rem);
+	--card-list-item-gap: 0.85rem;
+	--card-list-padding: clamp(0.9rem, 2vw, 1.15rem);
+	--card-list-media-width: 32%;
+	--card-list-media-min-width: 7rem;
+	--card-list-top-media-width: 20rem;
+	--card-list-title-scale: 1;
+	--card-list-text-scale: 1;
+}
+
+.section-body > .section-markdown:not(:last-child),
+.section-body > :is(.image-stack, .managed-images):not(:last-child) {
+	margin-bottom: var(--space-content-block-gap);
+}
+
+.section-body > :is(.image-stack, .managed-images, .card-list) {
+	clear: both;
+}
+
+.section-body > .card-list:not(:last-child) {
+	margin-bottom: calc(var(--space-content-block-gap) + var(--space-card-list-after));
+}
+
+.section-body > .card-list:last-child {
+	margin-bottom: var(--space-card-list-after);
+}
+
+.card-list-width-text {
+	--card-list-width: var(--reader-text-width, var(--text-width));
+}
+
+.card-list-width-narrow {
+	--card-list-width: min(48rem, var(--page-width));
+}
+
+.card-list-width-wide {
+	--card-list-width: var(--page-width);
+}
+
+.card-list-size-s {
+	--card-list-gap: 0.75rem;
+	--card-list-item-gap: 0.65rem;
+	--card-list-padding: 0.8rem;
+	--card-list-media-width: 26%;
+	--card-list-media-min-width: 5.5rem;
+	--card-list-top-media-width: 14rem;
+	--card-list-title-scale: 0.92;
+	--card-list-text-scale: 0.92;
+}
+
+.card-list-size-l {
+	--card-list-gap: clamp(1rem, 2.4vw, 1.5rem);
+	--card-list-item-gap: 1rem;
+	--card-list-padding: clamp(1.1rem, 2.4vw, 1.45rem);
+	--card-list-media-width: 36%;
+	--card-list-media-min-width: 8.5rem;
+	--card-list-top-media-width: 24rem;
+	--card-list-title-scale: 1.08;
+	--card-list-text-scale: 1.02;
+}
+
+.card-list-size-xl {
+	--card-list-gap: clamp(1.15rem, 2.8vw, 1.8rem);
+	--card-list-item-gap: 1.1rem;
+	--card-list-padding: clamp(1.25rem, 3vw, 1.75rem);
+	--card-list-media-width: 40%;
+	--card-list-media-min-width: 10rem;
+	--card-list-top-media-width: 28rem;
+	--card-list-title-scale: 1.18;
+	--card-list-text-scale: 1.06;
+}
+
+.card-list-flow-stack {
+	grid-template-columns: 1fr;
+}
+
+.card-list-item {
+	display: grid;
+	gap: var(--card-list-item-gap);
+	align-content: start;
+	margin: 0;
+	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+	border-radius: var(--corner-radius-large, 8px);
+	padding: var(--card-list-padding);
+	background: var(--color-surface);
+	color: inherit;
+}
+
+.card-list-layout-image-left .card-list-item-has-image,
+.card-list-layout-image-right .card-list-item-has-image {
+	grid-template-columns: minmax(var(--card-list-media-min-width), var(--card-list-media-width)) minmax(0, 1fr);
+	align-items: center;
+}
+
+.card-list-layout-image-right .card-list-item-has-image {
+	grid-template-columns: minmax(0, 1fr) minmax(var(--card-list-media-min-width), var(--card-list-media-width));
+}
+
+.card-list-layout-image-left .card-list-item-linked,
+.card-list-layout-image-right .card-list-item-linked {
+	grid-template-columns: 1fr;
+}
+
+.card-list-layout-image-right .card-list-image-frame {
+	order: 2;
+}
+
+.card-list-link {
+	display: grid;
+	gap: var(--card-list-item-gap);
+	width: 100%;
+	color: inherit;
+	text-decoration: none;
+}
+
+.card-list-layout-image-left .card-list-item-has-image .card-list-link,
+.card-list-layout-image-right .card-list-item-has-image .card-list-link {
+	grid-template-columns: minmax(var(--card-list-media-min-width), var(--card-list-media-width)) minmax(0, 1fr);
+	align-items: center;
+}
+
+.card-list-layout-image-right .card-list-item-has-image .card-list-link {
+	grid-template-columns: minmax(0, 1fr) minmax(var(--card-list-media-min-width), var(--card-list-media-width));
+}
+
+.card-list-link:hover .card-list-title,
+.card-list-link:focus-visible .card-list-title {
+	text-decoration: underline;
+	text-underline-offset: 0.18em;
+}
+
+.card-list-image-frame {
+	display: grid;
+	width: 100%;
+	aspect-ratio: 16 / 10;
+	place-items: center;
+	overflow: hidden;
+}
+
+.card-list-flow-stack.card-list-layout-image-top .card-list-image-frame {
+	width: min(100%, var(--card-list-top-media-width));
+}
+
+.card-list-image {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+.card-list-content {
+	display: grid;
+	gap: 0.4rem;
+}
+
+.card-list-badge {
+	justify-self: start;
+	margin: 0 0 0.15rem;
+	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
+	border-radius: 999px;
+	padding: 0.18rem 0.48rem;
+	background: color-mix(in srgb, currentColor 9%, transparent);
+	color: inherit;
+	font-size: calc(var(--section-body-font-size-desktop, 1rem) * 0.72);
+	font-weight: 700;
+	letter-spacing: 0;
+	line-height: 1.2;
+}
+
+.card-list-title {
+	margin: 0;
+	color: inherit;
+	font-size: calc(var(--section-markdown-h3-font-size-desktop, 1.1rem) * var(--card-list-title-scale));
+	font-weight: 700;
+	letter-spacing: 0;
+	line-height: var(--section-markdown-h3-line-height, 1.35);
+	text-transform: none;
+}
+
+.card-list-content p:not(.card-list-badge) {
+	margin: 0;
+	font-size: calc(var(--section-body-font-size-desktop, 1rem) * var(--card-list-text-scale));
+	line-height: var(--section-body-line-height, 1.5);
+}
+
+:is(.image-stack, .managed-images) {
+	display: grid;
+	gap: var(--space-image-item);
+	margin-top: 0;
+}
+
+:root[data-image-presentation='prose-aligned'] .section-body {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(0, var(--layout-reading-width)) minmax(0, 1fr);
+}
+
+:root[data-image-presentation='prose-aligned'] .section-body > * {
+	grid-column: 1 / -1;
+}
+
+:root[data-image-presentation='prose-aligned'] .section-body > :is(.image-stack, .managed-images) {
+	grid-column: 2 / -1;
+	min-width: 0;
+}
+
+@media (min-width: 701px) {
+	:root[data-image-presentation='prose-aligned'] .site-page-layout-tree .section-body {
+		grid-template-columns: minmax(0, var(--layout-reading-width)) minmax(0, 1fr);
+	}
+
+	:root[data-image-presentation='prose-aligned'] .site-page-layout-tree .section-body > :is(.image-stack, .managed-images) {
+		grid-column: 1 / -1;
+	}
+}
+
+.managed-image-item {
+	display: grid;
+	gap: 0.55rem;
+	align-content: start;
+	margin: 0;
+}
+
+.image-stack .managed-image-item {
+	width: var(--layout-stack-item-width);
+	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
+}
+
+.managed-image-frame {
+	display: grid;
+	width: var(--layout-media-width);
+	margin-block: 0;
+	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
+	background: transparent;
+	place-items: center;
+}
+
+.managed-image {
+	display: block;
+	width: auto;
+	margin: 0 auto;
+	background: transparent;
+	height: auto;
+	max-width: 100%;
+	max-height: var(--image-max-height);
+	object-fit: contain;
+}
+
+.managed-image.managed-image-landscape {
+	width: 100%;
+	max-height: none;
+}
+
+:root[data-image-presentation='prose-aligned'] .managed-image-frame {
+	margin-inline: 0 auto;
+	place-items: start;
+}
+
+:root[data-image-presentation='prose-aligned'] .managed-image {
+	margin-inline: 0 auto;
+	max-height: none;
+}
+
+:root[data-image-presentation='centered-fit'] .image-stack .managed-image-item,
+:root[data-image-presentation='centered-fit'] .managed-image-frame {
+	margin-inline: auto;
+}
+
+.image-carousel {
+	position: relative;
+	--image-carousel-width-from-height: var(--image-carousel-width-from-height-desktop, var(--image-layout-width));
+	--layout-carousel-width: min(
+		100%,
+		var(--layout-media-width),
+		var(--image-carousel-width-from-height, var(--image-layout-width))
+	);
+	--image-carousel-control-background: var(--color-control-background);
+	--image-carousel-control-background-active: var(--color-control-background-active);
+	--image-carousel-control-color: var(--color-control-text);
+	outline: none;
+}
+
+:root[data-image-presentation='prose-aligned'] .image-carousel {
+	--layout-carousel-width: min(100%, var(--layout-media-width));
+}
+
+.image-carousel:focus-visible {
+	outline: var(--focus-indicator-width) solid var(--color-focus-ring);
+	outline-offset: 0.5rem;
+}
+
+.image-carousel-slide {
+	flex: 0 0 100%;
+	min-width: 0;
+	margin: 0;
+}
+
+.image-carousel-stage {
+	position: relative;
+	display: grid;
+	width: var(--layout-carousel-width);
+	max-height: var(--image-max-height);
+	margin-block: 0;
+	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
+	aspect-ratio: var(--image-carousel-aspect-ratio, auto);
+}
+
+:root[data-image-presentation='prose-aligned'] .image-carousel-stage {
+	max-height: none;
+	margin-inline: 0 auto;
+}
+
+:root[data-image-presentation='centered-fit'] .image-carousel-stage {
+	margin-inline: auto;
+}
+
+.image-carousel-viewport {
+	height: 100%;
+}
+
+.image-carousel-frame {
+	display: grid;
+	width: 100%;
+	height: 100%;
+	min-height: 0;
+	place-items: center;
+}
+
+.image-carousel[data-carousel-ready='true'] .image-carousel-viewport {
+	overflow: hidden;
+}
+
+.image-carousel[data-carousel-ready='true'] .image-carousel-slides {
+	display: flex;
+	height: 100%;
+	touch-action: pan-y pinch-zoom;
+}
+
+.image-carousel[data-carousel-ready='true'] .image-carousel-slide {
+	display: grid;
+	height: 100%;
+	min-height: 0;
+	align-content: start;
+}
+
+.image-carousel-frame .managed-image {
+	width: 100%;
+	height: 100%;
+	min-width: 0;
+	min-height: 0;
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
+}
+
+.image-carousel-button,
+.image-carousel-position {
+	display: none;
+}
+
+.image-carousel[data-carousel-ready='true'] .image-carousel-button,
+.image-carousel[data-carousel-ready='true'] .image-carousel-position {
+	display: grid;
+}
+
+.image-carousel-button {
+	position: absolute;
+	top: 50%;
+	z-index: 2;
+	width: 2.75rem;
+	height: 2.75rem;
+	padding: 0;
+	place-items: center;
+	border: 0;
+	border-radius: 999px;
+	background: var(--image-carousel-control-background);
+	box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 18%);
+	color: var(--image-carousel-control-color);
+	cursor: pointer;
+	transform: translateY(-50%);
+}
+
+.image-carousel-button svg {
+	width: 1.5rem;
+	height: 1.5rem;
+	fill: none;
+	stroke: currentColor;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-width: 2;
+}
+
+.image-carousel-button:hover:not(:disabled),
+.image-carousel-button:focus-visible:not(:disabled) {
+	background: var(--image-carousel-control-background-active);
+}
+
+.image-carousel-button:focus-visible:not(:disabled) {
+	outline: var(--focus-indicator-width) solid var(--image-carousel-control-color);
+	outline-offset: 2px;
+	box-shadow:
+		0 0 0 4px var(--image-carousel-control-background-active),
+		0 0 0 6px var(--color-focus-ring);
+}
+
+.image-carousel-button:disabled {
+	cursor: default;
+	opacity: 0;
+	pointer-events: none;
+}
+
+.image-carousel-button-previous {
+	left: 0.75rem;
+}
+
+.image-carousel-button-next {
+	right: 0.75rem;
+}
+
+.image-carousel-position {
+	position: absolute;
+	right: 0.75rem;
+	bottom: 0.75rem;
+	z-index: 2;
+	min-width: 3rem;
+	min-height: 1.875rem;
+	padding: 0.35rem 0.65rem;
+	place-items: center;
+	border: 0;
+	border-radius: 999px;
+	background: var(--image-carousel-control-background);
+	box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 18%);
+	color: var(--image-carousel-control-color);
+	font-size: 0.8125rem;
+	font-variant-numeric: tabular-nums;
+	font-weight: 600;
+	line-height: 1;
+	text-align: center;
+}
+
+.image-carousel-captions {
+	width: min(var(--layout-carousel-width), 72ch);
+	margin-block: 0;
+	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
+}
+
+:root[data-image-presentation='prose-aligned'] .image-carousel-captions {
+	margin-inline: 0 auto;
+}
+
+:root[data-image-presentation='centered-fit'] .image-carousel-captions {
+	margin-inline: auto;
+	text-align: center;
+}
+
+:root[data-image-presentation='centered-fit'] .image-carousel-captions .image-details {
+	justify-content: center;
+}
+
+.image-carousel-caption {
+	margin-bottom: 0;
+}
+
+.image-carousel[data-carousel-ready='true'] .image-carousel-captions {
+	display: grid;
+}
+
+.image-carousel[data-carousel-ready='true'] .image-carousel-caption {
+	grid-area: 1 / 1;
+	visibility: hidden;
+	pointer-events: none;
+}
+
+.image-carousel[data-carousel-ready='true'] .image-carousel-caption.is-active {
+	visibility: visible;
+	pointer-events: auto;
+}
+
+.image-meta {
+	width: min(var(--layout-media-width), 72ch);
+	margin-block: var(--section-caption-spacing-before, 0.5em) 0;
+	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
+	font-size: var(--section-caption-font-size-desktop, 0.95rem);
+	text-align: var(--section-caption-align-desktop, center);
+}
+
+:root[data-image-presentation='prose-aligned'] .image-stack .image-meta {
+	margin-inline: 0 auto;
+}
+
+:root[data-image-presentation='centered-fit'] .image-stack .image-meta {
+	margin-inline: auto;
+	text-align: center;
+}
+
+:root[data-image-presentation='centered-fit'] .image-stack .image-details {
+	justify-content: center;
+}
+
+.image-details {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	justify-content: var(--section-caption-justify-desktop, center);
+	gap: 0.5rem;
+	margin-bottom: 0;
+	color: var(--section-secondary-text-color, var(--color-secondary-text));
+	font-size: inherit;
+	font-family: var(--font-sans);
+	letter-spacing: 0;
+	line-height: var(--section-caption-line-height, 1.5);
+}