From c7fe52bb5b2437773c1bbba5253043366523e6a8 Mon Sep 17 00:00:00 2001 From: hongyi-chen Date: Fri, 5 Jun 2026 00:22:07 +0000 Subject: [PATCH 1/3] Center width-constrained figures and harden default image centering Width-constrained figures (e.g. `
`) were rendering flush left instead of centered. The figure rule used `margin: 1.5em 0`, so a figure narrower than the content column kept zero side margins; `text-align: center` only centers content inside the box, not the box itself. Switch to `margin: 1.5em auto` so constrained figures center on the page (full-width figures resolve auto margins to 0). This fixes the prompt-queueing page and ~16 other pages using the same pattern. Also harden the default image-centering rule: - Center link-wrapped images (`

`) via the paragraph, since the inline `` shrink-wraps the image and defeats auto margins. - Make the "exclude images inside tables" intent actually work with `:not(:where(table *))` (the old `:not(table)` never matched, since an in-cell image's parent is ``, not ``). Co-Authored-By: Oz --- src/styles/custom.css | 32 ++++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/src/styles/custom.css b/src/styles/custom.css index b8fa8009..9a47691c 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -263,14 +263,32 @@ body { color: #faf9f6; } -/* Center all images in content by default (excluding those inside tables) */ -.sl-markdown-content :not(table) > img, +/* Center images in content by default. + + Covers every standard embed pattern used in the docs: + * standalone markdown images →

+ * link-wrapped images →

+ * raw/standalone in any other non-table wrapper + + The `:not(:where(table *))` guard genuinely excludes images inside + tables (an in-cell image's parent is
, not , so the old + `:not(table)` never actually excluded them). `:where()` has zero + specificity, so the exclusion never fights the rest of the selector. + Code-block figures are handled separately below. */ +.sl-markdown-content :not(table) > img:not(:where(table *)), .sl-markdown-content p > img { display: block; margin-left: auto; margin-right: auto; } +/* Link-wrapped images render as

. The inline + shrink-wraps the image, so auto margins on the alone can't pull it + to the page center — center the anchor's inline box via the paragraph. */ +.sl-markdown-content p:has(> a > img) { + text-align: center; +} + /* Figures — centered block with image and optional caption. GitBook rendered `
…
` natively; these styles restore that treatment in Astro Starlight. @@ -280,9 +298,15 @@ body { language. Don't repeat surrounding prose or list everything visible. Exclude Expressive Code figures (code blocks) — they render inside a - `.expressive-code` wrapper and must not be center-aligned. */ + `.expressive-code` wrapper and must not be center-aligned. + + Horizontal margins are `auto` so a width-constrained figure (e.g. + `
`) centers on the page. With + `margin: 1.5em 0` such a figure keeps zero side margins and sits flush + left, since `text-align: center` only centers content inside the box, + not the box itself. Full-width figures resolve auto margins to 0. */ .sl-markdown-content figure:not(.expressive-code figure) { - margin: 1.5em 0; + margin: 1.5em auto; text-align: center; } From 5a182869c9da12dbf5f314504d3041c4abb7bfbe Mon Sep 17 00:00:00 2001 From: Hong Yi Chen Date: Thu, 4 Jun 2026 17:26:35 -0700 Subject: [PATCH 2/3] Update src/styles/custom.css Co-authored-by: oz-for-oss[bot] <277970191+oz-for-oss[bot]@users.noreply.github.com> --- src/styles/custom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/custom.css b/src/styles/custom.css index 9a47691c..0f7f2ca5 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -276,7 +276,7 @@ body { specificity, so the exclusion never fights the rest of the selector. Code-block figures are handled separately below. */ .sl-markdown-content :not(table) > img:not(:where(table *)), -.sl-markdown-content p > img { +.sl-markdown-content p > img:not(:where(table *)) { display: block; margin-left: auto; margin-right: auto; From fa4b88688fba54ac0d4cc05ba8e583fab33de96b Mon Sep 17 00:00:00 2001 From: Hong Yi Chen Date: Thu, 4 Jun 2026 17:26:42 -0700 Subject: [PATCH 3/3] Update src/styles/custom.css Co-authored-by: oz-for-oss[bot] <277970191+oz-for-oss[bot]@users.noreply.github.com> --- src/styles/custom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/custom.css b/src/styles/custom.css index 0f7f2ca5..8afdcb55 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -285,7 +285,7 @@ body { /* Link-wrapped images render as

. The inline shrink-wraps the image, so auto margins on the alone can't pull it to the page center — center the anchor's inline box via the paragraph. */ -.sl-markdown-content p:has(> a > img) { +.sl-markdown-content p:has(> a > img):not(:where(table *)) { text-align: center; }