[fix] style "/// file: .." pragmas in code blocks

dummdidumm · Rich-Harris · dummdidumm · commit ba7fec969c20 · 2022-12-06T11:17:29.000+01:00
Co-authored-by: Rich Harris &lt;hello@rich-harris.dev&gt;
diff --git a/src/routes/tutorial/[slug]/Sidebar.svelte b/src/routes/tutorial/[slug]/Sidebar.svelte
@@ -121,13 +121,14 @@
 		margin: 1.5em 0 0.5em 0;
 	}
 
-	.text :global(ul) {
+	.text :global(ul),
+	.text :global(ol) {
 		padding: 0 0 0 2rem;
 	}
 
 	.text :global(code) {
 		background: hsl(206, 44%, 92%);
-		padding: 0.2em 0.4em 0.3em;
+		padding: 0.1em 0.4em 0.2em;
 		white-space: nowrap;
 		position: relative;
 		top: -0.1em;
@@ -149,15 +150,32 @@
 		background-size: 100% 100%;
 	}
 
+	.text :global(.code-block) :global(h5) {
+		display: block;
+		width: 100%;
+		font-family: var(--font-mono);
+		font-size: 1.2rem;
+		font-weight: 400;
+		padding: 1rem 1rem 0.8rem 1rem;
+		margin: 0 0 0 0;
+		color: var(--sk-text-2);
+		background: var(--back-api);
+		box-shadow: 0 1px 6px hsla(205.7, 63.6%, 30.8%, 0.06);
+		border-radius: var(--border-r) var(--border-r) 0 0;
+	}
+
 	.text :global(pre) {
 		background: white;
 		padding: 1rem 1.5rem;
 		margin: 0 0 1.6rem 0;
 		line-height: 1.3;
-		border-radius: 0.5rem;
 		box-shadow: inset 1px 1px 3px hsl(206deg 20% 93%);
 	}
 
+	.text :global(.code-block) :global(h5) + :global(pre) {
+		border-radius: 0 0 var(--border-r) var(--border-r);
+	}
+
 	.text :global(pre) :global(code) {
 		background: none;
 		color: var(--code-base);
