From dc3aaaba6184ad8ef816e7bdec859df19eb8bbf2 Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Sat, 29 Jun 2024 03:54:20 -0400
Subject: [PATCH 1/9] Convert introduction from HTML to sphinx-design

---
 docs/_static/css/landing.css        | 40 ++++++++++----------
 docs/_static/script.js              |  2 +-
 docs/_templates/landing_footer.html |  2 +-
 docs/body.html                      | 57 -----------------------------
 docs/conf.py                        |  1 +
 docs/index.rst                      | 43 +++++++++++++++++++++-
 requirements.txt                    |  1 +
 7 files changed, 66 insertions(+), 80 deletions(-)

diff --git a/docs/_static/css/landing.css b/docs/_static/css/landing.css
index b0a6a42..a723849 100644
--- a/docs/_static/css/landing.css
+++ b/docs/_static/css/landing.css
@@ -58,6 +58,14 @@
   --shadow: 0px 2px 2px rgba(0, 0, 0, 0.11);
 }
 
+/* Introductory title. */
+.intro-title {
+  color: var(--pst-color-primary);
+  font-family: var(--pst-font-family-heading);
+  font-size: var(--pst-font-size-h2);
+  font-weight: var(--regular) !important;
+}
+
 /* callout boxes */
 .callout {
   border-left: solid 1px var(--pst-color-border);
@@ -493,15 +501,6 @@ main.bd-main {
   grid-area: intro-start / intro-start / footer-start / intro-text-end;
 }
 
-.grid__intro-text {
-  grid-area: intro-text;
-}
-
-.grid__intro {
-  margin-top: 4em;
-  grid-area: intro;
-}
-
 .grid__quicklinks {
   margin-top: 2em;
   grid-area: quicklinks;
@@ -657,6 +656,7 @@ a.button {
   width: fit-content;
   width: -moz-fit-content;
   display: block;
+  border: none;
   border-radius: var(--border-radius);
   color: var(--white);
   margin: 1em 0;
@@ -685,30 +685,30 @@ a.button:hover::after {
   margin-left: 80px;
 }
 
-.button--purple,
-a.button--purple {
+.button-purple,
+a.button-purple {
   background: var(--viridis-purple);
 }
 
-.button--blue,
-a.button--blue {
+.button-blue,
+a.button-blue {
   background: var(--viridis-blue);
 }
 
-.button--teal,
-a.button--teal {
+.button-teal,
+a.button-teal {
   background: var(--viridis-teal);
 }
 
-.button--green,
-a.button--green,
-a.button--green:hover {
+.button-green,
+a.button-green,
+a.button-green:hover {
   background: var(--viridis-green);
   color: var(--black);
 }
 
-.button--green::after,
-a.button--green::after {
+.button-green::after,
+a.button-green::after {
   content: "\f061"; /* fa-arrow-right */
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
diff --git a/docs/_static/script.js b/docs/_static/script.js
index a94e644..c9e0c35 100644
--- a/docs/_static/script.js
+++ b/docs/_static/script.js
@@ -56,7 +56,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
     '<img class="imrot-img" src="' + img_src + '" aria-labelledby="sample-plot-caption"/>' +
     '<div class="imrot-cap" id="sample-plot-caption">' + caption + '</div>' +
     '</a>';
-  document.getElementById('image_rotator').innerHTML = html;
+  document.getElementById('image-rotator').innerHTML = html;
 
 });
 
diff --git a/docs/_templates/landing_footer.html b/docs/_templates/landing_footer.html
index e502188..bf35027 100644
--- a/docs/_templates/landing_footer.html
+++ b/docs/_templates/landing_footer.html
@@ -30,7 +30,7 @@ <h1>Matplotlib</h1>
     </ul>
     <a
       href="https://numfocus.org/donate-to-matplotlib"
-      class="button button--green"
+      class="button button-green"
       >Donate to Matplotlib</a>
 
     <p class="copywrite">{{ copyright }}</p>
diff --git a/docs/body.html b/docs/body.html
index d089ad8..cb0783a 100644
--- a/docs/body.html
+++ b/docs/body.html
@@ -1,60 +1,3 @@
-      <section class="grid__intro-text">
-        <h1>Matplotlib: Visualization with Python</h1>
-        <p>
-          Matplotlib is a comprehensive library for creating static, animated,
-          and interactive visualizations in Python. Matplotlib makes easy things
-          easy and hard things possible.
-        </p>
-
-        <ul class="no-padding">
-          <li>
-            Create
-            <a href="https://ieeexplore.ieee.org/document/4160265/citations?tabFilter=papers"
-              >publication quality plots</a>.
-          </li>
-          <li>
-            Make
-            <a
-              href="https://mybinder.org/v2/gh/matplotlib/mpl-brochure-binder/main?labpath=MatplotlibExample.ipynb"
-              >interactive figures</a> that can zoom, pan, update.
-          </li>
-          <li>
-            Customize
-            <a
-              href="https://matplotlib.org/stable/gallery/style_sheets/style_sheets_reference.html"
-            >visual style</a> and
-            <a href="https://matplotlib.org/stable/tutorials/provisional/mosaic.html"
-            >layout</a>.
-          </li>
-          <li>
-            Export to
-            <a href="https://matplotlib.org/stable/api/figure_api.html#matplotlib.figure.Figure.savefig"
-              >many file formats</a>.
-          </li>
-          <li>
-            Embed in
-            <a href="https://matplotlib.org/stable/gallery/#embedding-matplotlib-in-graphical-user-interfaces"
-              >JupyterLab and Graphical User Interfaces</a>.
-          </li>
-          <li>
-            Use a rich array of
-            <a href="https://matplotlib.org/mpl-third-party/"
-              >third-party packages</a>
-            built on Matplotlib.
-          </li>
-        </ul>
-
-        <a
-          href="https://mybinder.org/v2/gh/matplotlib/mpl-brochure-binder/main?labpath=MatplotlibExample.ipynb"
-          class="button button--purple"
-          tabindex="0"
-          role="button"
-        >
-          Try Matplotlib (on Binder)</a>
-      </section>
-      <section class="grid__intro" id="image_rotator"></section>
-      <!-- END INTRO SECTION -->
-
       <!-- START QUICKLINKS -->
       <section class="grid__quicklinks">
         <ul class="quicklinks">
diff --git a/docs/conf.py b/docs/conf.py
index 5da9c3d..e89b67e 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -17,6 +17,7 @@
 # ones.
 extensions = [
     'notfound.extension',
+    'sphinx_design',
 ]
 
 # The language for content autogenerated by Sphinx. Refer to documentation for
diff --git a/docs/index.rst b/docs/index.rst
index 464cdc7..6289279 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -1,4 +1,45 @@
 .. title:: Matplotlib
 
+.. grid::
+   :class-row: sd-align-minor-center
+   :reverse:
+   :gutter: 1
+
+   .. grid-item-card:: Matplotlib: Visualization with Python
+      :class-card: sd-border-0
+      :class-title: intro-title
+      :shadow: none
+
+      Matplotlib is a comprehensive library for creating static, animated, and
+      interactive visualizations in Python. Matplotlib makes easy things easy and hard
+      things possible.
+
+      - Create `publication quality plots
+        <https://ieeexplore.ieee.org/document/4160265/citations?tabFilter=papers>`__.
+      - Make `interactive figures
+        <https://mybinder.org/v2/gh/matplotlib/mpl-brochure-binder/main?labpath=MatplotlibExample.ipynb>`__
+        that can zoom, pan, update.
+      - Customize `visual style
+        <https://matplotlib.org/stable/gallery/style_sheets/style_sheets_reference.html>`__
+        and `layout <https://matplotlib.org/stable/tutorials/provisional/mosaic.html>`__.
+      - Export to `many file formats
+        <https://matplotlib.org/stable/api/figure_api.html#matplotlib.figure.Figure.savefig>`__.
+      - Embed in `JupyterLab and Graphical User Interfaces
+        <https://matplotlib.org/stable/gallery/#embedding-matplotlib-in-graphical-user-interfaces>`__.
+      - Use a rich array of `third-party packages
+        <https://matplotlib.org/mpl-third-party/>`__ built on Matplotlib.
+
+      .. button-link:: https://mybinder.org/v2/gh/matplotlib/mpl-brochure-binder/main?labpath=MatplotlibExample.ipynb
+         :class: button button-purple
+
+         Try Matplotlib (on Binder)
+
+   .. grid-item::
+
+      .. div::
+         :name: image-rotator
+
+         .. empty:
+
 .. raw:: html
-   :file: body.html
\ No newline at end of file
+   :file: body.html
diff --git a/requirements.txt b/requirements.txt
index 0eab217..4c16102 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -3,4 +3,5 @@ mpl-sphinx-theme~=3.9.0
 pydata-sphinx-theme~=0.15.0
 pygments>=2.7
 sphinx>=7.1
+sphinx-design>=0.6.0
 sphinx-notfound-page

From 6917a217968ad3f890ac9f9646cc060caf745ff1 Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Sat, 29 Jun 2024 04:25:59 -0400
Subject: [PATCH 2/9] Convert quicklinks from HTML to sphinx-design

---
 docs/_static/css/landing.css | 58 +++++------------------------------
 docs/body.html               | 59 ------------------------------------
 docs/conf.py                 | 15 +++++++++
 docs/index.rst               | 41 +++++++++++++++++++++++++
 4 files changed, 64 insertions(+), 109 deletions(-)

diff --git a/docs/_static/css/landing.css b/docs/_static/css/landing.css
index a723849..89b6523 100644
--- a/docs/_static/css/landing.css
+++ b/docs/_static/css/landing.css
@@ -151,54 +151,28 @@ a.link--offsite::after {
   border: none;
   height: 1px;
   margin-bottom: 0em;
+  margin-top: 1em;
 }
 
-.rule--viridis {
+.rule-viridis {
   background-image: var(--viridis);
   height: 3px;
   margin-bottom: 0em;
 }
 
 /* Quicklinks */
-.quicklinks {
-  padding: 0;
-  list-style-type: none;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
 
-.quicklinks a {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1 1 100px;
-  font-size: var(--heading-4);
-  font-family: var(--heading-font);
+.quicklink {
+  text-decoration: underline;
 }
 
-.quicklinks a, .quicklinks a:visited,
-.quicklinks a:hover, .quicklinks a:visited:hover {
-  color: var(--default-text);
+.quicklink:hover {
+  text-decoration-thickness: max(3px,.1875rem,.12em);
 }
 
-.quicklinks__icon {
+.quicklink img {
   width: 1in;
-  display: block;
-  margin-bottom: 10px;
-}
-
-@media (max-width: 700px) {
-  .quicklinks__icon {
-    width: 60px;
-  }
-  .quicklinks a {
-    font-size: var(--base-font);
-  }
-  .quicklinks li {
-    margin-bottom: 20px;
-  }
+  margin: 0 auto;
 }
 
 /* News */
@@ -501,22 +475,6 @@ main.bd-main {
   grid-area: intro-start / intro-start / footer-start / intro-text-end;
 }
 
-.grid__quicklinks {
-  margin-top: 2em;
-  grid-area: quicklinks;
-}
-
-@media (min-width: 1000px) {
-  .grid__quicklinks {
-    padding: 0 100px;
-  }
-}
-
-.grid__rule1 {
-  margin-top: 1em;
-  grid-area: rule1;
-}
-
 .grid__resources {
   grid-area: resources;
 }
diff --git a/docs/body.html b/docs/body.html
index cb0783a..5c1d7f2 100644
--- a/docs/body.html
+++ b/docs/body.html
@@ -1,62 +1,3 @@
-      <!-- START QUICKLINKS -->
-      <section class="grid__quicklinks">
-        <ul class="quicklinks">
-          <li>
-            <a href="https://matplotlib.org/stable/users/getting_started/">
-              <img
-                src="_static/images/getting-started.svg"
-                alt="computer desktop icon"
-                class="quicklinks__icon dark-light"
-              />
-              Getting Started
-            </a>
-          </li>
-          <li>
-            <a href="https://matplotlib.org/stable/plot_types/index.html">
-              <img
-                src="_static/images/sample-plots.svg"
-                alt="folder icon"
-                class="quicklinks__icon dark-light"
-              />
-              Examples
-            </a>
-          </li>
-          <li>
-            <a href="https://matplotlib.org/stable/index.html">
-              <img
-                src="_static/images/userguide.svg"
-                alt="documentation book icon"
-                class="quicklinks__icon dark-light"
-              />
-              Reference
-            </a>
-          </li>
-          <li>
-            <a href="https://matplotlib.org/cheatsheets/">
-              <img
-                src="_static/images/cheatsheets.svg"
-                alt="cheatsheet icon"
-                class="quicklinks__icon dark-light"
-              />
-              Cheat Sheets
-            </a>
-          </li>
-          <li>
-            <a href="https://matplotlib.org/stable/index.html">
-              <img
-                src="_static/images/documentation.svg"
-                alt="matplotlib logo icon"
-                class="quicklinks__icon dark-light"
-              />
-              Documentation
-            </a>
-          </li>
-        </ul>
-      </section>
-      <!-- END QUICKLINKS -->
-
-      <div class="rule rule--viridis grid__rule1"></div>
-
       <!-- News -->
       <section class="grid__news news" id="news">
         <div class="news__items">
diff --git a/docs/conf.py b/docs/conf.py
index e89b67e..d3903b3 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -51,3 +51,18 @@
 
 # Prefix added to all the URLs generated in the 404 page.
 notfound_urls_prefix = '/'
+
+# -- Options for sphinx-design ------------------------------------------------
+
+sd_custom_directives = {
+    "quicklink": {
+        "inherit": "grid-item-card",
+        "options": {
+            "class-card": "quicklink sd-border-0",
+            "class-img-top": "dark-light",
+            "margin": "5",
+            "shadow": "none",
+            "text-align": "center",
+        },
+    }
+}
diff --git a/docs/index.rst b/docs/index.rst
index 6289279..a099267 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -41,5 +41,46 @@
 
          .. empty:
 
+.. grid::
+
+   .. quicklink::
+      :img-top: _static/images/getting-started.svg
+      :img-alt: computer desktop icon
+      :link: https://matplotlib.org/stable/users/getting_started/
+
+      Getting Started
+
+   .. quicklink::
+      :img-top: _static/images/sample-plots.svg
+      :img-alt: folder icon
+      :link: https://matplotlib.org/stable/plot_types/index.html
+
+      Examples
+
+   .. quicklink::
+      :img-top: _static/images/userguide.svg
+      :img-alt: documentation book icon
+      :link: https://matplotlib.org/stable/index.html
+
+      Reference
+
+   .. quicklink::
+      :img-top: _static/images/cheatsheets.svg
+      :img-alt: cheatsheet icon
+      :link: https://matplotlib.org/cheatsheets/
+
+      Cheat Sheets
+
+   .. quicklink::
+      :img-top: _static/images/documentation.svg
+      :img-alt: matplotlib logo icon
+      :link: https://matplotlib.org/stable/index.html
+
+      Documentation
+
+.. div:: rule rule-viridis
+
+   .. empty:
+
 .. raw:: html
    :file: body.html

From 342eb6e8055a291edd3cd7619187566e80021ae2 Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Sat, 29 Jun 2024 04:49:37 -0400
Subject: [PATCH 3/9] Convert news and resources from HTML to sphinx-design

---
 docs/_static/css/landing.css | 73 ++++++++++++++++-------------
 docs/body.html               | 91 ------------------------------------
 docs/index.rst               | 79 +++++++++++++++++++++++++++++++
 3 files changed, 119 insertions(+), 124 deletions(-)

diff --git a/docs/_static/css/landing.css b/docs/_static/css/landing.css
index 89b6523..fd68420 100644
--- a/docs/_static/css/landing.css
+++ b/docs/_static/css/landing.css
@@ -66,6 +66,30 @@
   font-weight: var(--regular) !important;
 }
 
+.mpl-card-title {
+  color: var(--pst-color-text-base);
+  font-family: var(--pst-font-family-heading);
+  font-size: var(--pst-font-size-h3);
+  font-weight: var(--regular) !important;
+}
+
+.mpl-card-resources ul {
+  list-style-type: none;
+  padding: 0;
+  display: table;
+  border-collapse: separate;
+  border-spacing: 0 1em;
+}
+
+.mpl-card-resources ul li {
+  display: table-row;
+}
+
+.mpl-card-resources ul li p {
+  display: table-cell;
+  vertical-align: middle;
+}
+
 /* callout boxes */
 .callout {
   border-left: solid 1px var(--pst-color-border);
@@ -79,15 +103,6 @@
   position: relative;
 }
 
-.callout__list {
-  display: flex;
-  flex-direction: row;
-}
-
-.callout__list p{
-  margin: 1em 0;
-}
-
 .callout::before {
   content: "";
   position: absolute;
@@ -115,7 +130,7 @@
   background-image: var(--viridis-green);
 }
 
-.callout__icon {
+.callout-icon {
   color: var(--pst-color-primary);
   font-size: 2em;
   margin: auto 10px auto 0;
@@ -124,6 +139,7 @@
 .callout > * {
   margin-top: 0;
 }
+
 /* offsite links */
 a.link--offsite {
   font-size: var(--pst-font-size-h5);
@@ -133,7 +149,13 @@ a.link--offsite {
   transition: left 0.2s ease-in-out;
 }
 
-a.link--offsite::after {
+a.link-offsite, div.link-offsite a {
+  font-size: var(--pst-font-size-h5);
+  padding-left: 0;
+  transition: left 0.2s ease-in-out;
+}
+
+a.link--offsite::after, a.link-offsite::after, div.link-offsite a::after {
   display: inline-block;
   font-style: normal;
   font-variant: normal;
@@ -176,22 +198,20 @@ a.link--offsite::after {
 }
 
 /* News */
-.news {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  margin-bottom: 2em;
-}
 
-.news__item:not(:last-of-type){
+.news-item:not(:last-of-type) {
   margin-bottom: 2em;
 }
 
-.news__item--highlight, .news__item:last-of-type {
+.news-item-highlight, .news-item:last-of-type {
   margin-bottom: 40px;
 }
 
-.news__item .date, .news__item--highlight .date{
+.news-item-highlight p:first-of-type, .news-item p:first-of-type {
+  margin-bottom: 0;
+}
+
+.news-item .date, .news-item-highlight .date {
   margin: 1em 0 .5em;
 }
 
@@ -475,19 +495,6 @@ main.bd-main {
   grid-area: intro-start / intro-start / footer-start / intro-text-end;
 }
 
-.grid__resources {
-  grid-area: resources;
-}
-
-.grid__news {
-  grid-area: news;
-}
-
-.grid__rule2 {
-  margin-top: 1em;
-  grid-area: rule2;
-}
-
 .grid__tools {
   margin-top: 2em;
   margin-bottom: 2em;
diff --git a/docs/body.html b/docs/body.html
index 5c1d7f2..b0c7971 100644
--- a/docs/body.html
+++ b/docs/body.html
@@ -1,94 +1,3 @@
-      <!-- News -->
-      <section class="grid__news news" id="news">
-        <div class="news__items">
-          <!-- make these easier to visually differentiate !-->
-          <!-- optional important news -->
-          <h3>News<a class="headerlink" href="#news" title="Permalink to news section">#</a></h3>
-          <div class="news__item--highlight">
-            <h5 class="date">May 30, 2024</h5>
-            <a href="https://discourse.matplotlib.org/t/gsoc-2024-announcement/24469" class="link--offsite">GSOC 2024: Bivariate Colormaps</a>
-            <p>
-            A warm welcome to Trygve Magnus Ræder, who is working on <a href="https://trygvrad.github.io/google-soc-bivariate-colormaps/"> bivariate colormapping</a>.
-            </p>
-          </div>
-
-          <div class="news__item">
-            <h5 class="date">May 16, 2024</h5>
-            <a href="https://discourse.matplotlib.org/t/matplotlib-announce-ann-matplotlib-3-9-0/24444" class="link--offsite">Matplotlib 3.9.0 Released</a>
-            <p>
-             We thank the 175 authors for the 450 pull requests that comprise the 3.9.0 release.
-            </p>
-          </div>
-
-          <!-- END NEWS ITEMS -->
-          <!-- link to discourse -->
-          <div class="news__discourse-link">
-            <div class="rule"></div>
-            <a
-              href="https://discourse.matplotlib.org/c/announce/14"
-              class="link--offsite">Older Announcements</a>
-          </div>
-        </div>
-      </section>
-
-      <!-- START RESOURCES -->
-      <section class="grid__resources" id="resources">
-        <!-- drop boxes !-->
-        <h3>Resources<a class ="headerlink" href="#resources" title="Permalink to resources section">#</a></h3>
-        <div class="callout__list">
-          <i class="far fa-question-circle callout__icon"></i>
-          <p>
-            Be sure to check the
-            <a href="https://matplotlib.org/stable/users/index.html">Users
-            guide</a> and the
-            <a href="https://matplotlib.org/stable/api/index.html">API
-            docs</a>. The full text
-            <a href="https://matplotlib.org/stable/search.html">search</a> is a
-            good way to discover the docs including the many examples.
-          </p>
-        </div>
-
-        <div class="callout__list">
-          <i class="fab fa-discourse callout__icon" aria-hidden="true"></i>
-          <p>
-            Join our community at
-            <a href="https://discourse.matplotlib.org">discourse.matplotlib.org</a>
-            to get help, share your work, and discuss contributing &amp;
-            development.
-          </p>
-        </div>
-
-        <div class="callout__list">
-          <i class="fab fa-stack-overflow callout__icon" aria-hidden="true"></i>
-          <p>
-            Check out the Matplotlib tag on
-            <a href="https://stackoverflow.com/questions/tagged/matplotlib"
-              >StackOverflow</a>.
-          </p>
-        </div>
-
-        <div class="callout__list">
-          <i class="fa fa-solid fa-calendar-alt callout__icon" aria-hidden="true"></i>
-          <p>
-            Meet us at our monthly call for new contributors to the Matplotlib
-            project. Subscribe to our
-            <a href="https://scientific-python.org/calendars/">community calendar</a>
-            at Scientific Python to get access to all our community meetings.
-          </p>
-        </div>
-
-        <div class="callout__list">
-          <i class="fab fa-gitter callout__icon" aria-hidden="true"></i>
-          <p>
-            Short questions related to contributing to Matplotlib may be posted on the
-            <a href="https://gitter.im/matplotlib/matplotlib">gitter</a>
-            channel.
-          </p>
-        </div>
-      </section>
-      <!-- END RESOURCES -->
-
-      <div class="rule rule--viridis grid__rule2" id="domain-specific-tools"></div>
       <!-- START DOMAIN SPECIFIC TOOLS -->
       <section class="grid__tools">
         <h3>Domain Specific Tools<a class="headerlink" href="#domain-specific-tools" title="Permalink to domain specific tools section">#</a></h3>
diff --git a/docs/index.rst b/docs/index.rst
index a099267..32f179a 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -82,5 +82,84 @@
 
    .. empty:
 
+.. grid::
+   :gutter: 1
+
+   .. grid-item-card:: News
+      :class-card: sd-border-0
+      :class-title: mpl-card-title
+      :class-footer: link-offsite
+      :shadow: none
+
+      .. div:: news-item-highlight
+
+         .. div:: date
+
+            May 30, 2024
+
+         .. button-link:: https://discourse.matplotlib.org/t/gsoc-2024-announcement/24469
+            :class: link-offsite
+
+            GSOC 2024: Bivariate Colormaps
+
+         A warm welcome to Trygve Magnus Ræder, who is working on `bivariate colormapping
+         <https://trygvrad.github.io/google-soc-bivariate-colormaps/>`__.
+
+      .. div:: news-item
+
+         .. div:: date
+
+            May 16, 2023
+
+         .. button-link:: https://discourse.matplotlib.org/t/matplotlib-announce-ann-matplotlib-3-9-0/24444
+            :class: link-offsite
+
+            Matplotlib 3.9.0 Released
+
+         We thank the 175 authors for the 450 pull requests that comprise the 3.9.0 release.
+
+      +++
+      `Older Announcements <https://discourse.matplotlib.org/c/announce/14>`__
+
+   .. grid-item-card:: Resources
+      :class-card: sd-border-0 mpl-card-resources
+      :class-title: mpl-card-title
+      :shadow: none
+
+      - :far:`question-circle;callout-icon`
+
+        Be sure to check the `Users guide
+        <https://matplotlib.org/stable/users/index.html>`__ and the `API docs
+        <https://matplotlib.org/stable/api/index.html>`__. The full text `search
+        <https://matplotlib.org/stable/search.html>`__ is a good way to discover the docs
+        including the many examples.
+
+      - :fab:`discourse;callout-icon`
+
+        Join our community at `discourse.matplotlib.org
+        <https://discourse.matplotlib.org>`__ to get help, share your work, and discuss
+        contributing & development.
+
+      - :fab:`stack-overflow;callout-icon`
+
+        Check out the Matplotlib tag on `StackOverflow
+        <https://stackoverflow.com/questions/tagged/matplotlib>`__.
+
+      - :fas:`calendar-alt;callout-icon`
+
+        Meet us at our monthly call for new contributors to the Matplotlib project.
+        Subscribe to our `community calendar
+        <https://scientific-python.org/calendars/>`__ at Scientific Python to get access
+        to all our community meetings.
+
+      - :fab:`gitter;callout-icon`
+
+        Short questions related to contributing to Matplotlib may be posted on the
+        `gitter <https://gitter.im/matplotlib/matplotlib>`__ channel.
+
+.. div:: rule rule-viridis
+
+   .. empty:
+
 .. raw:: html
    :file: body.html

From 079b852d6caf15c67ca025f4c31b22e99c4a8f9c Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Sat, 29 Jun 2024 06:38:14 -0400
Subject: [PATCH 4/9] Convert Domain Specific Tools from HTML to sphinx-design

---
 docs/_static/css/landing.css | 177 +++++----------------------------
 docs/_static/script.js       |  70 --------------
 docs/body.html               | 183 -----------------------------------
 docs/index.rst               |  99 +++++++++++++++++++
 4 files changed, 125 insertions(+), 404 deletions(-)

diff --git a/docs/_static/css/landing.css b/docs/_static/css/landing.css
index fd68420..6768d3e 100644
--- a/docs/_static/css/landing.css
+++ b/docs/_static/css/landing.css
@@ -218,120 +218,45 @@ a.link--offsite::after, a.link-offsite::after, div.link-offsite a::after {
 .date{
   font-size: small;
 }
+
 /* tab switcher */
 .tools {
   min-height: 280px;
 }
 
-.tabs {
-  padding: 0;
-  padding: 0;
-  list-style-type: none;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  position: relative;
-}
-
-.tabs__tab {
-  border: none;
-  text-align: right;
-  line-height: 1em;
-  cursor: pointer;
-  padding: 0.5em 0;
-  background-color: transparent;
-  font-family: var(--heading-font);
-  color: var(--pst-color-link);
-  font-size: var(--heading-4);
-  font-weight: var(--bold);
-  transition: left 0.2s ease-out;
-  position: relative;
-  left: 0;
-}
-
-.tabs__tab:hover {
-  left: 8px;
-}
-
-.tabs__content {
-  border-top: solid 1px var(--pst-color-border);
-  border-bottom: solid 1px var(--pst-color-border);
-  border-right: solid 1px var(--pst-color-border);
-  flex-grow: 1;
-  padding: 20px 40px 20px 50px;
-  position: relative;
-}
-
-.tabs::before {
-  content: "";
-  width: 8px;
-  height: 100%;
-  background-color: var(--dark-purple);
-  position: absolute;
-  top: 0;
-  right: -20px;
-  display: block;
-  transition: background-color 0.2s ease-in-out;
-}
-
-.tabs[data-current-tab="0"]::before {
-  background-color: var(--dark-purple);
-}
-
-.tabs[data-current-tab="1"]::before {
-  background-color: var(--purple);
-}
-
-.tabs[data-current-tab="2"]::before {
-  background-color: var(--blue);
-}
-
-.tabs[data-current-tab="3"]::before {
-  background-color: var(--teal);
-}
-
-.tabs[data-current-tab="4"]::before {
-  background-color: var(--green);
-}
-
-.tabs::after {
-  content: "";
-  width: 0;
-  height: 0;
-  border-top: 9px solid transparent;
-  border-left: 18px solid var(--purple);
-  border-bottom: 9px solid transparent;
-  position: absolute;
-  right: -38px;
-  top: 0;
-  display: block;
-  margin: 10% 0;
-  transition: top 0.2s ease-out, border-left-color 0.2s ease-in-out;
-}
-
-.tabs[data-current-tab="0"]::after {
-  top: 0;
-  border-left-color: var(--dark-purple);
+.tabs-tab[for="sd-tab-item-0"] {
+  --sd-color-tabs-underline-active: var(--dark-purple);
+  --sd-color-tabs-underline-hover: var(--dark-purple);
+  --sd-color-tabs-label-active: var(--dark-purple);
+  --sd-color-tabs-label-hover: var(--dark-purple);
 }
 
-.tabs[data-current-tab="1"]::after {
-  top: 20%;
-  border-left-color: var(--purple);
+.tabs-tab[for="sd-tab-item-1"] {
+  --sd-color-tabs-underline-active: var(--purple);
+  --sd-color-tabs-underline-hover: var(--purple);
+  --sd-color-tabs-label-active: var(--purple);
+  --sd-color-tabs-label-hover: var(--purple);
 }
 
-.tabs[data-current-tab="2"]::after {
-  top: 40%;
-  border-left-color: var(--blue);
+.tabs-tab[for="sd-tab-item-2"] {
+  --sd-color-tabs-underline-active: var(--blue);
+  --sd-color-tabs-underline-hover: var(--blue);
+  --sd-color-tabs-label-active: var(--blue);
+  --sd-color-tabs-label-hover: var(--blue);
 }
 
-.tabs[data-current-tab="3"]::after {
-  top: 60%;
-  border-left-color: var(--teal);
+.tabs-tab[for="sd-tab-item-3"] {
+  --sd-color-tabs-underline-active: var(--teal);
+  --sd-color-tabs-underline-hover: var(--teal);
+  --sd-color-tabs-label-active: var(--teal);
+  --sd-color-tabs-label-hover: var(--teal);
 }
 
-.tabs[data-current-tab="4"]::after {
-  top: 80%;
-  border-left-color: var(--green);
+.tabs-tab[for="sd-tab-item-4"] {
+  --sd-color-tabs-underline-active: var(--green);
+  --sd-color-tabs-underline-hover: var(--green);
+  --sd-color-tabs-label-active: var(--green);
+  --sd-color-tabs-label-hover: var(--green);
 }
 
 /* footer */
@@ -495,23 +420,6 @@ main.bd-main {
   grid-area: intro-start / intro-start / footer-start / intro-text-end;
 }
 
-.grid__tools {
-  margin-top: 2em;
-  margin-bottom: 2em;
-  grid-area: tools;
-}
-
-.grid__tools-switcher {
-  margin-top: 2em;
-  margin-bottom: 2em;
-  grid-area: tool-switcher;
-}
-
-.grid__rule3 {
-  margin-top: 1em;
-  grid-area: rule3;
-}
-
 .grid__support {
   grid-area: support;
 }
@@ -580,39 +488,6 @@ footer {
   grid-area: release;
 }
 
-.grid__tools-switcher__tabs {
-  display: grid;
-  gap: 2em;
-}
-
-@media (min-width: 800px) {
-  .grid__tools-switcher__tabs {
-    grid-template-columns:
-      minmax(44px, 118px) minmax(44px, 118px) minmax(44px, 118px)
-      minmax(44px, 118px) minmax(44px, 118px) minmax(44px, 118px) minmax(
-        44px,
-        118px
-      )
-      minmax(44px, 118px);
-    grid-template-areas: "tabs tabs panel panel panel panel panel panel";
-  }
-}
-
-@media (max-width: 799px) {
-  .grid__tools-switcher__tabs {
-    grid-template-columns: 30% auto;
-    grid-template-areas: "tabs panel";
-  }
-}
-
-.grid__tabs__tabs {
-  grid-area: tabs;
-}
-
-.grid__tabs__panel {
-  grid-area: panel;
-}
-
 /* buttons */
 .button,
 a.button {
diff --git a/docs/_static/script.js b/docs/_static/script.js
index c9e0c35..10fe655 100644
--- a/docs/_static/script.js
+++ b/docs/_static/script.js
@@ -1,50 +1,8 @@
-// accessible JavaScript tab switcher
-// modified from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
-
 function getRandomInt(max) {
   return Math.floor(Math.random() * max);
 }
 
 document.addEventListener("DOMContentLoaded", function(event) {
-  const tabs = document.querySelectorAll('[role="tab"]');
-  const tabList = document.querySelector('[role="tablist"]');
-
-  // set currently active tab to 0
-  tabList.setAttribute("data-current-tab", 0);
-
-  // Add a click event handler to each tab
-  tabs.forEach((tab, i) => {
-    tab.addEventListener("click", changeTabs);
-    tab.setAttribute("data-tab-count", i);
-  });
-
-  // Enable arrow navigation between tabs in the tab list
-  let tabFocus = 0;
-
-  tabList.addEventListener("keydown", e => {
-    // Move right
-    if (e.keyCode === 39 || e.keyCode === 37) {
-      tabs[tabFocus].setAttribute("tabindex", -1);
-      if (e.keyCode === 39) {
-        tabFocus++;
-        // If we're at the end, go to the start
-        if (tabFocus >= tabs.length) {
-          tabFocus = 0;
-        }
-        // Move left
-      } else if (e.keyCode === 37) {
-        tabFocus--;
-        // If we're at the start, move to the end
-        if (tabFocus < 0) {
-          tabFocus = tabs.length - 1;
-        }
-      }
-
-      tabs[tabFocus].setAttribute("tabindex", 0);
-      tabs[tabFocus].focus();
-    }
-  });
-
   ///////////////////////////////////////
   // rotate images in images-rotate directory:
   var ind = getRandomInt(images_rotate.length);
@@ -57,32 +15,4 @@ document.addEventListener("DOMContentLoaded", function(event) {
     '<div class="imrot-cap" id="sample-plot-caption">' + caption + '</div>' +
     '</a>';
   document.getElementById('image-rotator').innerHTML = html;
-
 });
-
-function changeTabs(e) {
-  const target = e.target;
-  const parent = target.parentNode;
-  const grandparent = parent.parentNode;
-
-  // set attribute for currently active tab for setting the location of the pointer triangle
-  parent.setAttribute("data-current-tab", e.target.getAttribute("data-tab-count"));
-
-  // Remove all current selected tabs
-  parent
-    .querySelectorAll('[aria-selected="true"]')
-    .forEach(t => t.setAttribute("aria-selected", false));
-
-  // Set this tab as selected
-  target.setAttribute("aria-selected", true);
-
-  // Hide all tab panels
-  grandparent
-    .querySelectorAll('[role="tabpanel"]')
-    .forEach(p => p.setAttribute("hidden", true));
-
-  // Show the selected panel
-  grandparent.parentNode
-    .querySelector(`#${target.getAttribute("aria-controls")}`)
-    .removeAttribute("hidden");
-}
diff --git a/docs/body.html b/docs/body.html
index b0c7971..3d94040 100644
--- a/docs/body.html
+++ b/docs/body.html
@@ -1,186 +1,3 @@
-      <!-- START DOMAIN SPECIFIC TOOLS -->
-      <section class="grid__tools">
-        <h3>Domain Specific Tools<a class="headerlink" href="#domain-specific-tools" title="Permalink to domain specific tools section">#</a></h3>
-        <p>
-          A large number of third party packages extend and build on Matplotlib
-          functionality, including several higher-level plotting interfaces
-          (seaborn, HoloViews, ggplot, ...), and a projection and mapping
-          toolkit (Cartopy).
-        </p>
-        <a href="https://matplotlib.org/mpl-third-party/" class="link--offsite"
-          >More Domain-Specific Tools</a
-        >
-      </section>
-
-      <!-- tool switcher -->
-      <section class="tools grid__tools-switcher grid__tools-switcher__tabs">
-        <div
-          class="tabs grid__tabs__tabs"
-          role="tablist"
-          aria-label="Domain Specific Library Tabs"
-        >
-          <button
-            class="tabs__tab"
-            role="tab"
-            aria-selected="true"
-            id="seaborn-tab"
-            aria-controls="seaborn-content"
-            tabindex="0"
-          >
-            seaborn
-          </button>
-          <button
-            class="tabs__tab"
-            role="tab"
-            aria-selected="false"
-            id="cartopy-tab"
-            aria-controls="cartopy-content"
-            tabindex="-1"
-          >
-            Cartopy
-          </button>
-          <button
-            class="tabs__tab"
-            role="tab"
-            aria-selected="false"
-            id="dna-features-viewer-tab"
-            aria-controls="dna-features-viewer-content"
-            tabindex="-1"
-          >
-            DNA Features Viewer
-          </button>
-          <button
-            class="tabs__tab"
-            role="tab"
-            aria-selected="false"
-            id="plotnine-tab"
-            aria-controls="plotnine-content"
-            tabindex="-1"
-          >
-            plotnine
-          </button>
-          <button
-            class="tabs__tab"
-            role="tab"
-            aria-selected="false"
-            id="wcs-axes-tab"
-            aria-controls="wcs-axes-content"
-            tabindex="-1"
-          >
-            WCS Axes
-          </button>
-        </div>
-        <div
-          class="tabs__content grid__tabs__panel"
-          id="seaborn-content"
-          role="tabpanel"
-          tabindex="0"
-          aria-labelledby="seaborn-tab"
-        >
-          <div class="tabs__content__info">
-            <h3>seaborn</h3>
-            <p>
-              seaborn is a high level interface for drawing statistical graphics
-              with Matplotlib. It aims to make visualization a central part of
-              exploring and understanding complex datasets.
-            </p>
-            <a href="https://seaborn.pydata.org/" class="link--offsite"
-              >statistical data visualization</a>
-          </div>
-          <img src="" alt="" />
-        </div>
-        <div
-          class="tabs__content grid__tabs__panel"
-          id="cartopy-content"
-          role="tabpanel"
-          tabindex="0"
-          aria-labelledby="cartopy-tab"
-          hidden
-        >
-          <div class="tabs__content__info">
-            <h3>Cartopy</h3>
-            <p>
-              Cartopy is a Python package designed for geospatial data
-              processing in order to produce maps and other geospatial data
-              analyses.
-            </p>
-
-            <a
-              href="https://scitools.org.uk/cartopy/docs/latest/"
-              class="link--offsite"
-              >Cartopy</a>
-          </div>
-          <img src="" alt="" />
-        </div>
-        <div
-          class="tabs__content grid__tabs__panel"
-          id="dna-features-viewer-content"
-          role="tabpanel"
-          tabindex="0"
-          aria-labelledby="dna-features-viewer-tab"
-          hidden
-        >
-          <div class="tabs__content__info">
-            <h3>DNA Features Viewer</h3>
-            <p>
-              DNA Features Viewer is a Python library to visualize DNA features,
-              e.g. from GenBank or Gff files, or Biopython SeqRecords.
-            </p>
-            <a
-              href="https://github.com/Edinburgh-Genome-Foundry/DnaFeaturesViewer"
-              class="link--offsite"
-              >DNA Features Viewer</a>
-          </div>
-          <img src="" alt="" />
-        </div>
-        <div
-          class="tabs__content grid__tabs__panel"
-          id="plotnine-content"
-          role="tabpanel"
-          tabindex="0"
-          aria-labelledby="plotnine-tab"
-          hidden
-        >
-          <div class="tabs__content__info">
-            <h3>plotnine</h3>
-            <p>
-              plotnine is an implementation of a grammar of graphics in Python.
-              The grammar allows users to compose plots by explicitly mapping
-              data to the visual objects that make up the plot.
-            </p>
-            <a
-              href="https://plotnine.readthedocs.io/en/stable/"
-              class="link--offsite"
-              >plotnine</a>
-          </div>
-          <img src="" alt="" />
-        </div>
-        <div
-          class="tabs__content grid__tabs__panel"
-          id="wcs-axes-content"
-          role="tabpanel"
-          tabindex="0"
-          aria-labelledby="wcs-axes-tab"
-          hidden
-        >
-          <div class="tabs__content__info">
-            <h3>WCSAxes</h3>
-            <p>
-              WCSAxes is a framework for making plots of Astronomical data in
-              Matplotlib.
-            </p>
-            <a
-              href="https://docs.astropy.org/en/stable/visualization/wcsaxes/"
-              class="link--offsite"
-              >WCSAxes</a>
-          </div>
-          <img src="" alt="" />
-        </div>
-      </section>
-      <!-- END DOMAIN SPECIFIC TOOLS -->
-
-      <div class="rule rule--viridis grid__rule3"></div>
-
       <!-- START SUPPORT MATPLOTLIB -->
       <section class="grid__support" id="support">
         <h2>Support Matplotlib<a class="headerlink" href="#support" title="Permalink to support Matplotlib section">#</a></h2>
diff --git a/docs/index.rst b/docs/index.rst
index 32f179a..7ee1b5f 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -161,5 +161,104 @@
 
    .. empty:
 
+.. grid::
+   :gutter: 1
+
+   .. grid-item-card:: Domain Specific Tools
+      :class-card: sd-border-0 sd-mt-5
+      :class-title: mpl-card-title
+      :class-footer: link-offsite
+      :shadow: none
+
+      A large number of third party packages extend and build on Matplotlib
+      functionality, including several higher-level plotting interfaces (seaborn,
+      HoloViews, ggplot, ...), and a projection and mapping toolkit (Cartopy).
+
+      +++
+      `More Domain-Specific Tools <https://matplotlib.org/mpl-third-party/>`__
+
+   .. grid-item::
+
+      .. tab-set::
+         :class: tabs tools
+
+         .. tab-item:: seaborn
+            :class-label: tabs-tab
+            :selected:
+
+            .. card::
+               :class-card: sd-border-0
+               :class-header: mpl-card-title
+               :class-footer: link-offsite
+               :shadow: none
+
+               seaborn is a high level interface for drawing statistical graphics with
+               Matplotlib. It aims to make visualization a central part of exploring and
+               understanding complex datasets.
+               +++
+               `statistical data visualization <https://seaborn.pydata.org/>`__
+
+         .. tab-item:: Cartopy
+            :class-label: tabs-tab
+
+            .. card::
+               :class-card: sd-border-0
+               :class-header: mpl-card-title
+               :class-footer: link-offsite
+               :shadow: none
+
+               Cartopy is a Python package designed for geospatial data processing in
+               order to produce maps and other geospatial data analyses.
+               +++
+               `Cartopy <https://scitools.org.uk/cartopy/docs/latest/>`__
+
+         .. tab-item:: DNA Features Viewer
+            :class-label: tabs-tab
+
+            .. card::
+               :class-card: sd-border-0
+               :class-header: mpl-card-title
+               :class-footer: link-offsite
+               :shadow: none
+
+               DNA Features Viewer is a Python library to visualize DNA features, e.g.
+               from GenBank or Gff files, or Biopython SeqRecords.
+               +++
+               `DNA Features Viewer
+               <https://github.com/Edinburgh-Genome-Foundry/DnaFeaturesViewer>`__
+
+         .. tab-item:: plotnine
+            :class-label: tabs-tab
+
+            .. card::
+               :class-card: sd-border-0
+               :class-header: mpl-card-title
+               :class-footer: link-offsite
+               :shadow: none
+
+               plotnine is an implementation of a grammar of graphics in Python. The
+               grammar allows users to compose plots by explicitly mapping data to the
+               visual objects that make up the plot.
+               +++
+               `plotnine <https://plotnine.readthedocs.io/en/stable/>`__
+
+         .. tab-item:: WCS Axes
+            :class-label: tabs-tab
+
+            .. card::
+               :class-card: sd-border-0
+               :class-header: mpl-card-title
+               :class-footer: link-offsite
+               :shadow: none
+
+               WCSAxes is a framework for making plots of Astronomical data in
+               Matplotlib.
+               +++
+               `WCSAxes <https://docs.astropy.org/en/stable/visualization/wcsaxes/>`__
+
+.. div:: rule rule-viridis
+
+   .. empty
+
 .. raw:: html
    :file: body.html

From 3bda5c13c8197f2865d08379acc2d9537b0dfcf1 Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Sat, 29 Jun 2024 07:04:10 -0400
Subject: [PATCH 5/9] Convert support section from HTML to sphinx-design

---
 docs/_static/css/landing.css | 65 ++++++++-------------------------
 docs/body.html               | 65 ---------------------------------
 docs/index.rst               | 69 ++++++++++++++++++++++++++++++++++++
 3 files changed, 83 insertions(+), 116 deletions(-)

diff --git a/docs/_static/css/landing.css b/docs/_static/css/landing.css
index 6768d3e..5d7b082 100644
--- a/docs/_static/css/landing.css
+++ b/docs/_static/css/landing.css
@@ -92,15 +92,8 @@
 
 /* callout boxes */
 .callout {
-  border-left: solid 1px var(--pst-color-border);
-  border-bottom: solid 1px var(--pst-color-border);
-  border-right: solid 1px var(--pst-color-border);
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-  box-shadow: var(--shadow);
-  margin-bottom: 20px;
-  padding: 28px 20px 20px;
-  position: relative;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 .callout::before {
@@ -114,48 +107,43 @@
   background-color: var(--blue);
 }
 
-.callout--purple::before {
+.callout-purple::before {
   background-image: var(--viridis-purple);
 }
 
-.callout--blue::before {
+.callout-blue::before {
   background-image: var(--viridis-blue);
 }
 
-.callout--teal::before {
+.callout-teal::before {
   background-image: var(--viridis-teal);
 }
 
-.callout--green::before {
+.callout-green::before {
   background-image: var(--viridis-green);
 }
 
+.mpl-callout-title {
+  color: var(--pst-color-text-base);
+  font-family: var(--pst-font-family-heading);
+  font-size: var(--pst-font-size-h4);
+  font-weight: var(--regular) !important;
+}
+
 .callout-icon {
   color: var(--pst-color-primary);
   font-size: 2em;
   margin: auto 10px auto 0;
 }
 
-.callout > * {
-  margin-top: 0;
-}
-
 /* offsite links */
-a.link--offsite {
-  font-size: var(--pst-font-size-h5);
-  display: block;
-  position: relative;
-  left: 0;
-  transition: left 0.2s ease-in-out;
-}
-
 a.link-offsite, div.link-offsite a {
   font-size: var(--pst-font-size-h5);
   padding-left: 0;
   transition: left 0.2s ease-in-out;
 }
 
-a.link--offsite::after, a.link-offsite::after, div.link-offsite a::after {
+a.link-offsite::after, div.link-offsite a::after {
   display: inline-block;
   font-style: normal;
   font-variant: normal;
@@ -420,31 +408,6 @@ main.bd-main {
   grid-area: intro-start / intro-start / footer-start / intro-text-end;
 }
 
-.grid__support {
-  grid-area: support;
-}
-
-.grid__contribute {
-  grid-area: contribute;
-}
-
-.support__items {
-  list-style-type: none;
-  padding: 0;
-}
-
-@media (min-width: 800px) {
-  .support__items {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-}
-
-.support__items .callout {
-  flex: 0 0 calc(33.333333% - 13.3333333333333px);
-}
-
 footer {
   grid-area: footer;
   display: grid;
diff --git a/docs/body.html b/docs/body.html
index 3d94040..69c351b 100644
--- a/docs/body.html
+++ b/docs/body.html
@@ -1,67 +1,2 @@
-      <!-- START SUPPORT MATPLOTLIB -->
-      <section class="grid__support" id="support">
-        <h2>Support Matplotlib<a class="headerlink" href="#support" title="Permalink to support Matplotlib section">#</a></h2>
-        <ul class="support__items grid__contribute">
-          <li class="callout callout--purple">
-            <h4>Contribute</h4>
-            <p>
-              Matplotlib is a community project maintained for and by its users
-            </p>
-            <p>
-              You can help by answering questions
-              <a href="https://discourse.matplotlib.org">on discourse</a>,
-              reporting a bug or requesting a feature
-              <a href="https://github.com/matplotlib/matplotlib/issues"
-                >on GitHub</a
-              >, or improving the
-              <a href="https://matplotlib.org/stable/devel/index.html"
-                >documentation and code</a>!
-            </p>
-            <a href="https://discourse.matplotlib.org" class="link--offsite"
-              >Join us on Discourse</a>
-            <a
-              href="https://github.com/matplotlib/matplotlib"
-              class="link--offsite"
-              >Join us on GitHub</a>
-          </li>
-          <li class="callout callout--blue">
-            <h4>Cite</h4>
-            <p>
-              Matplotlib is the result of development efforts by John Hunter
-              (1968&ndash;2012) and the project's
-              <a href="https://matplotlib.org/stable/project/credits.html"
-                >many contributors</a>.
-            </p>
-            <p>
-              If Matplotlib contributes to a project that leads to a scientific
-              publication, please acknowledge this work by citing the project!
-            </p>
-            <a
-              href="https://matplotlib.org/stable/project/citing.html"
-              class="link--offsite"
-              >Ready made citation</a>
-          </li>
-          <li class="callout callout--teal">
-            <h4>Donate</h4>
-            <p>
-              If you would like to support Matplotlib financially you can
-              donate by
-              <a href="https://github.com/sponsors/matplotlib">
-                sponsoring Matplotlib on GitHub</a>
-              or making a (USA) tax-deductible donation
-              <a href="https://numfocus.org/donate-to-matplotlib">
-                through NumFOCUS</a>.
-            </p>
-            <a
-              href="https://github.com/sponsors/matplotlib"
-              class="link--offsite"
-              >Sponsor on GitHub</a>
-            <a
-              href="https://numfocus.org/donate-to-matplotlib"
-              class="link--offsite"
-              >Donate to Matplotlib</a>
-          </li>
-        </ul>
-      </section>
       <script src="_static/images-rotate-info.js"></script>
       <script src="_static/script.js"></script>
diff --git a/docs/index.rst b/docs/index.rst
index 7ee1b5f..93b1356 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -260,5 +260,74 @@
 
    .. empty
 
+.. grid::
+
+   .. grid-item-card:: Support Matplotlib
+      :class-card: sd-border-0
+      :class-title: mpl-card-title
+      :shadow: none
+
+      .. grid::
+
+         .. grid-item-card:: Contribute
+            :class-card: callout callout-purple sd-border-top-0
+            :class-title: mpl-callout-title
+            :class-body: sd-px-4 sd-py-4
+
+            Matplotlib is a community project maintained for and by its users
+
+            You can help by answering questions `on discourse
+            <https://discourse.matplotlib.org>`__, reporting a bug or requesting a
+            feature `on GitHub <https://github.com/matplotlib/matplotlib/issues>`__, or
+            improving the `documentation and code
+            <https://matplotlib.org/stable/devel/index.html>`__!
+
+            .. button-link:: https://discourse.matplotlib.org
+               :class: link-offsite
+
+               Join us on Discourse
+
+            .. button-link:: https://github.com/matplotlib/matplotlib
+               :class: link-offsite
+
+               Join us on GitHub
+
+         .. grid-item-card:: Cite
+            :class-card: callout callout-blue sd-border-top-0
+            :class-title: mpl-callout-title
+            :class-body: sd-px-4 sd-py-4
+
+            Matplotlib is the result of development efforts by John Hunter (1968–2012)
+            and the project's `many contributors
+            <https://matplotlib.org/stable/project/credits.html>`__.
+
+            If Matplotlib contributes to a project that leads to a scientific
+            publication, please acknowledge this work by citing the project!
+
+            .. button-link:: https://matplotlib.org/stable/project/citing.html
+               :class: link-offsite
+
+               Ready made citation
+
+         .. grid-item-card:: Donate
+            :class-card: callout callout-teal sd-border-top-0
+            :class-title: mpl-callout-title
+            :class-body: sd-px-4 sd-py-4
+
+            If you would like to support Matplotlib financially you can donate by
+            `sponsoring Matplotlib on GitHub <https://github.com/sponsors/matplotlib>`__
+            or making a (USA) tax-deductible donation `through NumFOCUS
+            <https://numfocus.org/donate-to-matplotlib>`__.
+
+            .. button-link:: https://github.com/sponsors/matplotlib
+               :class: link-offsite
+
+               Sponsor on GitHub
+
+            .. button-link:: https://numfocus.org/donate-to-matplotlib
+               :class: link-offsite
+
+               Donate to Matplotlib
+
 .. raw:: html
    :file: body.html

From 89ab04a0f8779aed296fde6b26f3325ae2827ba7 Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Sat, 1 Jun 2024 02:29:31 -0400
Subject: [PATCH 6/9] Convert HTML site to reST

---
 docs/_static/css/landing.css | 58 +-----------------------------------
 docs/body.html               |  2 --
 docs/index.rst               |  4 ++-
 3 files changed, 4 insertions(+), 60 deletions(-)
 delete mode 100644 docs/body.html

diff --git a/docs/_static/css/landing.css b/docs/_static/css/landing.css
index 5d7b082..07db95c 100644
--- a/docs/_static/css/landing.css
+++ b/docs/_static/css/landing.css
@@ -352,62 +352,6 @@ html, body {
     align-items: stretch;
 }
 
-@media (min-width: 960px) {
-  /* Undo pydata-sphinx-theme's max width setting. */
-  div.bd-container__inner.bd-page-width {
-    max-width: inherit;
-  }
-}
-
-main.bd-main {
-  flex-grow: 1;
-  display: grid;
-  column-gap: 20px;
-}
-
-@media (min-width: 800px) {
-  main.bd-main {
-    grid-template-columns:
-      minmax(1em, auto) repeat(12, minmax(44px, 118px)) minmax(1em, auto);
-    grid-template-areas:
-      /* These are mostly two sections side-by-side (6 columns each), except
-       * for tools+tool-switcher which are 1/3+2/3. */
-      ". intro intro intro intro intro intro intro-text intro-text intro-text intro-text intro-text intro-text ."
-      ". quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks quicklinks ."
-      "rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1 rule1"
-      ". news news news news news news resources resources resources resources resources resources ."
-      "rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2 rule2"
-      ". tools tools tools tools tool-switcher tool-switcher tool-switcher tool-switcher tool-switcher tool-switcher tool-switcher tool-switcher ."
-      "rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3 rule3"
-      ". support support support support support support support support support support support support ."
-      "footer footer footer footer footer footer footer footer footer footer footer footer footer footer";
-  }
-}
-
-@media (max-width: 799px) {
-  main.bd-main {
-    margin-top: 0px;
-    grid-template-columns: 1em auto 1em;
-    grid-template-areas:
-      ". intro-text ."
-      ". intro ."
-      ". quicklinks  ."
-      "rule1 rule1 rule1"
-      ". resources ."
-      ". news ."
-      "rule2 rule2 rule2"
-      ". tools ."
-      ". tool-switcher ."
-      "rule3 rule3 rule3"
-      ". support ."
-      "footer footer footer";
-  }
-}
-
-.grid__full-page {
-  grid-area: intro-start / intro-start / footer-start / intro-text-end;
-}
-
 footer {
   grid-area: footer;
   display: grid;
@@ -518,7 +462,7 @@ a.button-green::after {
 }
 
 .imrot-img {
-  display: flex;  
+  display: flex;
   margin: auto;
   max-width:18em;
   align-self: center;
diff --git a/docs/body.html b/docs/body.html
deleted file mode 100644
index 69c351b..0000000
--- a/docs/body.html
+++ /dev/null
@@ -1,2 +0,0 @@
-      <script src="_static/images-rotate-info.js"></script>
-      <script src="_static/script.js"></script>
diff --git a/docs/index.rst b/docs/index.rst
index 93b1356..7d89a03 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -330,4 +330,6 @@
                Donate to Matplotlib
 
 .. raw:: html
-   :file: body.html
+
+   <script src="_static/images-rotate-info.js"></script>
+   <script src="_static/script.js"></script>

From 3c115faa09864cea1d652163940c9306df8240fc Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Fri, 16 Aug 2024 04:09:35 -0400
Subject: [PATCH 7/9] Simplify some of the reST markup

---
 docs/_static/css/landing.css | 10 ++++-----
 docs/conf.py                 | 11 ++++++++-
 docs/index.rst               | 43 +++++-------------------------------
 3 files changed, 20 insertions(+), 44 deletions(-)

diff --git a/docs/_static/css/landing.css b/docs/_static/css/landing.css
index 07db95c..c770c18 100644
--- a/docs/_static/css/landing.css
+++ b/docs/_static/css/landing.css
@@ -212,35 +212,35 @@ a.link-offsite::after, div.link-offsite a::after {
   min-height: 280px;
 }
 
-.tabs-tab[for="sd-tab-item-0"] {
+.sd-tab-label[for="sd-tab-item-0"] {
   --sd-color-tabs-underline-active: var(--dark-purple);
   --sd-color-tabs-underline-hover: var(--dark-purple);
   --sd-color-tabs-label-active: var(--dark-purple);
   --sd-color-tabs-label-hover: var(--dark-purple);
 }
 
-.tabs-tab[for="sd-tab-item-1"] {
+.sd-tab-label[for="sd-tab-item-1"] {
   --sd-color-tabs-underline-active: var(--purple);
   --sd-color-tabs-underline-hover: var(--purple);
   --sd-color-tabs-label-active: var(--purple);
   --sd-color-tabs-label-hover: var(--purple);
 }
 
-.tabs-tab[for="sd-tab-item-2"] {
+.sd-tab-label[for="sd-tab-item-2"] {
   --sd-color-tabs-underline-active: var(--blue);
   --sd-color-tabs-underline-hover: var(--blue);
   --sd-color-tabs-label-active: var(--blue);
   --sd-color-tabs-label-hover: var(--blue);
 }
 
-.tabs-tab[for="sd-tab-item-3"] {
+.sd-tab-label[for="sd-tab-item-3"] {
   --sd-color-tabs-underline-active: var(--teal);
   --sd-color-tabs-underline-hover: var(--teal);
   --sd-color-tabs-label-active: var(--teal);
   --sd-color-tabs-label-hover: var(--teal);
 }
 
-.tabs-tab[for="sd-tab-item-4"] {
+.sd-tab-label[for="sd-tab-item-4"] {
   --sd-color-tabs-underline-active: var(--green);
   --sd-color-tabs-underline-hover: var(--green);
   --sd-color-tabs-label-active: var(--green);
diff --git a/docs/conf.py b/docs/conf.py
index d3903b3..48ca4d3 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -64,5 +64,14 @@
             "shadow": "none",
             "text-align": "center",
         },
-    }
+    },
+    "project-card": {
+        "inherit": "card",
+        "options": {
+            "class-card": "sd-border-0",
+            "class-header": "mpl-card-title",
+            "class-footer": "link-offsite",
+            "shadow": "none",
+        },
+    },
 }
diff --git a/docs/index.rst b/docs/index.rst
index 7d89a03..b7f3027 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -39,8 +39,6 @@
       .. div::
          :name: image-rotator
 
-         .. empty:
-
 .. grid::
 
    .. quicklink::
@@ -80,8 +78,6 @@
 
 .. div:: rule rule-viridis
 
-   .. empty:
-
 .. grid::
    :gutter: 1
 
@@ -159,8 +155,6 @@
 
 .. div:: rule rule-viridis
 
-   .. empty:
-
 .. grid::
    :gutter: 1
 
@@ -183,14 +177,9 @@
          :class: tabs tools
 
          .. tab-item:: seaborn
-            :class-label: tabs-tab
             :selected:
 
-            .. card::
-               :class-card: sd-border-0
-               :class-header: mpl-card-title
-               :class-footer: link-offsite
-               :shadow: none
+            .. project-card::
 
                seaborn is a high level interface for drawing statistical graphics with
                Matplotlib. It aims to make visualization a central part of exploring and
@@ -199,13 +188,8 @@
                `statistical data visualization <https://seaborn.pydata.org/>`__
 
          .. tab-item:: Cartopy
-            :class-label: tabs-tab
 
-            .. card::
-               :class-card: sd-border-0
-               :class-header: mpl-card-title
-               :class-footer: link-offsite
-               :shadow: none
+            .. project-card::
 
                Cartopy is a Python package designed for geospatial data processing in
                order to produce maps and other geospatial data analyses.
@@ -213,13 +197,8 @@
                `Cartopy <https://scitools.org.uk/cartopy/docs/latest/>`__
 
          .. tab-item:: DNA Features Viewer
-            :class-label: tabs-tab
 
-            .. card::
-               :class-card: sd-border-0
-               :class-header: mpl-card-title
-               :class-footer: link-offsite
-               :shadow: none
+            .. project-card::
 
                DNA Features Viewer is a Python library to visualize DNA features, e.g.
                from GenBank or Gff files, or Biopython SeqRecords.
@@ -228,13 +207,8 @@
                <https://github.com/Edinburgh-Genome-Foundry/DnaFeaturesViewer>`__
 
          .. tab-item:: plotnine
-            :class-label: tabs-tab
 
-            .. card::
-               :class-card: sd-border-0
-               :class-header: mpl-card-title
-               :class-footer: link-offsite
-               :shadow: none
+            .. project-card::
 
                plotnine is an implementation of a grammar of graphics in Python. The
                grammar allows users to compose plots by explicitly mapping data to the
@@ -243,13 +217,8 @@
                `plotnine <https://plotnine.readthedocs.io/en/stable/>`__
 
          .. tab-item:: WCS Axes
-            :class-label: tabs-tab
 
-            .. card::
-               :class-card: sd-border-0
-               :class-header: mpl-card-title
-               :class-footer: link-offsite
-               :shadow: none
+            .. project-card::
 
                WCSAxes is a framework for making plots of Astronomical data in
                Matplotlib.
@@ -258,8 +227,6 @@
 
 .. div:: rule rule-viridis
 
-   .. empty
-
 .. grid::
 
    .. grid-item-card:: Support Matplotlib

From 624955ff30e54ca41c848f6cfba1d9d350f45567 Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Fri, 16 Aug 2024 05:02:09 -0400
Subject: [PATCH 8/9] Ensure all section cards have their own class

This isn't needed for the remaining ones, but may be useful in the
future.
---
 docs/index.rst | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/index.rst b/docs/index.rst
index b7f3027..f4caf02 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -6,7 +6,7 @@
    :gutter: 1
 
    .. grid-item-card:: Matplotlib: Visualization with Python
-      :class-card: sd-border-0
+      :class-card: sd-border-0 mpl-card-intro
       :class-title: intro-title
       :shadow: none
 
@@ -82,7 +82,7 @@
    :gutter: 1
 
    .. grid-item-card:: News
-      :class-card: sd-border-0
+      :class-card: sd-border-0 mpl-card-news
       :class-title: mpl-card-title
       :class-footer: link-offsite
       :shadow: none
@@ -159,7 +159,7 @@
    :gutter: 1
 
    .. grid-item-card:: Domain Specific Tools
-      :class-card: sd-border-0 sd-mt-5
+      :class-card: sd-border-0 mpl-card-tools
       :class-title: mpl-card-title
       :class-footer: link-offsite
       :shadow: none
@@ -172,6 +172,7 @@
       `More Domain-Specific Tools <https://matplotlib.org/mpl-third-party/>`__
 
    .. grid-item::
+      :class: mpl-card-projects
 
       .. tab-set::
          :class: tabs tools
@@ -230,7 +231,7 @@
 .. grid::
 
    .. grid-item-card:: Support Matplotlib
-      :class-card: sd-border-0
+      :class-card: sd-border-0 mpl-card-support
       :class-title: mpl-card-title
       :shadow: none
 

From 5bff19d37606144250bb759e4c48452ce920b80d Mon Sep 17 00:00:00 2001
From: Elliott Sales de Andrade <quantum.analyst@gmail.com>
Date: Mon, 19 Aug 2024 22:46:59 -0400
Subject: [PATCH 9/9] Improve responsiveness of grids

Namely, ensure that they switch to a single column when on narrower
displays, and remove extra margins on quick links.

Also, switch quick link container to a flexbox instead of grid, so that
everything is aligned in the center correctly.
---
 docs/_static/css/landing.css | 1 +
 docs/conf.py                 | 3 +--
 docs/index.rst               | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/_static/css/landing.css b/docs/_static/css/landing.css
index c770c18..c3c40e2 100644
--- a/docs/_static/css/landing.css
+++ b/docs/_static/css/landing.css
@@ -94,6 +94,7 @@
 .callout {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
+  margin-bottom: 20px;
 }
 
 .callout::before {
diff --git a/docs/conf.py b/docs/conf.py
index 48ca4d3..31c940f 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -56,11 +56,10 @@
 
 sd_custom_directives = {
     "quicklink": {
-        "inherit": "grid-item-card",
+        "inherit": "card",
         "options": {
             "class-card": "quicklink sd-border-0",
             "class-img-top": "dark-light",
-            "margin": "5",
             "shadow": "none",
             "text-align": "center",
         },
diff --git a/docs/index.rst b/docs/index.rst
index f4caf02..8a8a0c3 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -39,7 +39,7 @@
       .. div::
          :name: image-rotator
 
-.. grid::
+.. div:: sd-d-flex-row sd-align-major-spaced flex-wrap
 
    .. quicklink::
       :img-top: _static/images/getting-started.svg
@@ -78,7 +78,7 @@
 
 .. div:: rule rule-viridis
 
-.. grid::
+.. grid:: 1 1 2 2
    :gutter: 1
 
    .. grid-item-card:: News
@@ -155,7 +155,7 @@
 
 .. div:: rule rule-viridis
 
-.. grid::
+.. grid:: 1 1 2 2
    :gutter: 1
 
    .. grid-item-card:: Domain Specific Tools
@@ -235,7 +235,7 @@
       :class-title: mpl-card-title
       :shadow: none
 
-      .. grid::
+      .. grid:: 1 1 3 3
 
          .. grid-item-card:: Contribute
             :class-card: callout callout-purple sd-border-top-0