Style qiskit-card directive with Furo (#426)

Part of #327.

We use the same general design as Pytorch, but with several
improvements:

* The image stays a fixed size so that the aspect ratio is respected
better and it doesn't constantly shrink and expand.
* Uses flexbox rather than media queries. This results in a much
smoother experience when resizing the screen.
* Gets rid of a weird black overlay we were putting over the image.
Instead, now we set opacity to 0.7 when not highlighted.
* Adds a border so that there is a more distinct flat design.

Pytorch design:

![pytorch-cards](https://github.com/Qiskit/qiskit_sphinx_theme/assets/14852634/9682efc1-664e-40bd-91c6-f49b06005188)

src/qiskit_sphinx_theme/assets/styles/_custom-directives.scss

@@ -0,0 +1,74 @@
+// -------------------------------------------------------------------------------
+// qiskit-card
+// -------------------------------------------------------------------------------
+
+.qiskit-card {
+  position: relative;  // Needed for `.qiskit-card::after`.
+  display: flex;
+  justify-content: space-between;
+  height: 12rem;
+  margin-bottom: 1.875rem;
+
+  border: 1px solid var(--color-table-border);
+  background-color: var(--color-sidebar-background);
+  cursor: pointer;
+
+  p {
+    color: var(--color-sidebar-link-text);
+  }
+
+  // This creates a purple border at the bottom. We set the width to 0, but to 100% on hover, so
+  // that it transitions in.
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 0;
+    height: 1px;
+    bottom: 0;
+    left: 0;
+    background-color: var(--qiskit-color-purple);
+    transition: width .250s ease-in-out;
+  }
+
+  &:hover {
+    background-color: unset;
+    border-bottom: none;
+
+    p {
+      color: unset;
+    }
+
+    &::after {
+      width: 100%;
+    }
+
+    .qiskit-card-image-container {
+      opacity: unset;
+    }
+  }
+}
+
+.qiskit-card-text-container {
+  flex-grow: 1;
+  min-width: 0;
+  padding: 1rem;
+}
+
+.qiskit-card-image-container {
+  flex-shrink: 0;
+  height: 100%;
+  width: 20rem;  // We use a fixed width so the image doesn't keep resizing.
+
+  opacity: 0.7;
+
+  // Float the image to the right of the container.
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  img {
+    max-height: 100%;
+    max-width: 100%;
+  }
+}

src/qiskit_sphinx_theme/assets/styles/qiskit-sphinx-theme.scss

@@ -1,5 +1,6 @@
 @import "admonitions";
 @import "api";
+@import "custom-directives";
 @import "drop-shadows";
 @import "footer";
 @import "icons";

src/qiskit_sphinx_theme/directives.py

@@ -52,9 +52,11 @@ def run(self) -> list[nodes.paragraph]:
 .. raw:: html
 
     <div class="qiskit-card" link={link}>
-        <h4>{header}</h4>
+      <div class="qiskit-card-text-container">
+        <h3>{header}</h3>
         <p>{card_description}</p>
-        <div class="qiskit-card-image-container"><img src='{image_source}'></div>
+      </div>
+      <div class="qiskit-card-image-container"><img src='{image_source}'></div>
     </div>
 """
         card_list = StringList(card_rst.splitlines())

src/qiskit_sphinx_theme/pytorch/static/css/theme.css

@@ -11596,7 +11596,7 @@ div.qiskit-card {
   opacity: .075;
 }
 
-div.qiskit-card h4 {
+div.qiskit-card h3 {
   width: 70%;
   display: inline-flex;
   margin-bottom: 1.125rem;
@@ -11605,12 +11605,12 @@ div.qiskit-card h4 {
   color: #262626;
 }
 @media screen and (min-width: 768px) {
-  div.qiskit-card h4 {
+  div.qiskit-card h3 {
     width: 75%;
   }
 }
 @media (min-width: 768px) and (max-width: 1239px) {
-  div.qiskit-card h4 {
+  div.qiskit-card h3 {
     width: 70%;
   }
 }

tests/js/snapshots.test.js

@@ -54,8 +54,8 @@ const isVisibleInViewport = async (page, selector) => {
 };
 
 /* If the content is too big for the viewport, the Qiskit top nav bar will hide the content. That
-*  has for some reason caused some flakes in CI, that the nav bar very minorly changes its
-*  position. And it's generally annoying to hide the content we care about. */
+ *  has for some reason caused some flakes in CI, that the nav bar very minorly changes its
+ *  position. And it's generally annoying to hide the content we care about. */
 const hideTopNavBar = async (page) => {
   await page
     .locator("qiskit-ui-shell")
@@ -286,3 +286,10 @@ test("Jupyter works with copybutton", async ({ page }) => {
   const pageContents = page.locator("section#jupyter");
   await expect(pageContents).toHaveScreenshot();
 });
+
+test("custom directives", async ({ page }) => {
+  await page.goto("sphinx_guide/custom_directives.html");
+  const cards = page.locator("section#qiskit-card");
+  await cards.hover();
+  await expect(cards).toHaveScreenshot();
+});