Improve the gallery layout (#28)

Author: seisman

docs/_static/style.css

@@ -18,22 +18,6 @@ h1, h2, h3, h4, h5, h6 {
 	font-weight: "normal"
 }
 
-/* style for example gallery */
-.gmtgallery li {
-	list-style: none!important;
-	width: 180px!important;
-	display: inline-grid!important;
-	margin-right: 15px!important;
-}
-
-/* style for gmt movies */
-.gmtmovie li {
-	list-style: none;
-	width: 45%;
-	display: inline-grid;
-	margin: 10px;
-}
-
 /* Set tab-width to 2 spaces */
 .highlight {
 	tab-size: 2;

docs/conf.py

@@ -33,6 +33,7 @@
     "myst_parser",
     "sphinx.ext.autosectionlabel",
     "sphinx.ext.extlinks",
+    "sphinx_design",
     "sphinx_gmt.gmtplot",
 ]
 # Add any paths that contain templates here, relative to this directory.

docs/contributing.rst

@@ -37,6 +37,7 @@ The following dependencies are required for building the GMT examples pages:
 
 - `gmt <https://docs.generic-mapping-tools.org/latest/>`_ (GMT is required for executing example scripts)
 - `sphinx <http://www.sphinx-doc.org/>`_ (a Python documentation generator for creating the docs from source files)
+- `sphinx_design <https://sphinx-design.readthedocs.io/>`_ (A sphinx extension for designing beautiful, screen-size responsive web-components)
 - `sphinx_gmt <https://www.generic-mapping-tools.org/sphinx_gmt/latest/>`_ (a Sphinx extension for creating GMT figures to accompany example scripts)
 - `sphinx_rtd_theme <https://sphinx-rtd-theme.readthedocs.io/en/stable/>`_ (a Sphinx theme used for consistent documentation appearance between GMT projects)
 
@@ -123,18 +124,14 @@ extension. To add a new gallery example or tutorial:
   by the ``sphinx_gmt`` extension.
 
 * Add the file to the appropriate section in ``docs/index.rst`` using the following
-  template:
+  template::
 
-  ::
-
-    ```bash
-      -  .. image:: _images/<file-name>-gmtplot-0.png
-            :target: gallery/<section>/<file-name>.html
-            :width: 80%
-            :align: center
+    .. grid-item-card:: :doc:`gallery/<section>/<file-name>`
+       :padding: 1
+       :link-type: doc
+       :link: gallery/<section>/<file-name>
 
-         :doc:`gallery/<section>/<file-name>`
-    ```
+       .. image:: _images/<image-hash>.png
 
-  Edit the number in the ``.. image:: ...`` line to show a different figure on the
+  Edit the hash in the ``.. image:: ...`` line to show a different figure on the
   index page.

docs/index.rst

@@ -12,9 +12,9 @@ There are two main components to GMT examples project:
 The gallery examples are designed to instruct users on how to complete a specific problem.
 They are how-to guides. It assumes you already know how to work with GMT.
 
-The tutorials are learning orientated with the goal of teaching users GMT. 
-They are designed to help beginners to understand how GMT works. 
-If you want to learn GMT you should start here. 
+The tutorials are learning orientated with the goal of teaching users GMT.
+They are designed to help beginners to understand how GMT works.
+If you want to learn GMT you should start here.
 
 .. toctree::
    :hidden:
@@ -39,9 +39,6 @@ If you want to learn GMT you should start here.
 
    contributing.rst
 
-.. cssclass:: gmtgallery
-
-
 Gallery
 -------
 
@@ -64,14 +61,14 @@ Images, contours, and fields
 3d plots
 ~~~~~~~~
 
-.. cssclass:: gmtgallery
+.. grid:: 2 3 3 4
 
--  .. image:: _images/4546e1b4bf691b3b38010ff66e835609.png
-      :target: gallery/3d_plots/grdview_surface.html
-      :width: 80%
-      :align: center
+    .. grid-item-card:: :doc:`gallery/3d_plots/grdview_surface`
+       :padding: 1
+       :link-type: doc
+       :link: gallery/3d_plots/grdview_surface
 
-   :doc:`gallery/3d_plots/grdview_surface`
+       .. image:: _images/4546e1b4bf691b3b38010ff66e835609.png
 
 Seismology and geodesy
 ~~~~~~~~~~~~~~~~~~~~~~
@@ -91,39 +88,39 @@ Tutorials
 Basics
 ~~~~~~
 
-.. cssclass:: gmtgallery
+.. grid:: 2 3 3 4
 
--  .. image:: _images/67b8930e41c80cad1a26bc81920b6abe.png
-      :target: tutorials/basics/coastlines.html
-      :width: 80%
-      :align: center
+    .. grid-item-card:: :doc:`tutorials/basics/coastlines`
+       :padding: 1
+       :link-type: doc
+       :link: tutorials/basics/coastlines
 
-   :doc:`tutorials/basics/coastlines`
+       .. image:: _images/67b8930e41c80cad1a26bc81920b6abe.png
 
--  .. image:: _images/18736ae188d169a16383b28a3a7afcb8.png
-      :target: tutorials/basics/frames.html
-      :width: 80%
-      :align: center
+    .. grid-item-card:: :doc:`tutorials/basics/frames`
+       :padding: 1
+       :link-type: doc
+       :link: tutorials/basics/frames
 
-   :doc:`tutorials/basics/frames`
+       .. image:: _images/18736ae188d169a16383b28a3a7afcb8.png
 
--  .. image:: _images/1db761511fa1371a3fa3f01cc3bdc199.png
-      :target: tutorials/basics/region.html
-      :width: 80%
-      :align: center
+    .. grid-item-card:: :doc:`tutorials/basics/region`
+       :padding: 1
+       :link-type: doc
+       :link: tutorials/basics/region
 
-   :doc:`tutorials/basics/region`
+       .. image:: _images/1db761511fa1371a3fa3f01cc3bdc199.png
 
--  .. image:: _images/42eb572e679e97489f2a5029a5d74352.png
-      :target: tutorials/basics/color.html
-      :width: 80%
-      :align: center
+    .. grid-item-card:: :doc:`tutorials/basics/color`
+       :padding: 1
+       :link-type: doc
+       :link: tutorials/basics/color
 
-   :doc:`tutorials/basics/color`
+       .. image:: _images/42eb572e679e97489f2a5029a5d74352.png
 
--  .. image:: _images/ec0d8d5349173bd8da9d665f6f93ea70.png
-      :target: tutorials/basics/line.html
-      :width: 80%
-      :align: center
+    .. grid-item-card:: :doc:`tutorials/basics/line`
+       :padding: 1
+       :link-type: doc
+       :link: tutorials/basics/line
 
-   :doc:`tutorials/basics/line`
+       .. image:: _images/ec0d8d5349173bd8da9d665f6f93ea70.png

environment.yml

@@ -7,5 +7,6 @@ dependencies:
   - gmt=6.5.0
   - myst-parser
   - sphinx
+  - sphinx-design
   - sphinx_gmt
   - sphinx_rtd_theme

requirements.txt

@@ -1,4 +1,5 @@
 myst-parser
 sphinx
+sphinx-design
 sphinx_gmt
 sphinx_rtd_theme