From 87c6bba24629cc74e327d41c2c3667948009c4d8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 3 Oct 2024 23:30:39 -0400
Subject: [PATCH] fix some styles

---
 .../src/routes/tutorial/[slug]/Sidebar.svelte |  2 +-
 .../routes/tutorial/[slug]/markdown.server.js | 20 ++++++++++++-------
 .../site-kit/src/lib/components/Text.svelte   |  2 +-
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
index a6f4c1b4cd..ce4bdcac47 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
@@ -172,7 +172,7 @@
 	.text :global(.filename) {
 		background-position: 1rem 54%;
 		background-size: 1rem 1rem;
-		padding-left: 2.5rem;
+		padding-left: 2.5rem !important;
 	}
 
 	@media (prefers-color-scheme: dark) {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/markdown.server.js b/apps/svelte.dev/src/routes/tutorial/[slug]/markdown.server.js
index 05ffc9a7ff..e561b3687e 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/markdown.server.js
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/markdown.server.js
@@ -42,8 +42,6 @@ const default_renderer = {
 		/** @type {Record<string, string>} */
 		const options = {};
 
-		let html = '';
-
 		let source = text
 			.replace(/\/\/\/ (.+?)(?:: (.+))?\n/gm, (_, key, value) => {
 				options[key] = value;
@@ -64,6 +62,14 @@ const default_renderer = {
 			})
 			.replace(/\*\\\//g, '*/');
 
+		let html = '<div class="code-block"><div class="controls">';
+
+		if (options.file) {
+			html += `<span class="filename">${options.file}</span>`;
+		}
+
+		html += '</div>';
+
 		if (lang === 'diff') {
 			const lines = source.split('\n').map((content) => {
 				let type = null;
@@ -78,23 +84,23 @@ const default_renderer = {
 				};
 			});
 
-			html = `<div class="code-block"><pre class="language-diff"><code>${lines
+			html += `<pre class="language-diff"><code>${lines
 				.map((line) => {
 					if (line.type) return `<span class="${line.type}">${line.content}\n</span>`;
 					return line.content + '\n';
 				})
-				.join('')}</code></pre></div>`;
+				.join('')}</code></pre>`;
 		} else {
 			const plang = languages[/** @type {keyof languages} */ (lang)];
 			const highlighted = plang
 				? PrismJS.highlight(source, PrismJS.languages[plang], lang)
 				: escape_html(source);
 
-			html = `<div class="code-block">${
-				options.file ? `<span class="filename">${options.file}</span>` : ''
-			}<pre class='language-${plang}'><code>${highlighted}</code></pre></div>`;
+			html += `<pre class='language-${plang}'><code>${highlighted}</code></pre>`;
 		}
 
+		html += '</div>';
+
 		return html
 			.replace(/ {13}([^ ][^]+?) {13}/g, (_, content) => {
 				return highlight_spans(content, 'highlight add');
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index ed8fb1991a..43ac224d3b 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -105,7 +105,7 @@
 					display: block;
 					flex: 1;
 					font-family: var(--sk-font-mono);
-					font-size: 1.2rem;
+					font-size: var(--sk-font-size-code);
 					font-weight: 400;
 					padding: 0 1rem;
 					color: var(--sk-text-2);