small tidy up

Author: Rich-Harris

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

@@ -79,7 +79,7 @@
 	}
 
 	article {
-		margin: 2em 0;
+		margin: 0 0 4rem 0;
 
 		/* we need to use :global because snippets don't currently cause a deopt */
 		&.top {
@@ -122,7 +122,12 @@
 
 		.featured,
 		.feed {
+			padding: 4rem 0;
+			position: relative;
+
 			&::before {
+				position: absolute;
+				top: 0;
 				font: var(--sk-font-ui-medium);
 				text-transform: uppercase;
 				color: var(--sk-text-4);
@@ -148,16 +153,12 @@
 		}
 
 		.feed {
-			position: relative;
 			display: block;
-			padding: 2em 0;
 			margin: 0;
 			list-style: none;
 
 			&::before {
 				content: 'Monthly updates';
-				position: absolute;
-				top: 0;
 			}
 
 			a {

apps/svelte.dev/src/routes/blog/Byline.svelte

@@ -21,7 +21,6 @@
 
 <style>
 	.byline {
-		margin: 0 0 4rem 0;
 		padding: 1rem 0 0 0;
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;

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

@@ -21,22 +21,19 @@
 	<meta name="og:image" content="https://svelte.dev/blog/{$page.params.slug}/card.png" />
 </svelte:head>
 
-<div class="content">
-	<article class="post listify text">
+<article>
+	<header>
 		<h1>{data.metadata.title}</h1>
 		<p class="standfirst">{@html data.metadata.description}</p>
-
 		<Byline post={data} />
+	</header>
 
-		<Text>
-			{@html data.body}
-		</Text>
-	</article>
-</div>
+	<Text>{@html data.body}</Text>
+</article>
 
 <style>
-	.post {
-		padding: var(--sk-page-padding-top) var(--sk-page-padding-side);
+	article {
+		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) var(--sk-page-padding-bottom);
 		max-width: var(--sk-page-content-width);
 		box-sizing: content-box;
 		margin: 0 auto;
@@ -120,7 +117,7 @@
 	}
 
 	@media (min-width: 960px) {
-		.post :global {
+		article :global {
 			.max {
 				width: 100vw;
 				/* padding: 0 var(--sk-page-padding-side); */