tweak contents styles (#264)

Author: Rich-Harris

apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte

@@ -37,7 +37,7 @@
 <aside class="on-this-page">
 	<label>
 		<input type="checkbox" aria-label="Toggle 'on this page' menu" />
-		On this page
+		<h3>On this page</h3>
 	</label>
 
 	<nav>
@@ -78,12 +78,6 @@
 			}
 		}
 
-		label {
-			font-family: var(--sk-font-ui);
-			font-size: var(--sk-font-size-ui-small);
-			display: block;
-		}
-
 		@media (max-width: 1199px) {
 			margin: 4rem 0;
 
@@ -119,6 +113,14 @@
 					rotate: -90deg;
 					transition: rotate 0.2s;
 				}
+
+				h3 {
+					font-family: var(--sk-font-ui);
+					font-size: var(--sk-font-size-ui-small);
+					color: var(--sk-text-4);
+					margin: 0;
+					display: block;
+				}
 			}
 
 			label:has(:checked) {
@@ -168,6 +170,10 @@
 				&::before {
 					content: none !important;
 				}
+
+				h3 {
+					margin: 0 0 0.3rem 0;
+				}
 			}
 
 			nav {

packages/site-kit/src/lib/docs/DocsContents.svelte

@@ -32,9 +32,9 @@
 	<ul class="sidebar">
 		{#each contents ?? [] as section}
 			<li>
-				<span class="section">
+				<h3>
 					{section.metadata.title}
-				</span>
+				</h3>
 
 				<ul>
 					{#each section.children as { metadata, slug }}
@@ -90,12 +90,8 @@
 		user-select: none;
 	}
 
-	.section {
-		display: block;
-		padding-bottom: 0.8rem;
-		font-size: var(--sk-font-size-h3);
-		font-family: var(--sk-font-heading);
-		color: var(--sk-text-1);
+	h3 {
+		margin: 0 0 0.3rem 0;
 	}
 
 	.page {

packages/site-kit/src/lib/styles/base.css

@@ -190,15 +190,6 @@ table :where(code, span) {
 }
 
 /*	helper styles -------------------------- */
-/* TODO this shoudl be moved */
-figcaption,
-.post aside {
-	/* max-width: none;
-	margin: 0 auto;
-	padding: 1.6rem 0 0 0.8rem;
-	font: 1.2rem/1.6 var(--sk-font-mono); */
-}
-
 /* visually hidden, but accessible to assistive tech */
 .visually-hidden {
 	border: 0;