diff options
| author | Eva Decker | 2024-07-10 12:22:13 -0400 |
|---|---|---|
| committer | GitHub | 2024-07-10 18:22:13 +0200 |
| commit | 464685a3ce33e7ccc8d1d7365935732c87ba95e9 (patch) | |
| tree | fdbbe6b0a209f8cd4efc41a00de24aca27d1cb8f | |
| parent | 359a64219288795936f18fd50fb5f195c412a748 (diff) | |
| download | IT.starlight-464685a3ce33e7ccc8d1d7365935732c87ba95e9.tar.gz IT.starlight-464685a3ce33e7ccc8d1d7365935732c87ba95e9.tar.bz2 IT.starlight-464685a3ce33e7ccc8d1d7365935732c87ba95e9.zip | |
Style `code`, `hr` and `blockquote` within asides (#2119)
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
| -rw-r--r-- | .changeset/tender-fishes-join.md | 5 | ||||
| -rw-r--r-- | packages/starlight/style/markdown.css | 13 |
2 files changed, 15 insertions, 3 deletions
diff --git a/.changeset/tender-fishes-join.md b/.changeset/tender-fishes-join.md new file mode 100644 index 00000000..a4667945 --- /dev/null +++ b/.changeset/tender-fishes-join.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': patch +--- + +Improves styling of `<hr>`, `<blockquote>`, and `<code>` within asides diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css index 836c5320..596ae612 100644 --- a/packages/starlight/style/markdown.css +++ b/packages/starlight/style/markdown.css @@ -126,16 +126,23 @@ .sl-markdown-content th:not([align]):not(:where(.not-content *)) { text-align: start; } -/* Table styles inside asides */ -.sl-markdown-content .starlight-aside :is(th, td):not(:where(.not-content *)) { +/* <table>s, <hr>s, and <blockquote>s inside asides */ +.sl-markdown-content .starlight-aside :is(th, td, hr, blockquote):not(:where(.not-content *)) { border-color: var(--sl-color-gray-4); } @supports (border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent)) { - .sl-markdown-content .starlight-aside :is(th, td):not(:where(.not-content *)) { + .sl-markdown-content .starlight-aside :is(th, td, hr, blockquote):not(:where(.not-content *)) { border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent); } } +/* <code> inside asides */ +@supports (border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent)) { + .sl-markdown-content .starlight-aside code:not(:where(.not-content *)) { + background-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent); + } +} + .sl-markdown-content hr:not(:where(.not-content *)) { border: 0; border-bottom: 1px solid var(--sl-color-hairline); |