docs: update sphinx card design options for documentation (#784)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Roberto Pastor Muela <[email protected]>

Author: 3 people

doc/source/_static/custom.css

@@ -1,19 +1,5 @@
 @import "../ansys-sphinx-theme.css";
 
-.col-md-3 {
-    flex: 0 0 30%;
-    max-width: 30%;
-}
-.col-xl-7 {
-    flex: 0 0 53.33333%;
-    max-width: 53.33333%;
-  }
-
-.bd-toc {
-    padding-top: 5em;
-}
-
-/* Remove once implemented in ansys-sphinx-theme*/
 
 .sd-card .sd-card-img-top {
     height: 100px;
@@ -23,20 +9,11 @@
 }
 
 .sd-card .sd-card-header {
-  border: none;
-  background-color:white;
-  color: #150458 !important;
   font-size: var(--pst-font-size-h5);
   font-weight: bold;
-  padding: .5rem 0rem 0.5rem 0rem;
-  text-align: center;
+  padding: 1rem 0rem 0.5rem 0rem;
 }
 
 .sd-card .sd-card-footer .sd-card-text {
   max-width: 220px;
-  margin-left: auto;
-  margin-right: auto;
-}
-.sd-card  .sd-card-text {
-  text-align: center;
 }

doc/source/getting_started/docker/index.rst

@@ -27,11 +27,11 @@ meaning that certain operations are not available or fail.
 Select the kind of Docker container you want to build:
 
 .. grid:: 2
+   :gutter: 3 3 4 4
 
    .. grid-item-card:: Windows Docker container
             :link: windows_container
             :link-type: doc
-            :margin: 2 2 0 0
 
             Build a Windows Docker container for the Geometry service
             and use it from PyAnsys Geometry. Explore the full potential
@@ -40,7 +40,6 @@ Select the kind of Docker container you want to build:
    .. grid-item-card:: Linux Docker container
             :link: linux_container
             :link-type: doc
-            :margin: 2 2 0 0
 
             Test out the Linux Docker container for the Geometry service,
             which has limited functionalities.

doc/source/getting_started/index.rst

@@ -13,35 +13,32 @@ running this backend, although the preferred and high-performance mode is using
 containers. Select the option that suits your needs best.
 
 .. grid:: 2
+   :gutter: 3 3 4 4
 
    .. grid-item-card:: Docker containers
             :link: docker/index
             :link-type: doc
-            :margin: 2 2 0 0
 
             Launch the Geometry service as a Docker container
             and connect to it from PyAnsys Geometry.
 
    .. grid-item-card:: Local service
             :link: local/index
             :link-type: doc
-            :margin: 2 2 0 0
 
             Launch the Geometry service locally on your machine
             and connect to it from PyAnsys Geometry.
 
    .. grid-item-card:: Remote service
             :link: remote/index
             :link-type: doc
-            :margin: 2 2 0 0
 
             Launch the Geometry service on a remote machine and
             connect to it using PIM (Product Instance Manager).
 
    .. grid-item-card:: Connect to an existing service
             :link: existing/index
             :link-type: doc
-            :margin: 2 2 0 0
 
             Connect to an existing Geometry service locally or remotely.
 

doc/source/index.rst

@@ -3,126 +3,126 @@ PyAnsys Geometry documentation |version|
 
 PyAnsys Geometry is a Python client library for the Ansys Geometry service.
 
-.. grid:: 2
+.. grid:: 1 2 2 2
+   :gutter: 4
+   :padding: 2 2 0 0
+   :class-container: sd-text-center
 
-   .. grid-item-card::
-            :img-top: _static/assets/index_getting_started.png
+   .. grid-item-card:: Getting started
+      :img-top: _static/assets/index_getting_started.png
+      :class-card: intro-card
 
-            Getting started
-            ^^^^^^^^^^^^^^^
+      Learn how to run the Windows Docker container, install the
+      PyAnsys Geometry image, and launch and connect to the Geometry
+      service.
 
-            Learn how to run the Windows Docker container, install the
-            PyAnsys Geometry image, and launch and connect to the Geometry
-            service.
+      +++
+      .. button-link:: getting_started/index.html
+         :color: secondary
+         :outline:
+         :expand:
+         :click-parent:
 
-            +++
+         Getting started
 
-            .. button-link:: getting_started/index.html
-               :color: secondary
-               :expand:
-               :outline:
-               :click-parent:
+   .. grid-item-card:: User guide
+      :img-top: _static/assets/index_user_guide.png
+      :class-card: intro-card
 
-                  Getting started
+      Understand key concepts and approaches for primitives,
+      sketches, and model designs.
 
-   .. grid-item-card::
-            :img-top: _static/assets/index_user_guide.png
+      +++
+      .. button-link:: user_guide/index.html
+         :color: secondary
+         :expand:
+         :outline:
+         :click-parent:
 
-            User guide
-            ^^^^^^^^^^
+         User guide
 
-            Understand key concepts and approaches for primitives,
-            sketches, and model designs.
-
-            +++
-            .. button-link:: user_guide/index.html
-               :color: secondary
-               :expand:
-               :outline:
-               :click-parent:
-
-                  User guide
 
 
 .. jinja:: main_toctree
 
-    .. grid:: 2
+   .. grid:: 1 2 2 2
+      :gutter: 4
+      :padding: 2 2 0 0
+      :class-container: sd-text-center
 
        {% if build_api %}
-       .. grid-item-card::
-                :img-top: _static/assets/index_api.png
-
-                API reference
-                ^^^^^^^^^^^^^
+      .. grid-item-card:: API reference
+         :img-top: _static/assets/index_api.png
+         :class-card: intro-card
 
-                Understand PyAnsys Geometry API endpoints, their capabilities,
-                and how to interact with them programmatically.
+         Understand PyAnsys Geometry API endpoints, their capabilities,
+         and how to interact with them programmatically.
 
-                +++
-                .. button-link:: api/index.html
-                   :color: secondary
-                   :expand:
-                   :outline:
-                   :click-parent:
+         +++
+         .. button-link:: api/index.html
+            :color: secondary
+            :expand:
+            :outline:
+            :click-parent:
 
-                      API reference
+            API reference
        {% endif %}
 
        {% if build_examples %}
-       .. grid-item-card::
-                :img-top: _static/assets/index_examples.png
+      .. grid-item-card:: Examples
+         :img-top: _static/assets/index_examples.png
+         :class-card: intro-card
 
-                Examples
-                ^^^^^^^^
+         Explore examples that show how to use PyAnsys Geometry to
+         perform many different types of operations.
 
-                Explore examples that show how to use PyAnsys Geometry to
-                perform many different types of operations.
+         +++
+         .. button-link:: examples.html
+            :color: secondary
+            :expand:
+            :outline:
+            :click-parent:
 
-                +++
-                .. button-link:: examples.html
-                   :color: secondary
-                   :expand:
-                   :outline:
-                   :click-parent:
+            Examples
 
-                      Examples
        {% endif %}
 
-.. grid:: 2
+.. grid:: 1 2 2 2
+   :gutter: 4
+   :padding: 2 2 0 0
+   :class-container: sd-text-center
 
-   .. grid-item-card::
-            :img-top: _static/assets/index_contribute.png
+   .. grid-item-card:: Contribute
+      :img-top: _static/assets/index_contribute.png
+      :class-card: intro-card
 
-            Contribute
-            ^^^^^^^^^^
-            Learn how to contribute to the PyAnsys Geometry codebase
-            or documentation.
+      Learn how to contribute to the PyAnsys Geometry codebase
+      or documentation.
 
-            +++
-            .. button-link:: contributing.html
-               :color: secondary
-               :expand:
-               :outline:
-               :click-parent:
+      +++
+      .. button-link:: contributing.html
+         :color: secondary
+         :expand:
+         :outline:
+         :click-parent:
 
-                  Contribute
+         Contribute
 
-   .. grid-item-card::
-            :img-top: _static/assets/index_download.png
+   .. grid-item-card:: Assets
+      :img-top: _static/assets/index_download.png
+      :class-card: intro-card
 
-            Assets
-            ^^^^^^
-            Download different assets related to PyAnsys Geometry,
-            such as documentation, package wheelhouse, and related files.
+      Download different assets related to PyAnsys Geometry,
+      such as documentation, package wheelhouse, and related files.
 
-            +++
-            .. button-link:: assets.html
-               :color: secondary
-               :expand:
-               :outline:
-               :click-parent:
+      +++
+      .. button-link:: assets.html
+         :color: secondary
+         :expand:
+         :outline:
+         :click-parent:
 
-                  Assets
+      Assets
 
 .. jinja:: main_toctree