Merge pull request #23169 from QuLogic/sphinx-design

tacaswell · web-flow · commit 20f5034d851a · 2022-06-01T22:58:23.000-04:00
DOC: Migrate to sphinx-design
diff --git a/doc/_static/mpl.css b/doc/_static/mpl.css
@@ -1,3 +1,8 @@
+:root {
+    --sd-color-primary: #11557C;
+    --sd-color-primary-highlight: #003c63;
+}
+
 a {
     color: #11557C;
     text-decoration: none;
@@ -174,29 +179,6 @@ hr.box-sep {
     font-size: 1.0em;
 }
 
-
-.mpl-button {
-    background: #11557C;
-    font-weight: normal;
-    display: inline-block;
-    padding: 0 1em;
-    line-height: 2.8;
-    font-size: 16px;
-    text-align: center;
-    cursor: pointer;
-    color: #fff;
-    text-decoration: none;
-    border-radius: 6px;
-    z-index: 1;
-    transition: background .25s ease;
-}
-
-.mpl-button:hover, .mpl-button:active, .mpl-button:focus {
-    background: #003c63;
-    outline-color: #003c63;
-}
-
-
 /* Hide red ¶ between the thumbnail and caption in gallery
 
 Due the way that sphinx-gallery floats its captions the perma-link
@@ -251,25 +233,6 @@ table.property-table td {
     margin: 2.75rem 0;
 }
 
-.sidebar-donate .mpl-button {
-    /* fix width to width of cheatsheet */
-    width: 210px;
-}
-
-/* Two columns for install code blocks */
-div.twocol {
-    padding-left: 0;
-    padding-right: 0;
-    display: flex;
-    gap: 20px;
-}
-
-div.twocol > div {
-    flex-grow: 1;
-    padding: 0;
-    margin: 0;
-}
-
 /* Fix selection of parameter names; remove when fixed in the theme
  * https://github.com/sphinx-doc/sphinx/pull/9763
  */
diff --git a/doc/_templates/donate_sidebar.html b/doc/_templates/donate_sidebar.html
@@ -1,8 +1,5 @@
-
-
-
 <div class="sidebar-donate">
-  <a href="https://numfocus.org/donate-to-matplotlib" target="_blank">
-    <span class="mpl-button" >Support Matplotlib</span>
+  <a class="sd-btn sd-btn-primary sd-fs-5 sd-px-5 sd-py-2" href="https://numfocus.org/donate-to-matplotlib" target="_blank">
+    Support Matplotlib
   </a>
 </div>
diff --git a/doc/conf.py b/doc/conf.py
@@ -72,15 +72,13 @@
     'sphinxext.skip_deprecated',
     'sphinxext.redirect_from',
     'sphinx_copybutton',
-    'sphinx_panels',
+    'sphinx_design',
 ]
 
 exclude_patterns = [
     'api/prev_api_changes/api_changes_*/*',
 ]
 
-panels_add_bootstrap_css = False
-
 
 def _check_dependencies():
     names = {
diff --git a/doc/devel/index.rst b/doc/devel/index.rst
@@ -19,14 +19,37 @@ process or how to fix something feel free to ask on `gitter
 <https://gitter.im/matplotlib/matplotlib>`_ for short questions and on
 `discourse <https://discourse.matplotlib.org>`_ for longer questions.
 
-.. raw:: html
-
-   <div style="margin: 2em 0;">
-     <a href="contributing.html#submitting-a-bug-report"><span class="mpl-button">Report a bug</span></a>
-     <a href="contributing.html#request-a-new-feature"><span class="mpl-button">Request a feature</span></a>
-     <a href="contributing.html#contributing-code"><span class="mpl-button">Contribute code</span></a>
-     <a href="contributing.html#contributing-documentation"><span class="mpl-button">Write documentation</span></a>
-   </div>
+.. rst-class:: sd-d-inline-block
+
+    .. button-ref:: submitting-a-bug-report
+        :class: sd-fs-6
+        :color: primary
+
+        Report a bug
+
+.. rst-class:: sd-d-inline-block
+
+    .. button-ref:: request-a-new-feature
+        :class: sd-fs-6
+        :color: primary
+
+        Request a feature
+
+.. rst-class:: sd-d-inline-block
+
+    .. button-ref:: contributing-code
+        :class: sd-fs-6
+        :color: primary
+
+        Contribute code
+
+.. rst-class:: sd-d-inline-block
+
+    .. button-ref:: contributing_documentation
+        :class: sd-fs-6
+        :color: primary
+
+        Write documentation
 
 .. toctree::
    :maxdepth: 2
diff --git a/doc/index.rst b/doc/index.rst
@@ -16,17 +16,17 @@ and interactive visualizations in Python.
 Installation
 ************
 
-.. container:: twocol
+.. grid:: 1 1 2 2
 
-    .. container::
+    .. grid-item::
 
         Install using `pip <https://pypi.org/project/matplotlib>`__:
 
         .. code-block:: bash
 
             pip install matplotlib
 
-    .. container::
+    .. grid-item::
 
         Install using `conda <https://docs.continuum.io/anaconda/>`__:
 
@@ -41,46 +41,57 @@ Further details are available in the :doc:`Installation Guide <users/installing/
 Learning resources
 ******************
 
-.. panels::
+.. grid:: 1 1 2 2
 
-    Tutorials
-    ^^^^^^^^^
+    .. grid-item-card::
+        :class-header: sd-bg-light
+        :padding: 2
 
-    - :doc:`Quick-start guide <tutorials/introductory/quick_start>`
-    - :doc:`Plot types <plot_types/index>`
-    - `Introductory tutorials <../tutorials/index.html#introductory>`_
-    - :doc:`External learning resources <users/resources/index>`
+        Tutorials
+        ^^^
 
-    ---
+        - :doc:`Quick-start guide <tutorials/introductory/quick_start>`
+        - :doc:`Plot types <plot_types/index>`
+        - `Introductory tutorials <../tutorials/index.html#introductory>`_
+        - :doc:`External learning resources <users/resources/index>`
 
-    How-tos
-    ^^^^^^^
-    - :doc:`Example gallery <gallery/index>`
-    - :doc:`Matplotlib FAQ <users/faq/index>`
+    .. grid-item-card::
+        :class-header: sd-bg-light
+        :padding: 2
 
-    ---
+        How-tos
+        ^^^
 
-    Understand how Matplotlib works
-    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        - :doc:`Example gallery <gallery/index>`
+        - :doc:`Matplotlib FAQ <users/faq/index>`
 
-    - The :ref:`users-guide-explain` in the :doc:`Users guide <users/index>`
-    - Many of the :ref:`Intermediate <tutorials-intermediate>` and
-      :ref:`Advanced <tutorials-advanced>` tutorials
-      have explanatory material
+    .. grid-item-card::
+        :class-header: sd-bg-light
+        :padding: 2
 
-    ---
+        Understand how Matplotlib works
+        ^^^
 
-    Reference
-    ^^^^^^^^^
+        - The :ref:`users-guide-explain` in the :doc:`Users guide
+          <users/index>`
+        - Many of the :ref:`Intermediate <tutorials-intermediate>` and
+          :ref:`Advanced <tutorials-advanced>` tutorials have explanatory
+          material
 
-    - :doc:`API Reference <api/index>`
-    - :doc:`Axes API <api/axes_api>` for most plotting methods
-    - :doc:`Figure API <api/figure_api>` for figure-level methods
-    - Top-level interfaces to create:
+    .. grid-item-card::
+        :class-header: sd-bg-light
+        :padding: 2
 
-      - Figures (`.pyplot.figure`)
-      - Subplots (`.pyplot.subplots`, `.pyplot.subplot_mosaic`)
+        Reference
+        ^^^
 
+        - :doc:`API Reference <api/index>`
+        - :doc:`Axes API <api/axes_api>` for most plotting methods
+        - :doc:`Figure API <api/figure_api>` for figure-level methods
+        - Top-level interfaces to create:
+
+          - Figures (`.pyplot.figure`)
+          - Subplots (`.pyplot.subplots`, `.pyplot.subplot_mosaic`)
 
 
 ********************
diff --git a/doc/users/getting_started/index.rst b/doc/users/getting_started/index.rst
@@ -4,17 +4,17 @@ Getting started
 Installation quick-start
 ------------------------
 
-.. container:: twocol
+.. grid:: 1 1 2 2
 
-    .. container::
+    .. grid-item::
 
         Install using `pip <https://pypi.org/project/matplotlib>`__:
 
         .. code-block:: bash
 
             pip install matplotlib
 
-    .. container::
+    .. grid-item::
 
         Install using `conda <https://docs.continuum.io/anaconda/>`__:
 
diff --git a/environment.yml b/environment.yml
@@ -33,7 +33,7 @@ dependencies:
   - sphinx>=1.8.1,!=2.0.0
   - sphinx-copybutton
   - sphinx-gallery>=0.10
-  - sphinx-panels
+  - sphinx-design
   - pip
   - pip:
       - mpl-sphinx-theme
diff --git a/requirements/doc/doc-requirements.txt b/requirements/doc/doc-requirements.txt
@@ -18,4 +18,4 @@ mpl-sphinx-theme
 sphinxcontrib-svg2pdfconverter>=1.1.0
 sphinx-gallery>=0.10
 sphinx-copybutton
-sphinx-panels
+sphinx-design

Original file line number	Diff line number	Diff line change
`@@ -72,15 +72,13 @@`
`72`	`72`	`'sphinxext.skip_deprecated',`
`73`	`73`	`'sphinxext.redirect_from',`
`74`	`74`	`'sphinx_copybutton',`
`75`		`- 'sphinx_panels',`
	`75`	`+ 'sphinx_design',`
`76`	`76`	`]`
`77`	`77`
`78`	`78`	`exclude_patterns = [`
`79`	`79`	`'api/prev_api_changes/api_changes_/',`
`80`	`80`	`]`
`81`	`81`
`82`		`-panels_add_bootstrap_css = False`
`83`		`-`
`84`	`82`
`85`	`83`	`def _check_dependencies():`
`86`	`84`	`names = {`