Use sphinx-design for columns

Author: dstansby

docs/conf.py

@@ -14,7 +14,7 @@
 # Add any Sphinx extension module names here, as strings. They can be
 # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
 # ones.
-extensions = []
+extensions = ["sphinx_design"]
 
 # Add any paths that contain templates here, relative to this directory.
 

docs/index.rst

@@ -7,23 +7,21 @@ Matplotlib cheatsheets and handouts
 Cheatsheets
 ***********
 
-.. container:: twocol
+.. grid:: 2
 
-    .. container::
+    .. grid-item::
 
-      .. image:: ../cheatsheets-1.png
-         :width: 270px
-         :align: center
-         :alt: image of first page of cheatsheets
+        .. image:: ../cheatsheets-1.png
+            :width: 270px
+            :align: center
+            :alt: image of first page of cheatsheets
 
+    .. grid-item::
 
-    .. container::
-
-      .. image:: ../cheatsheets-2.png
-         :width: 270px
-         :align: center
-         :alt: image of second page of cheatsheets
-
+        .. image:: ../cheatsheets-2.png
+            :width: 270px
+            :align: center
+            :alt: image of second page of cheatsheets
 
 `Cheatsheets [pdf] <./cheatsheets.pdf>`_
 
@@ -32,36 +30,34 @@ Cheatsheets
 Handouts
 ********
 
-.. container:: twocol
-
-   .. container::
-
-      .. image:: ../handout-beginner.png
-         :width: 270px
-         :align: center
-         :alt: image of beginner handout
+.. grid:: 3
 
-      `Beginner [pdf] <./handout-beginner.pdf>`_
+    .. grid-item::
 
+        .. image:: ../handout-beginner.png
+            :width: 270px
+            :align: center
+            :alt: image of beginner handout
 
-   .. container::
+        `Beginner [pdf] <./handout-beginner.pdf>`_
 
-      .. image:: ../handout-intermediate.png
-         :width: 270px
-         :align: center
-         :alt: image of intermediate handout
+    .. grid-item::
 
-      `Intermediate [pdf] <./handout-intermediate.pdf>`_
+        .. image:: ../handout-intermediate.png
+            :width: 270px
+            :align: center
+            :alt: image of intermediate handout
 
+        `Intermediate [pdf] <./handout-intermediate.pdf>`_
 
-   .. container::
+    .. grid-item::
 
-      .. image:: ../handout-tips.png
-         :width: 270px
-         :align: center
-         :alt: image of tips handout
+        .. image:: ../handout-tips.png
+            :width: 270px
+            :align: center
+            :alt: image of tips handout
 
-      `Tips [pdf] <./handout-tips.pdf>`_
+        `Tips [pdf] <./handout-tips.pdf>`_
 
 Contribute
 **********

requirements/requirements.in

@@ -9,6 +9,7 @@ pip-tools
 pre-commit
 scipy
 # Docs
-mpl-sphinx-theme==3.8.0
+mpl-sphinx-theme~=3.8
 pydata-sphinx-theme==0.13.3
 sphinx
+sphinx-design

requirements/requirements.txt

@@ -154,6 +154,9 @@ sphinx==7.2.6
     # via
     #   -r requirements.in
     #   pydata-sphinx-theme
+    #   sphinx-design
+sphinx-design==0.5.0
+    # via -r requirements.in
 sphinxcontrib-applehelp==1.0.8
     # via sphinx
 sphinxcontrib-devhelp==1.0.6