tidy up blog pages a little bit

Author: Rich-Harris

apps/svelte.dev/src/routes/blog/+page.svelte

@@ -21,7 +21,7 @@
 	{#each data.posts as post}
 		{#if !post.metadata.draft}
 			<article class="post" data-pubdate={post.date}>
-				<a class="no-underline" href="/{post.slug}" title="Read the article »">
+				<a href="/{post.slug}" title="Read the article »">
 					<h2>{post.metadata.title}</h2>
 					<p>{post.metadata.description}</p>
 				</a>
@@ -42,51 +42,59 @@
 
 	h2 {
 		display: inline-block;
-		margin: 3.2rem 0 0.4rem 0;
+		/* margin: 3.2rem 0 0.4rem 0; */
 		color: var(--sk-text-2);
 		max-width: 18em;
 		font-size: var(--sk-text-m);
 		font-weight: 400;
 	}
 
-	.post:first-child {
-		margin: 0 0 2rem 0;
-		padding: 0 0 4rem 0;
-		border-bottom: var(--sk-thick-border-width) solid #6767785b; /* based on --second */
-	}
+	.post {
+		margin: 2em 0;
 
-	.post:first-child h2 {
-		font-size: 4rem;
-		font-weight: 400;
-		color: var(--sk-text-2);
+		&:first-child {
+			margin: 0 0 2rem 0;
+			padding: 0 0 4rem 0;
+
+			h2 {
+				font-size: 4rem;
+				font-weight: 400;
+				color: var(--sk-text-2);
+			}
+		}
+
+		a {
+			display: block;
+			text-decoration: none;
+
+			&:hover h2 {
+				text-decoration: underline;
+			}
+		}
+
+		p {
+			font-size: var(--sk-text-s);
+			max-width: 30em;
+			color: var(--sk-text-3);
+			margin: 0;
+		}
 	}
 
 	.post:where(:first-child, :nth-child(2))::before {
 		content: 'Latest post • ' attr(data-pubdate);
-		color: var(--sk-theme-3);
-		font-family: var(--sk-font-heading);
+		color: var(--sk-text-4);
+		font-family: var(--sk-font-ui);
 		font-size: var(--sk-text-xs);
 		font-weight: 400;
-		letter-spacing: 0.05em;
 		text-transform: uppercase;
 	}
 
 	.post:nth-child(2)::before {
 		content: 'Older posts';
 	}
 
-	.post p {
-		font-size: var(--sk-text-s);
-		max-width: 30em;
-		color: var(--sk-text-3);
-	}
-
-	.post > a {
-		display: block;
-	}
-
-	.posts a:hover,
+	/* .posts a:hover,
 	.posts a:hover > h2 {
 		color: var(--sk-theme-3);
-	}
+	} */
 </style>

apps/svelte.dev/src/routes/blog/[slug]/+page.svelte

@@ -62,9 +62,9 @@
 	}
 
 	.byline {
-		margin: 0 0 1rem 0;
-		padding: 1.6rem 0 0 0;
-		border-top: var(--sk-thick-border-width) solid #6767785b;
+		margin: 0 0 4rem 0;
+		padding: 1rem 0 0 0;
+		font-family: var(--sk-font-ui);
 		font-size: var(--sk-text-xs);
 		text-transform: uppercase;
 	}
@@ -78,7 +78,7 @@
 	}
 
 	.post :global(figcaption) {
-		color: var(--sk-theme-2);
+		color: var(--sk-text-4);
 		text-align: left;
 	}
 
@@ -90,7 +90,7 @@
 		float: right;
 		margin: 0 0 1em 1em;
 		width: 16rem;
-		color: var(--sk-theme-2);
+		color: var(--sk-text-4);
 		z-index: 2;
 	}
 
@@ -103,7 +103,7 @@
 		height: 420px;
 		margin: 2em 0;
 		border-radius: var(--sk-border-radius);
-		border: 0.8rem solid var(--sk-theme-2);
+		border: 0.8rem solid var(--sk-theme-4);
 	}
 
 	@media (min-width: 910px) {