diff --git a/docs/examples/gallery.md b/docs/examples/gallery.md index 888b6d416..74d7321cb 100644 --- a/docs/examples/gallery.md +++ b/docs/examples/gallery.md @@ -35,7 +35,7 @@ Thanks for your support! link: https://fairlearn.org/main/about/ - title: Feature-engine link: https://feature-engine.readthedocs.io/ -- title: idtracker.ai +- title: idtracker.ai link: https://idtracker.ai/ - title: MegEngine link: https://www.megengine.org.cn/doc/stable/en/index.html diff --git a/docs/index.md b/docs/index.md index 0e5562f93..67a852a44 100644 --- a/docs/index.md +++ b/docs/index.md @@ -21,13 +21,11 @@ A clean, Bootstrap-based Sphinx theme by and for [the PyData community](https:// - header: "{fas}`circle-half-stroke;pst-color-primary` Light / Dark theme" content: "Users can toggle between light and dark themes interactively." - header: "{fas}`palette;pst-color-primary` Customizable UI and themes" - content: "Customize colors and branding with CSS variables, and build custom UIs with [Sphinx Design](user_guide/web-components)." + content: "Customize colors and branding with CSS variables, and build custom UIs with [Sphinx Design components](user_guide/web-components)." - header: "{fab}`python;pst-color-primary` Supports PyData and Jupyter" - content: "CSS and UI support for Jupyter extensions and PyData execution outputs." - link: "examples/pydata.html" + content: "CSS and UI support for Jupyter extensions and [PyData execution outputs](examples/pydata.ipynb)." - header: "{fas}`lightbulb;pst-color-primary` Example Gallery" - content: "See our gallery of projects that use this theme." - link: "examples/gallery.html" + content: "See [our gallery](examples/gallery.md) of projects that use this theme." ``` ```{seealso} diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss index 81bd3e172..8c4428f42 100644 --- a/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss +++ b/src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss @@ -140,11 +140,6 @@ html[data-theme="light"] { .sd-card-header { background-color: var(--pst-color-panel-background); border-bottom: 1px solid var(--pst-color-border); - - &:focus-visible { - outline: $focus-ring-outline; - outline-offset: -$focus-ring-width; - } } .sd-card-footer { background-color: var(--pst-color-panel-background); @@ -154,6 +149,22 @@ html[data-theme="light"] { .sd-card-body { background-color: var(--pst-color-panel-background); } + + // Focus ring for link-cards + .sd-stretched-link:focus-visible { + // Don't put the focus ring on the element (it has zero height in Sphinx Design cards) + outline: none; + + // Put the focus ring on the element's ::after pseudo-element + &:after { + outline: $focus-ring-outline; + border-radius: 0.25rem; // copied from Sphinx Design CSS for .sd-card + } + } + + &.sd-card-hover:hover { + border-color: var(--pst-color-link-hover); + } } /******************************************************************************* * tabs @@ -261,5 +272,11 @@ details.sd-dropdown { .sd-summary-down { top: 0.7rem; } + + // Focus ring + &:focus-visible { + outline: $focus-ring-outline; + outline-offset: -$focus-ring-width; + } } }