Merge pull request #1197 from syntaxfm/issue-1194

 better dark mode on mobile

src/lib/Pagination.svelte

@@ -59,7 +59,7 @@
 		& > * {
 			border-radius: var(--brad);
 			margin: 0;
-			box-shadow: inset 0 0 0 1px oklch(var(--blacklch) / 0.05);
+			box-shadow: inset 0 0 0 1px var(--subtle);
 			padding: 6px 15px;
 			text-align: center;
 			background-color: var(--bg-1);
@@ -69,6 +69,7 @@
 			transition: 0.2s ease background;
 			&.current {
 				background: var(--primary);
+				color: var(--dark);
 			}
 			@media (--below_large) {
 				&.page-number:not(.current) {

src/lib/ShowCard.svelte

@@ -60,6 +60,8 @@
 				<time datetime={show_date.toDateString()} title={show_date.toDateString()}
 					>{format_date(show_date)}</time
 				>
+				<span aria-hidden="true">×</span>
+				<span title="Show #{show.number}">{show.number}</span>
 			</p>
 
 			<svelte:element
@@ -130,7 +132,8 @@
 			color: var(--fg);
 			display: block;
 			display: flex;
-			gap: 20px;
+			gap: 10px;
+			padding: 5px;
 		}
 
 		.details {
@@ -161,13 +164,18 @@
 		}
 
 		&.list {
-			border-top: solid 1px var(--line);
+			border: solid 1px var(--subtle);
+			margin-bottom: 20px;
 			padding: 20px 0;
 			margin-inline: auto;
 			@media (--below_med) {
 				.description {
 					display: none;
 				}
+				h2 {
+					mask-image: none;
+					font-style: normal;
+				}
 			}
 		}
 	}
@@ -183,9 +191,12 @@
 	.date {
 		font-size: var(--font-size-sm);
 		margin: 0;
-		font-weight: 700;
-		opacity: 0.8;
+		font-weight: 500;
 		view-transition-name: var(--transition-name);
+		width: max-content;
+		@media (prefers-color-scheme: dark) {
+			background: var(--bg);
+		}
 	}
 
 	.play-button {
@@ -203,7 +214,11 @@
 		top: 0;
 		transform: translate(6.9%, -22%);
 		--max-font-size: 15rem;
-		font-size: clamp(1.5rem, 22cqw, var(--max-font-size));
+		--ideal-font-size: 45cqw;
+		font-size: clamp(1.5rem, var(--ideal-font-size), var(--max-font-size));
+		@media (prefers-color-scheme: dark) {
+			--ideal-font-size: 22cqw;
+		}
 		font-weight: 900;
 		color: var(--primary);
 		line-height: 1;

src/styles/variables.css

@@ -98,8 +98,8 @@
 	--purple: var(--purple-7);
 
 	/* Typography */
-	--body-font-family: 'MDIO';
-	--heading-font-family: 'MDIO';
+	--body-font-family: 'MDIO', 'Operator Mono', Consolas, Menlo, Monaco, 'Courier New', monospace;
+	--heading-font-family: 'MDIO', 'Operator Mono', Consolas, Menlo, Monaco, 'Courier New', monospace;
 	--font-size-xs: clamp(0.6rem, 0.17vw + 0.76rem, 0.7rem);
 	--font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
 	--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);