Fix SD link-card focus ring and on homepage, bring links inside card

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

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}

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 <a> element (it has zero height in Sphinx Design cards)
+    outline: none;
+
+    // Put the focus ring on the <a> 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;
+    }
   }
 }