Merge branch 'design' into develop

Author: geoffroy-noel-ddh

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

@@ -344,9 +344,9 @@ button.primary:disabled {
 }
 
 button.secondary {
-	background-color: var(--surface-3);
-	border-color: var(--surface-3);
-	color: var(--text-2);
+	background-color: var(--brand);
+	border-color: var(--brand);
+	color: var(--surface-1);
 }
 
 button.secondary-inverse {

frontend/src/lib/components/InscriptionPagination.svelte

@@ -56,17 +56,23 @@
 		align-items: center;
 		display: flex;
 		gap: var(--size-2);
-		height: 100%;
 		justify-content: center;
 
-		:global(button) {
+		:global(button),
+		:global(a) {
 			background: none;
 			border: none;
 			box-shadow: none;
 			font-weight: inherit;
-			height: 100%;
 			text-shadow: none;
 
+			min-width: 44px;
+		    min-height: 44px;
+		    display: inline-flex;
+		    align-items: center;
+		    justify-content: center;
+		    border-radius: var(--radius-2);
+
 			&:hover {
 				background: var(--surface-4);
 			}

frontend/src/pages/technical-overview.md

@@ -127,7 +127,7 @@ The homepage was designed to immediately guide users into the dataset through a
 
 Iterations focused on hierarchy and call-to-action clarity, establishing search as the primary entry point. The design balances accessibility for first-time users with the depth and flexibility required for more advanced academic research.
 
-![User research synthesis board with workshop notes, feedback clustering, and prioritisation across multiple participants.](images/technical_overview/Untitled-1-04.jpg 'Remote Usability Testing')
+![User research synthesis board with workshop notes, feedback clustering, and prioritisation across multiple participants.](images/technical_overview/remoteworkshop.jpg 'Remote Usability Testing')
 
 _Figure 7: Remote usability testing workshops._
 
@@ -145,9 +145,11 @@ By integrating different layers of annotations in the same publication, the site
 
 ## Source Code
 
-- [Palaeographic Annotation repository](https://github.com/kingsdigitallab/crossreads)
-- [Petrographic Analysis repository](https://github.com/kingsdigitallab/crossreads-petrography)
-- [Corpus Building repository](https://github.com/kingsdigitallab/corpus-building)
+<ul class="tap-target-links">
+  <li><a href="https://github.com/kingsdigitallab/crossreads">Palaeographic Annotation repository</a></li>
+  <li><a href="https://github.com/kingsdigitallab/crossreads-petrography">Petrographic Analysis repository</a></li>
+  <li><a href="https://github.com/kingsdigitallab/corpus-building">Corpus Building repository</a></li>
+</ul>
 
 ## Acknowledgements
 

frontend/src/routes/+page.svelte

@@ -116,17 +116,26 @@
 	.discover-link {
 		align-items: center;
 		color: var(--text-1);
-		display: flex;
+		display: inline-flex;
 		font-size: var(--font-size-2);
 		font-weight: bold;
-		gap: var(--size-2);
+		gap: var(--size-4);
 		text-decoration: none;
+
+		min-height: 44px;
+		padding-block: var(--size-1);
 	}
 
 	.arrow {
 		border-radius: var(--radius);
 		border: var(--border-size-1) solid var(--border-color);
 		padding-inline: var(--size-2);
+
+		min-width: 44px;
+		min-height: 44px;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	.discover-link-text {

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

@@ -40,6 +40,17 @@
 		text-underline-offset: 2px;
 	}
 
+	:global(.md .tap-target-links a) {
+		display: inline-flex;
+		align-items: center;
+		min-height: 44px;
+		padding-inline: var(--size-2);
+	}
+
+	:global(.md .tap-target-links li) {
+		margin-bottom: 4px;
+	}
+
 	:global(.md a[href^='http']:not(.badge)):not(:has(img))::after {
 		content: '↗';
 		margin-left: 0.25em;

frontend/src/routes/museum/+page.svelte

@@ -279,10 +279,12 @@
 		border-radius: var(--radius-2);
 		padding: var(--size-3) var(--size-4);
 		background: var(--surface-1);
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		gap: var(--size-2);
+
+		display: grid;
+		grid-template-rows: minmax(2.6em, auto) auto minmax(3.2em, auto);
+		row-gap: var(--size-2);
+		align-content: start;
+
 		min-height: 200px;
 	}
 
@@ -292,6 +294,13 @@
 		font-weight: 600;
 		line-height: 1.3;
 		word-break: break-word;
+
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+
+		min-height: 2.8em;
 	}
 	.title:hover,
 	.title:focus {
@@ -300,18 +309,25 @@
 
 	.meta-line {
 		display: flex;
-		flex-wrap: wrap;
+		flex-direction: column;
+		align-items: flex-start;
 		gap: var(--size-2);
-		align-items: center;
+		align-items: left;
 		font-size: var(--font-size-1);
+		margin-top: var(--size-2);
 	}
 
 	.description {
-		font-size: var(--font-size-1);
-		color: var(--text-2);
+		margin-top: var(--size-6);
+		font-size: 0.9rem;
+		font-weight: 300;
+		color: color-mix(in oklab, var(--text-1) 75%, transparent);
 		line-height: 1.4;
+		height: calc(1.4em * 2);
+		max-height: calc(1.4em * 2);
+
 		display: -webkit-box;
-		-webkit-line-clamp: 3;
+		-webkit-line-clamp: 2;
 		-webkit-box-orient: vertical;
 		overflow: hidden;
 	}