Style code, hr and blockquote within asides (#2119)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
withastro · Jul 10, 2024 · 464685a · 464685a
1 parent 359a642
commit 464685a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/.changeset/tender-fishes-join.md 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
@@ -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);