Skip to content

🐛 Theme-proof the stylesheet cascade (fix Furo render-pane padding) - #12

Merged
chrisjsewell merged 1 commit into
mainfrom
claude/theme-agnostic-css
Jul 27, 2026
Merged

🐛 Theme-proof the stylesheet cascade (fix Furo render-pane padding)#12
chrisjsewell merged 1 commit into
mainfrom
claude/theme-agnostic-css

Conversation

@chrisjsewell

@chrisjsewell chrisjsewell commented Jul 27, 2026

Copy link
Copy Markdown
Member

Fixes the missing horizontal padding on the render pane under Furo (reported from the live RTD site).

Diagnosis — the shipped cascade comment assumed extension html_css_files load after theme CSS, resolving the specificity tie between Furo's [role=main] .container { padding-left/right: 0 } (0,2,0) and .syntax-example > .syntax-example-render (0,2,0) in our favour. The built page proves otherwise: Furo links furo-extensions.css after extension stylesheets (furo.csssphinx-syntax-example.cssfuro-extensions.css), so the theme wins the tie and zeroes the padding.

Fix — stop relying on stylesheet order anywhere:

  • Render pane: additionally match .syntax-example > .syntax-example-render.container (0,3,0), using the container class docutils emits on container nodes — beats theme .container resets at any load order. The unqualified selector stays for writers that emit no container class (exactly the case where no theme .container rule can interfere either).
  • Outer frame: new .syntax-example.container rule neutralizes Bootstrap-family .container layout (width cap, auto-centring margins, gutter padding) so the frame keeps its own geometry on those themes too.
  • The cascade note is rewritten to document the specificity strategy instead of the (wrong) order assumption.

Verification — headless Chromium against a local Furo build: render-pane computed padding-left was 0px before, 12.8px (.8rem) after; frame geometry (max-width: none, no side padding) unchanged. Full test suite 17/17. Changelog gains an ## Unreleased section carrying the fix.

Note: RTD builds install the package from the repo checkout, so the live docs pick this up on the first build after merge; PyPI users get it with the next tagged release.

Furo links furo-extensions.css AFTER extension html_css_files, so its
[role=main] .container reset (0,2,0) won the specificity tie against
.syntax-example > .syntax-example-render (0,2,0) and zeroed the render
pane's horizontal padding — the old cascade comment's assumption that
extension CSS loads last was wrong.

Stop relying on stylesheet order entirely:

- render pane: also match .syntax-example-render.container (0,3,0),
  using the container class docutils emits, beating theme resets at any
  load order (unqualified selector kept for writers without the class)
- outer frame: .syntax-example.container neutralizes Bootstrap-style
  .container layout (width cap, centring margins, gutter padding) that
  other theme families attach to the docutils class
- rewrite the cascade note to document the specificity strategy

Verified in headless Chromium against a Furo build: render-pane
computed padding-left 0px before, 12.8px (.8rem) after; frame geometry
unchanged. 17/17 tests pass.
@chrisjsewell
chrisjsewell merged commit 4d7b3a4 into main Jul 27, 2026
15 checks passed
@chrisjsewell
chrisjsewell deleted the claude/theme-agnostic-css branch July 27, 2026 14:45
@chrisjsewell chrisjsewell mentioned this pull request Jul 27, 2026
chrisjsewell added a commit that referenced this pull request Jul 27, 2026
Bumps `__version__` to `0.1.1` and dates the changelog entry for the
Furo/theme cascade fix (#12).

Verified locally: 17/17 tests pass; `python -m build` produces `0.1.1`
artifacts and `twine check --strict` passes on both.

After merging, pushing a `v0.1.1` tag triggers the publish workflow.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants