Redesign the team gallery using sphinx-design's card directive (Gener…

…icMappingTools#1937) Co-authored-by: Max Jones <meghanj@alum.mit.edu> Co-authored-by: Wei Ji <23487320+weiji14@users.noreply.github.com>
sixy6e · Dec 21, 2022 · 9a7badb · 9a7badb
1 parent f5e61b2
commit 9a7badb
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 111 deletions.
diff --git a/.github/workflows/ci_docs.yml b/.github/workflows/ci_docs.yml
@@ -72,7 +72,7 @@ jobs:
         run: |
           mamba install gmt=6.3.0 numpy pandas xarray netCDF4 packaging \
                         build ipython make myst-parser geopandas \
-                        sphinx sphinx-copybutton sphinx-gallery sphinx_rtd_theme
+                        sphinx sphinx-copybutton sphinx-design sphinx-gallery sphinx_rtd_theme
 
       # Show installed pkg information for postmortem diagnostic
       - name: List installed packages

diff --git a/doc/_static/style.css b/doc/_static/style.css
@@ -203,37 +203,3 @@ a.copybtn {
 .sphx-glr-single-img {
     max-width: 80%!important;
 }
-
-.team-row {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.team-card {
-    background-color: #fff;
-    background-clip: border-box;
-    border: 1px solid rgba(0,0,0,.125);
-    border-radius: 0.5rem;
-    margin: 0.25em;
-    flex: 0 1 175px;
-}
-
-.team-img {
-    border-radius: 0.5rem;
-    width: 100%;
-    height: 20vh!important;
-    object-fit: cover;
-}
-
-.team-card-body {
-    padding: 1.25rem;
-    height: 135px;
-}
-
-.team-card-text {
-    display: flex;
-    margin-block-start: 0em;
-    margin-block-end: 0.2em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-}
diff --git a/doc/conf.py b/doc/conf.py
@@ -27,15 +27,18 @@
     "sphinx.ext.extlinks",
     "sphinx.ext.intersphinx",
     "sphinx.ext.napoleon",
-    "sphinx_gallery.gen_gallery",
     "sphinx_copybutton",
+    "sphinx_design",
+    "sphinx_gallery.gen_gallery",
 ]
 
 # Autosummary pages will be generated by sphinx-autogen instead of sphinx-build
 autosummary_generate = []
 
 # Auto-generate header anchors with MyST parser
 myst_heading_anchors = 4
+# Allow code fences using colons
+myst_enable_extensions = ["colon_fence"]
 
 # Make the list of returns arguments and attributes render the same as the
 # parameters list

diff --git a/doc/team.md b/doc/team.md
@@ -22,78 +22,91 @@ responsibilities. Distinguished Contributors who are also active maintainers of
 the PyGMT project and have responsibilities detailed in the
 {doc}`maintenance` have 'Maintainer' listed below their names.
 
-```{raw} html
-
-    <div class="team-row">
-    <div class="team-card">
-        <img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/3974108?v=4" alt="Card image">
-        <div class="team-card-body">
-            <h6 class="team-card-text">Dongdong Tian</h6>
-            <h7 class="team-card-text">Maintainer</h7>
-            <h7 class="team-card-text"><a href="https://github.com/seisman" >@seisman</a></h7>
-        </div>
-    </div>
-    <div class="team-card">
-        <img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/50591376?v=4" alt="Card image">
-        <div class="team-card-body">
-            <h6 class="team-card-text">Jiayuan Yao</h6>
-            <h7 class="team-card-text"><a href="https://github.com/core-man" >@core-man</a></h7>
-        </div>
-    </div>
-    <div class="team-card">
-        <img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/290082?v=4" alt="Card image">
-        <div class="team-card-body">
-            <h6 class="team-card-text">Leonardo Uieda</h6>
-            <h7 class="team-card-text">Founder</h7>
-            <h7 class="team-card-text"><a href="https://github.com/leouieda" >@leouieda</a></h7>
-        </div>
-    </div>
-    <div class="team-card">
-        <img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/38269494?v=4" alt="Card image">
-        <div class="team-card-body">
-            <h6 class="team-card-text">Liam Toney</h6>
-            <h7 class="team-card-text"><a href="https://github.com/liamtoney" >@liamtoney</a></h7>
-        </div>
-    </div>
-    <div class="team-card">
-        <img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/14077947?v=4" alt="Card image">
-        <div class="team-card-body">
-            <h6 class="team-card-text">Meghan Jones</h6>
-            <h7 class="team-card-text">Maintainer</h7>
-            <h7class="team-card-text"><a href="https://github.com/meghanrjones" >@meghanrjones</a></h7>
-        </div>
-    </div>
-    <div class="team-card">
-        <img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/23025878?v=4" alt="Card image">
-        <div class="team-card-body">
-            <h6 class="team-card-text">Michael Grund</h6>
-            <h7 class="team-card-text">Maintainer</h7>
-            <h7class="team-card-text"><a href="https://github.com/michaelgrund" >@michaelgrund</a></h7>
-        </div>
-    </div>
-    <div class="team-card">
-        <img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/26473567?v=4" alt="Card image">
-        <div class="team-card-body">
-            <h6 class="team-card-text">Paul Wessel</h6>
-            <h7 class="team-card-text">Founder</h7>
-            <h7class="team-card-text"><a href="https://github.com/PaulWessel" >@PaulWessel</a></h7>
-        </div>
-    </div>
-    <div class="team-card">
-        <img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/23487320?v=4" alt="Card image">
-        <div class="team-card-body">
-            <h6 class="team-card-text">Wei Ji Leong</h6>
-            <h7 class="team-card-text">Maintainer</h7>
-            <h7class="team-card-text"><a href="https://github.com/weiji14" >@weiji14</a></h7>
-        </div>
-    </div>
-    <div class="team-card">
-        <img class="card-img-top team-img" src="https://avatars.githubusercontent.com/u/29518865?v=4" alt="Card image">
-        <div class="team-card-body">
-            <h6 class="team-card-text">Will Schlitzer</h6>
-            <h7 class="team-card-text">Maintainer</h7>
-            <p class="team-card-text"><a href="https://github.com/willschlitzer" >@willschlitzer</a></h7>
-        </div>
-    </div>
-    </div>
-```
+:::::{grid} 2 3 3 4
+
+::::{grid-item-card} Dongdong Tian
+:margin: 0 3 0 0
+:text-align: center
+:img-top: https://avatars.githubusercontent.com/u/3974108?v=4
+
+[@seisman](https://github.com/seisman)
++++
+{bdg-primary}`Maintainer`
+::::
+
+::::{grid-item-card} Jiayuan Yao
+:margin: 0 3 0 0
+:text-align: center
+:img-top: https://avatars.githubusercontent.com/u/50591376?v=4
+
+[@core-man](https://github.com/core-man)
+::::
+
+::::{grid-item-card} Leonardo Uieda
+:margin: 0 3 0 0
+:text-align: center
+:img-top: https://avatars.githubusercontent.com/u/290082?v=4
+
+[@leouieda](https://github.com/leouieda)
++++
+{bdg-success}`Founder`
+::::
+
+::::{grid-item-card} Liam Toney
+:margin: 0 3 0 0
+:text-align: center
+:img-top: https://avatars.githubusercontent.com/u/38269494?v=4
+
+[@liamtoney](https://github.com/liamtoney)
+::::
+
+::::{grid-item-card} Max Jones
+:margin: 0 3 0 0
+:text-align: center
+:img-top: https://avatars.githubusercontent.com/u/14077947?v=4
+
+[@meghanrjones](https://github.com/meghanrjones)
++++
+{bdg-primary}`Maintainer`
+::::
+
+::::{grid-item-card} Michael Grund
+:margin: 0 3 0 0
+:text-align: center
+:img-top: https://avatars.githubusercontent.com/u/23025878?v=4
+
+[@michaelgrund](https://github.com/michaelgrund)
++++
+{bdg-primary}`Maintainer`
+::::
+
+::::{grid-item-card} Paul Wessel
+:margin: 0 3 0 0
+:text-align: center
+:img-top: https://avatars.githubusercontent.com/u/26473567?v=4
+
+[@PaulWessel](https://github.com/PaulWessel)
++++
+{bdg-success}`Founder`
+::::
+
+::::{grid-item-card} Wei Ji Leong
+:margin: 0 3 0 0
+:text-align: center
+:img-top: https://avatars.githubusercontent.com/u/23487320?v=4
+
+[@weiji14](https://github.com/weiji14)
++++
+{bdg-primary}`Maintainer`
+::::
+
+::::{grid-item-card} Will Schlitzer
+:margin: 0 3 0 0
+:text-align: center
+:img-top: https://avatars.githubusercontent.com/u/29518865?v=4
+
+[@willschlitzer](https://github.com/willschlitzer)
++++
+{bdg-primary}`Maintainer`
+::::
+:::::
diff --git a/environment.yml b/environment.yml
@@ -36,5 +36,6 @@ dependencies:
     - myst-parser
     - sphinx
     - sphinx-copybutton
+    - sphinx-design
     - sphinx-gallery
     - sphinx_rtd_theme