From 8398432aa4a0f38e2dd4452dfcdf7033c5713334 Mon Sep 17 00:00:00 2001
From: Chris Swithinbank
Date: Thu, 18 Jan 2024 18:23:38 +0100
Subject: Tweak vertical spacing in Markdown content styles (#1376)

---
 .changeset/rotten-dots-punch.md       | 29 +++++++++++++++++++++++++++++
 packages/starlight/style/markdown.css |  4 ++--
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/rotten-dots-punch.md

diff --git a/.changeset/rotten-dots-punch.md b/.changeset/rotten-dots-punch.md
new file mode 100644
index 00000000..da497b74
--- /dev/null
+++ b/.changeset/rotten-dots-punch.md
@@ -0,0 +1,29 @@
+---
+'@astrojs/starlight': minor
+---
+
+Tweaks vertical spacing in Markdown content styles.
+
+This is a subtle change to Starlight’s default content styling that should improve most sites:
+- Default vertical spacing between content items is reduced from `1.5rem` to `1rem`.
+- Spacing before headings is now relative to font size, meaning higher-level headings have slightly more spacing and lower-level headings slightly less.
+
+The overall impact is to tighten up content that belongs together and improve the visual hierarchy of headings to break up sections.
+
+Although this is a subtle change, we recommend visually inspecting your site in case this impacts layout of any custom CSS or components.
+
+If you want to preserve the previous spacing, you can add the following custom CSS to your site:
+
+```css
+/* Restore vertical spacing to match Starlight v0.15 and below. */
+.sl-markdown-content
+	:not(a, strong, em, del, span, input, code)
+	+ :not(a, strong, em, del, span, input, code, :where(.not-content *)) {
+	margin-top: 1.5rem;
+}
+.sl-markdown-content
+	:not(h1, h2, h3, h4, h5, h6)
+	+ :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+	margin-top: 2.5rem;
+}
+```
diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css
index c4f522eb..d0e2248e 100644
--- a/packages/starlight/style/markdown.css
+++ b/packages/starlight/style/markdown.css
@@ -1,14 +1,14 @@
 .sl-markdown-content
 	:not(a, strong, em, del, span, input, code)
 	+ :not(a, strong, em, del, span, input, code, :where(.not-content *)) {
-	margin-top: 1.5rem;
+	margin-top: 1rem;
 }
 
 /* Headings after non-headings have more spacing. */
 .sl-markdown-content
 	:not(h1, h2, h3, h4, h5, h6)
 	+ :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
-	margin-top: 2.5rem;
+	margin-top: 1.5em;
 }
 
 .sl-markdown-content li + li:not(:where(.not-content *)),
-- 
cgit