diff options
| author | Chris Swithinbank | 2024-01-18 18:23:38 +0100 |
|---|---|---|
| committer | GitHub | 2024-01-18 18:23:38 +0100 |
| commit | 8398432aa4a0f38e2dd4452dfcdf7033c5713334 (patch) | |
| tree | 30aee1ec4497f2a9d5dc5702cbc7b1db6a745544 | |
| parent | 773880de87b79bf3107dbc32df29a86dd11e4e6f (diff) | |
| download | IT.starlight-8398432aa4a0f38e2dd4452dfcdf7033c5713334.tar.gz IT.starlight-8398432aa4a0f38e2dd4452dfcdf7033c5713334.tar.bz2 IT.starlight-8398432aa4a0f38e2dd4452dfcdf7033c5713334.zip | |
Tweak vertical spacing in Markdown content styles (#1376)
| -rw-r--r-- | .changeset/rotten-dots-punch.md | 29 | ||||
| -rw-r--r-- | packages/starlight/style/markdown.css | 4 |
2 files changed, 31 insertions, 2 deletions
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 *)), |