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;
+ }
}
}