DOC/website: Redesign landing page of PyGMT website (#4762)

Co-authored-by: Dongdong Tian <seisman.info@gmail.com>

Author: yvonnefroehlich

doc/_static/style.css

@@ -38,16 +38,6 @@ p {
     margin-bottom: 0px;
 }
 
-.banner {
-    padding-bottom: 60px;
-    text-align: center;
-}
-
-.banner h1 {
-    margin-top: 40px;
-    font-size: 4em;
-}
-
 .wy-nav-content {
     max-width: 1000px;
 }
@@ -71,6 +61,19 @@ p {
     border: solid 2px #b4c7e7;
 }
 
+/* Change color of cards */
+/* https://sphinx-design.readthedocs.io/en/rtd-theme/css_variables.html */
+:root {
+    --sd-color-card-background: #EBF0F9; /* lighter color as top box of sidebar */
+    --sd-color-card-header: #b4c7e7; /* same color as top box of sidebar */
+    --sd-color-card-footer: #FFFFFF; /* white */
+}
+
+/* Set margin below buttons */
+.sd-card-text {
+    margin-bottom: 10px;
+}
+
 /* Format parameters section similar to sphinx_rtd_theme v4.x.x (not a grid) */
 html.writer-html5 .rst-content dl.field-list {
     display: initial;

doc/conf.py

@@ -215,11 +215,11 @@
             "https://forum.generic-mapping-tools.org",
         ),
         (
-            '<i class="fa fa-github fa-fw"></i> Bug Report (GitHub)',
+            '<i class="fa fa-bug fa-fw"></i> Bug Report (GitHub)',
             f"{repository_url}/issues",
         ),
         (
-            '<i class="fa fa-gavel fa-fw"></i> Code of Conduct',
+            '<i class="fa fa-handshake-o fa-fw"></i> Code of Conduct',
             "https://github.com/GenericMappingTools/.github/blob/main/CODE_OF_CONDUCT.md",
         ),
     ],

doc/index.md

@@ -1,19 +1,172 @@
-```{title} Home
-```
+:::{title} Home
+:::
 
-<div class="banner">
-    <img src="_static/pygmtlogo.png" alt="PyGMT Logo" style="width: 65%;">
-    <h2>
-        A Python interface for the
-        <a href="https://www.generic-mapping-tools.org/">Generic Mapping Tools</a>
-    </h2>
-</div>
-
-```{include} ../README.md
-:start-after: <!-- doc-index-start-after -->
-:end-before: <!-- doc-index-end-before -->
-:relative-images:
-```
+<!-- Reference: https://sphinx-design.readthedocs.io/en/rtd-theme/index.html -->
+<!-- Add and center the PyGMT logo image -->
+::::{div} sd-d-flex-row sd-align-major-center
+:::{image} ./_static/pygmtlogo.png
+:width: 600px
+:::
+::::
+<!-- Add short text what PyGMT is and does -->
+:::{div} sd-text-center sd-fs-3 sd-pt-3 sd-pb-3
+A Python interface for the [Generic Mapping Tools](https://www.generic-mapping-tools.org/)
+:::
+
+:::{div} sd-text-center sd-fs-5 sd-pb-3
+PyGMT is a library for processing geospatial and geophysical data and making
+publication-quality maps and figures. It provides a Pythonic interface for the
+[Generic Mapping Tools (GMT)](https://www.generic-mapping-tools.org/), a command-line
+program widely used across the Earth, Ocean, and Planetary sciences and beyond.
+:::
+
+
+<!-- Set up grid -->
+:::::{grid} 1 2 2 3
+
+::::{grid-item-card}
+:margin: 0 3 0 0
+{octicon}`rocket;2.5em;sd-text-info` **Getting Started**
+^^^
+:::{button-ref} install
+:color: secondary
+:outline:
+:shadow:
+:::
+:::{button-ref} intro/index
+:color: secondary
+:outline:
+:shadow:
+:::
+::::
+
+::::{grid-item-card}
+:margin: 0 3 0 0
+{octicon}`globe;2.5em;sd-text-info` **Project Overview**
+^^^
+:::{button-ref} overview
+:color: secondary
+:outline:
+:shadow:
+:::
+:::{button-ref} ecosystem
+:color: secondary
+:outline:
+:shadow:
+:::
+:::{button-ref} presentations
+:color: secondary
+:outline:
+:shadow:
+:::
+:::{button-ref} citing
+:color: secondary
+:outline:
+:shadow:
+:::
+::::
+
+::::{grid-item-card}
+:margin: 0 3 0 0
+{octicon}`mortar-board;2.5em;sd-text-info` **User Guide**
+^^^
+:::{button-ref} tutorials/index
+:color: secondary
+:outline:
+:shadow:
+:::
+:::{button-ref} gallery/index
+:color: secondary
+:outline:
+:shadow:
+:::
+:::{button-ref} projections/index
+:color: secondary
+:outline:
+:shadow:
+:::
+:::{button-ref} external_resources
+:color: secondary
+:outline:
+:shadow:
+:::
+::::
+
+::::{grid-item-card}
+:margin: 0 3 0 0
+{octicon}`book;2.5em;sd-text-info` **Reference Guide**
+^^^
+:::{button-ref} api/index
+:color: secondary
+:outline:
+:shadow:
+:::
+:::{button-ref} techref/index
+:color: secondary
+:outline:
+:shadow:
+:::
+:::{button-ref} minversions
+:color: secondary
+:outline:
+:shadow:
+:::
+:::{button-ref} changes
+:color: secondary
+:outline:
+:shadow:
+:::
+::::
+
+::::{grid-item-card}
+:margin: 0 3 0 0
+{octicon}`terminal;2.5em;sd-text-info` **Development**
+^^^
+:::{button-ref} contributing
+:color: secondary
+:outline:
+:shadow:
+:::
+:::{button-ref} maintenance
+:color: secondary
+:outline:
+:shadow:
+:::
+:::{button-ref} team
+:color: secondary
+:outline:
+:shadow:
+:::
+::::
+
+::::{grid-item-card}
+:margin: 0 3 0 0
+{octicon}`light-bulb;2.5em;sd-text-info` **Getting Help**
+^^^
+:::{button-link} https://forum.generic-mapping-tools.org
+:color: secondary
+:outline:
+:shadow:
+{octicon}`comment-discussion;1em;sd-text-info` GMT Forum
+:::
+:::{button-link} https://github.com/GenericMappingTools/pygmt/issues
+:color: secondary
+:outline:
+:shadow:
+{octicon}`bug;1em;sd-text-info` Bug Report (GitHub)
+:::
+:::{button-link} https://github.com/GenericMappingTools/.github/blob/main/CODE_OF_CONDUCT.md
+:color: secondary
+:outline:
+:shadow:
+{octicon}`code-of-conduct;1em;sd-text-info` Code of Conduct
+:::
+::::
+
+:::::
+
+
+<!-- Set up sidebar -->
 
 ```{toctree}
 :maxdepth: 2
@@ -49,20 +202,20 @@ external_resources.md
 ```{toctree}
 :maxdepth: 2
 :hidden:
-:caption: Reference Documentation
+:caption: Reference Guide
 
 api/index.rst
 techref/index.md
-changes.md
 minversions.md
+changes.md
 ```
 
 ```{toctree}
 :maxdepth: 2
 :hidden:
 :caption: Development
 
-team.md
 contributing.md
 maintenance.md
+team.md
 ```