Merge branch 'design' into develop

Author: geoffroy-noel-ddh

frontend/src/lib/assets/styles/shiki.css

@@ -1,5 +1,5 @@
-[color-scheme='dark'] .shiki,
-[color-scheme='dark'] .shiki span {
+[data-color-scheme='dark'] .shiki,
+[data-color-scheme='dark'] .shiki span {
 	background-color: var(--shiki-dark-bg) !important;
 	color: var(--shiki-dark) !important;
 }

frontend/src/lib/components/InscriptionMaterialDetail.svelte

@@ -16,13 +16,13 @@
 			{#if material?.ref}
 				<a class="badge strong" href={material.ref}>
 					{material.type}
-					{#if material.subtype && material.subtype.length }
+					{#if material.subtype && material.subtype.length}
 						> {material.subtype.join(', ')}
 					{/if}
 				</a>
 			{:else}
 				{material.type}
-				{#if material.subtype && material.subtype.length }
+				{#if material.subtype && material.subtype.length}
 					> {material.subtype.join(', ')}
 				{/if}
 			{/if}
@@ -79,4 +79,8 @@
 		overflow: visible;
 		text-overflow: clip;
 	}
+
+	dt + dd {
+		margin-top: var(--size-2);
+	}
 </style>

frontend/src/lib/components/inscription/InscriptionOverview.svelte

@@ -70,7 +70,7 @@
 				src="{config.imageServer}{slug}/{images[0]?.url || ''}/{config.imageThumbParams}"
 				alt={images[0]?.desc || 'Inscription image'}
 			/>
-			<section id="image-viewer" style="height: 50vh; width: 100%;"></section>
+			<section id="image-viewer" style="height: 44vh; width: 100%;"></section>
 			<figcaption>{curImageTitle}</figcaption>
 		</figure>
 	{:else}
@@ -113,6 +113,7 @@
 		border-right: var(--border-size-1) solid var(--border-color);
 		height: 100%;
 		overflow-y: auto;
+		overflow-x: hidden;
 		margin-top: 0;
 		padding-inline: var(--size-4);
 		padding-top: 0;
@@ -137,9 +138,9 @@
 	#overview .image-placeholder {
 		grid-column: 1;
 		grid-row: 1;
-		margin: 0 auto;
-		padding-inline: var(--size-2);
-		width: 100%;
+		margin-inline: calc(var(--size-4) * -1);
+		padding-inline: 0;
+		width: calc(100% + (var(--size-4) * 2));
 	}
 
 	#overview #facsimile-images figcaption {

frontend/src/routes/inscription/[slug]/+page.svelte

@@ -31,15 +31,15 @@
 	 */
 	function nullIfDivEmpty(div) {
 		// Example
-		// {id: 'commentary', html: '<h2>commentary</h2>  <p>  </p>  '} => null 
+		// {id: 'commentary', html: '<h2>commentary</h2>  <p>  </p>  '} => null
 		let ret = null;
 		if (div && div.html) {
 			let html = div.html.trim();
 			// removes heading from start
 			html = html.replace(/^<(h[1-6])>.*?<\/\1>/, '');
 			// removes empty <p>
 			html = html.replace(/<p(\s[^>]*)?>\s*(?:&nbsp;|\s)*<\/p>/gi, '');
-			html = html.trim()
+			html = html.trim();
 			if (html.length) {
 				ret = div;
 			}
@@ -49,11 +49,7 @@
 
 	const attribution = $derived(html?.editions?.[0]?.html);
 	const editions = $derived(html?.divs?.find((div) => div.id === 'editions'));
-	const apparatus = $derived(
-		nullIfDivEmpty(
-			html?.divs?.find((div) => div.id === 'apparatus')
-		)
-	);
+	const apparatus = $derived(nullIfDivEmpty(html?.divs?.find((div) => div.id === 'apparatus')));
 	const translations = $derived(html?.divs?.filter((div) => div.id === 'translation') || []);
 
 	/**
@@ -609,6 +605,42 @@ ${changeDate ? `Last revised: ${changeDate}.` : ''}
 		padding-block: var(--size-2);
 	}
 
+	/* ZL: consistent spacing between section headings and their content */
+	#text-type h2 {
+		margin-bottom: var(--size-3);
+	}
+
+	#commentary :global(h2) {
+		padding-bottom: var(--size-3);
+	}
+
+	#physical-description h3 {
+		margin-top: var(--size-6);
+		margin-bottom: var(--size-2);
+	}
+
+	/* ZL: improve spacing and hierarchy in Physical description */
+	#physical-description dl {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+		margin-block: var(--size-2) var(--size-6);
+	}
+
+	#physical-description dt {
+		font-weight: bold;
+		margin-top: var(--size-4);
+	}
+
+	#physical-description dt:first-child {
+		margin-top: 0;
+	}
+
+	#physical-description dd {
+		margin-inline-start: 0;
+		margin-top: var(--size-1);
+	}
+
 	#content > section {
 		border-bottom: var(--border-size-1) solid var(--border-color);
 		padding-bottom: var(--size-8);