From 7357b732efa727a00676a3d9233c0bbc84a1f8e8 Mon Sep 17 00:00:00 2001
From: Jinzhe Zeng <jinzhe.zeng@rutgers.edu>
Date: Wed, 17 Jul 2024 22:28:13 -0400
Subject: [PATCH 01/11] docs: fix home page rendering

---
 docs/overall.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/overall.md b/docs/overall.md
index c4d61516e..97ee240eb 100644
--- a/docs/overall.md
+++ b/docs/overall.md
@@ -12,27 +12,27 @@ An automatic reaction network generator for reactive molecular dynamics simulati
 
 <div class="features">
 
-## Trajectory
+<h2>Trajectory</h2>
 
 Processing of MD trajectory containing atomic coordinates or bond orders
 
-## Filtering
+<h2>Filtering</h2>
 
 Hidden Markov Model (HMM) based noise filtering
 
-## Isomers
+<h2>Isomers</h2>
 
 Isomers identifying accoarding to SMILES
 
-## Network
+<h2>Network</h2>
 
 Generation of reaction network for visualization using force-directed algorithm
 
-## HTML5
+<h2>HTML5</h2>
 
 Showing an interactive web page
 
-## Fast
+<h2>Fast</h2>
 
 Parallel computing and performance optimization
 

From bf7680670073c8fe2815786355ad0184e26a18e5 Mon Sep 17 00:00:00 2001
From: Jinzhe Zeng <jinzhe.zeng@rutgers.edu>
Date: Wed, 17 Jul 2024 22:33:38 -0400
Subject: [PATCH 02/11] Update overall.md

---
 docs/overall.md | 45 ++++++++++-----------------------------------
 1 file changed, 10 insertions(+), 35 deletions(-)

diff --git a/docs/overall.md b/docs/overall.md
index 97ee240eb..95d8f8fe9 100644
--- a/docs/overall.md
+++ b/docs/overall.md
@@ -1,5 +1,3 @@
-<header class="hero">
-
 ![Logo](_static/reacnetgen.svg)
 
 # ReacNetGenerator
@@ -8,39 +6,16 @@ An automatic reaction network generator for reactive molecular dynamics simulati
 
 <a href="/guide/install.html" class="nav-link action-button">Get Started</a>
 
-</header>
-
-<div class="features">
-
-<h2>Trajectory</h2>
-
-Processing of MD trajectory containing atomic coordinates or bond orders
-
-<h2>Filtering</h2>
-
-Hidden Markov Model (HMM) based noise filtering
-
-<h2>Isomers</h2>
-
-Isomers identifying accoarding to SMILES
-
-<h2>Network</h2>
-
-Generation of reaction network for visualization using force-directed algorithm
-
-<h2>HTML5</h2>
-
-Showing an interactive web page
-
-<h2>Fast</h2>
-
-Parallel computing and performance optimization
-
-</div>
+- **Trajectory**: Processing of MD trajectory containing atomic coordinates or bond orders
+- **Filtering**: Hidden Markov Model (HMM) based noise filtering
+- **Isomers**: Isomers identifying accoarding to SMILES
+- **Network**: Generation of reaction network for visualization using force-directed algorithm
+- **HTML5**: Showing an interactive web page
+- **Fast**: Parallel computing and performance optimization
 
 <div class="bilitube" data-youtube="TI21SI9YPfo" data-bvid="BV175411N7uG">Loading...</div>
 
-# Citation and contact
+## Citation and contact
 
 ```{bibliography}
 ---
@@ -51,7 +26,7 @@ Zeng_PhysChemChemPhys_2020_v22_p683
 
 jinzhe.zeng@rutgers.edu (Jinzhe Zeng), tzhu@lps.ecnu.edu.cn (Tong Zhu)
 
-# Guide and Tutorials
+## Guide and Tutorials
 
 You can install ReacNetGenerator with `conda`:
 
@@ -62,12 +37,12 @@ reacnetgenerator -h
 
 See [the guide](guide/index) to learn how to install and use ReacNetGenerattor. We also provide [a series of tutorials](tutorial/index) to help you learn ReacNetGenerator.
 
-# Awards
+## Awards
 
 - The First Prize in 2019 (the 11th Session) Shanghai Computer Application Competition for College Students
 - The First Prize in 2019 (the 12th Session) Chinese Computer Design Competition for College Students
 
-# Acknowledge
+## Acknowledge
 
 - National Natural Science Foundation of China (Grants No. 91641116)
 - National Innovation and Entrepreneurship Training Program for Undergraduate (201910269080)

From 395762b94fb6d7441c0ae2f6447608c5dba5a910 Mon Sep 17 00:00:00 2001
From: Jinzhe Zeng <jinzhe.zeng@rutgers.edu>
Date: Wed, 17 Jul 2024 23:11:01 -0400
Subject: [PATCH 03/11] use sphinx-design

---
 docs/_static/css/custom.css | 66 -------------------------------------
 docs/conf.py                |  1 +
 docs/overall.md             | 34 ++++++++++++++-----
 pyproject.toml              |  1 +
 4 files changed, 28 insertions(+), 74 deletions(-)

diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
index 30698f1e5..c22362351 100644
--- a/docs/_static/css/custom.css
+++ b/docs/_static/css/custom.css
@@ -5,69 +5,3 @@
   width: 100%;
   aspect-ratio: 1.2877;
 }
-
-.hero {
-  text-align: center;
-}
-
-.hero .action,
-.hero p,
-.hero img,
-.hero h1 {
-  margin: 1.8rem auto;
-}
-
-.hero img {
-  max-width: 100%;
-  max-height: 280px;
-  display: block;
-  margin: 3rem auto 1.5rem;
-  background: none !important;
-}
-
-.hero p {
-  max-width: 35rem;
-  font-size: 1.6rem;
-  line-height: 1.3;
-  color: #6a8bad;
-}
-
-.hero .action-button {
-  display: inline-block;
-  font-size: 1.2rem;
-  color: #fff;
-  background-color: #3eaf7c;
-  padding: 0.8rem 1.6rem;
-  border-radius: 4px;
-  transition: background-color 0.1s ease;
-  box-sizing: border-box;
-  border-bottom: 1px solid #389d70;
-}
-
-.features {
-  border-top: 1px solid #eaecef;
-  padding: 1.2rem 0;
-  margin-top: 2.5rem;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  align-content: stretch;
-  justify-content: space-between;
-}
-
-.features section {
-  flex-grow: 1;
-  flex-basis: 30%;
-  max-width: 30%;
-}
-
-@media (max-width: 719px) {
-  .features {
-    flex-direction: column;
-  }
-
-  .features section {
-    max-width: 100%;
-    padding: 0 2.5rem;
-  }
-}
diff --git a/docs/conf.py b/docs/conf.py
index 40444712a..083804ef4 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -43,6 +43,7 @@
     "sphinx_favicon",
     "deepmodeling_sphinx",
     "sphinxcontrib.bibtex",
+    "sphinx_design",
 ]
 
 # Add any paths that contain templates here, relative to this directory.
diff --git a/docs/overall.md b/docs/overall.md
index 95d8f8fe9..94a5094b0 100644
--- a/docs/overall.md
+++ b/docs/overall.md
@@ -4,14 +4,32 @@
 
 An automatic reaction network generator for reactive molecular dynamics simulation
 
-<a href="/guide/install.html" class="nav-link action-button">Get Started</a>
-
-- **Trajectory**: Processing of MD trajectory containing atomic coordinates or bond orders
-- **Filtering**: Hidden Markov Model (HMM) based noise filtering
-- **Isomers**: Isomers identifying accoarding to SMILES
-- **Network**: Generation of reaction network for visualization using force-directed algorithm
-- **HTML5**: Showing an interactive web page
-- **Fast**: Parallel computing and performance optimization
+```{button-ref} ./guide/install
+Get Started
+:color: primary
+:shadow:
+```
+
+::::{grid} 3
+:::{grid-item-card}  Trajectory
+Processing of MD trajectory containing atomic coordinates or bond orders
+:::
+:::{grid-item-card}  Filtering
+Hidden Markov Model (HMM) based noise filtering
+:::
+:::{grid-item-card}  Isomers
+Isomers identifying accoarding to SMILES
+:::
+:::{grid-item-card}  Network
+Generation of reaction network for visualization using force-directed algorithm
+:::
+:::{grid-item-card}  HTML5
+Showing an interactive web page
+:::
+:::{grid-item-card}  Fast
+Parallel computing and performance optimization
+:::
+::::
 
 <div class="bilitube" data-youtube="TI21SI9YPfo" data-bvid="BV175411N7uG">Loading...</div>
 
diff --git a/pyproject.toml b/pyproject.toml
index 920bcb0af..cdebc8d1d 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -96,6 +96,7 @@ docs = [
     "sphinxcontrib-bibtex>=2.6.0",
     # See https://github.com/mcmtroffaes/sphinxcontrib-bibtex/issues/345
     "setuptools",
+    "sphinx-design",
 ]
 
 [tool.scikit-build]

From 1782738b2dd900419f4dcfb322030bbfdd6b0385 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Thu, 18 Jul 2024 03:11:11 +0000
Subject: [PATCH 04/11] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 docs/overall.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/overall.md b/docs/overall.md
index 94a5094b0..6eae82b80 100644
--- a/docs/overall.md
+++ b/docs/overall.md
@@ -11,22 +11,22 @@ Get Started
 ```
 
 ::::{grid} 3
-:::{grid-item-card}  Trajectory
+:::{grid-item-card} Trajectory
 Processing of MD trajectory containing atomic coordinates or bond orders
 :::
-:::{grid-item-card}  Filtering
+:::{grid-item-card} Filtering
 Hidden Markov Model (HMM) based noise filtering
 :::
-:::{grid-item-card}  Isomers
+:::{grid-item-card} Isomers
 Isomers identifying accoarding to SMILES
 :::
-:::{grid-item-card}  Network
+:::{grid-item-card} Network
 Generation of reaction network for visualization using force-directed algorithm
 :::
-:::{grid-item-card}  HTML5
+:::{grid-item-card} HTML5
 Showing an interactive web page
 :::
-:::{grid-item-card}  Fast
+:::{grid-item-card} Fast
 Parallel computing and performance optimization
 :::
 ::::

From d1bd79cbedb239a394cb7d534fd698318433ef92 Mon Sep 17 00:00:00 2001
From: Jinzhe Zeng <jinzhe.zeng@rutgers.edu>
Date: Wed, 17 Jul 2024 23:18:45 -0400
Subject: [PATCH 05/11] fix

---
 docs/_static/css/custom.css |  7 +++++++
 docs/overall.md             | 18 ++++++++++--------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
index c22362351..9a5e6b71c 100644
--- a/docs/_static/css/custom.css
+++ b/docs/_static/css/custom.css
@@ -5,3 +5,10 @@
   width: 100%;
   aspect-ratio: 1.2877;
 }
+.reacnetgenerator-icon img {
+  max-width: 100%;
+  max-height: 280px;
+  display: block;
+  margin: 3rem auto 1.5rem;
+  background: none !important;
+}
\ No newline at end of file
diff --git a/docs/overall.md b/docs/overall.md
index 6eae82b80..0ef248082 100644
--- a/docs/overall.md
+++ b/docs/overall.md
@@ -1,32 +1,33 @@
-![Logo](_static/reacnetgen.svg)
+![Logo](_static/reacnetgen.svg){.reacnetgenerator-logo}
 
 # ReacNetGenerator
 
 An automatic reaction network generator for reactive molecular dynamics simulation
 
 ```{button-ref} ./guide/install
-Get Started
 :color: primary
 :shadow:
+
+Get Started
 ```
 
 ::::{grid} 3
-:::{grid-item-card} Trajectory
+:::{grid-item-card}  Trajectory
 Processing of MD trajectory containing atomic coordinates or bond orders
 :::
-:::{grid-item-card} Filtering
+:::{grid-item-card}  Filtering
 Hidden Markov Model (HMM) based noise filtering
 :::
-:::{grid-item-card} Isomers
+:::{grid-item-card}  Isomers
 Isomers identifying accoarding to SMILES
 :::
-:::{grid-item-card} Network
+:::{grid-item-card}  Network
 Generation of reaction network for visualization using force-directed algorithm
 :::
-:::{grid-item-card} HTML5
+:::{grid-item-card}  HTML5
 Showing an interactive web page
 :::
-:::{grid-item-card} Fast
+:::{grid-item-card}  Fast
 Parallel computing and performance optimization
 :::
 ::::
@@ -65,3 +66,4 @@ See [the guide](guide/index) to learn how to install and use ReacNetGenerattor.
 - National Natural Science Foundation of China (Grants No. 91641116)
 - National Innovation and Entrepreneurship Training Program for Undergraduate (201910269080)
 - ECNU Multifunctional Platform for Innovation (No. 001)
+

From ba2493d52c681ee356def731e3a8af143e58e5ba Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Thu, 18 Jul 2024 03:18:56 +0000
Subject: [PATCH 06/11] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 docs/_static/css/custom.css |  2 +-
 docs/overall.md             | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
index 9a5e6b71c..193dd17db 100644
--- a/docs/_static/css/custom.css
+++ b/docs/_static/css/custom.css
@@ -11,4 +11,4 @@
   display: block;
   margin: 3rem auto 1.5rem;
   background: none !important;
-}
\ No newline at end of file
+}
diff --git a/docs/overall.md b/docs/overall.md
index 0ef248082..f20311528 100644
--- a/docs/overall.md
+++ b/docs/overall.md
@@ -12,22 +12,22 @@ Get Started
 ```
 
 ::::{grid} 3
-:::{grid-item-card}  Trajectory
+:::{grid-item-card} Trajectory
 Processing of MD trajectory containing atomic coordinates or bond orders
 :::
-:::{grid-item-card}  Filtering
+:::{grid-item-card} Filtering
 Hidden Markov Model (HMM) based noise filtering
 :::
-:::{grid-item-card}  Isomers
+:::{grid-item-card} Isomers
 Isomers identifying accoarding to SMILES
 :::
-:::{grid-item-card}  Network
+:::{grid-item-card} Network
 Generation of reaction network for visualization using force-directed algorithm
 :::
-:::{grid-item-card}  HTML5
+:::{grid-item-card} HTML5
 Showing an interactive web page
 :::
-:::{grid-item-card}  Fast
+:::{grid-item-card} Fast
 Parallel computing and performance optimization
 :::
 ::::
@@ -66,4 +66,3 @@ See [the guide](guide/index) to learn how to install and use ReacNetGenerattor.
 - National Natural Science Foundation of China (Grants No. 91641116)
 - National Innovation and Entrepreneurship Training Program for Undergraduate (201910269080)
 - ECNU Multifunctional Platform for Innovation (No. 001)
-

From e3711b163df440325a60866eb34cc168343eb709 Mon Sep 17 00:00:00 2001
From: Jinzhe Zeng <jinzhe.zeng@rutgers.edu>
Date: Wed, 17 Jul 2024 23:31:39 -0400
Subject: [PATCH 07/11] enable attrs_inline

---
 docs/conf.py    | 1 +
 docs/overall.md | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/conf.py b/docs/conf.py
index 083804ef4..890d348ba 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -112,6 +112,7 @@
 myst_enable_extensions = [
     "dollarmath",
     "colon_fence",
+    "attrs_inline",
 ]
 mathjax_path = (
     "https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js"
diff --git a/docs/overall.md b/docs/overall.md
index f20311528..fb2ef42a9 100644
--- a/docs/overall.md
+++ b/docs/overall.md
@@ -19,7 +19,7 @@ Processing of MD trajectory containing atomic coordinates or bond orders
 Hidden Markov Model (HMM) based noise filtering
 :::
 :::{grid-item-card} Isomers
-Isomers identifying accoarding to SMILES
+Isomers identifying according to SMILES
 :::
 :::{grid-item-card} Network
 Generation of reaction network for visualization using force-directed algorithm

From 8fda0f2a3039c56f44e782493987f7f98c894a3a Mon Sep 17 00:00:00 2001
From: Jinzhe Zeng <jinzhe.zeng@rutgers.edu>
Date: Wed, 17 Jul 2024 23:37:16 -0400
Subject: [PATCH 08/11] Update custom.css

---
 docs/_static/css/custom.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
index 193dd17db..c6c5aee63 100644
--- a/docs/_static/css/custom.css
+++ b/docs/_static/css/custom.css
@@ -5,7 +5,7 @@
   width: 100%;
   aspect-ratio: 1.2877;
 }
-.reacnetgenerator-icon img {
+.reacnetgenerator-logo img {
   max-width: 100%;
   max-height: 280px;
   display: block;

From c2843164e4475b75950c6895111ab709e7db2e21 Mon Sep 17 00:00:00 2001
From: Jinzhe Zeng <jinzhe.zeng@rutgers.edu>
Date: Wed, 17 Jul 2024 23:37:30 -0400
Subject: [PATCH 09/11] Update docs/overall.md

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Signed-off-by: Jinzhe Zeng <jinzhe.zeng@rutgers.edu>
---
 docs/overall.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/overall.md b/docs/overall.md
index fb2ef42a9..74fe826ea 100644
--- a/docs/overall.md
+++ b/docs/overall.md
@@ -54,7 +54,7 @@ conda install reacnetgenerator -c conda-forge
 reacnetgenerator -h
 ```
 
-See [the guide](guide/index) to learn how to install and use ReacNetGenerattor. We also provide [a series of tutorials](tutorial/index) to help you learn ReacNetGenerator.
+See [the guide](guide/index) to learn how to install and use ReacNetGenerator. We also provide [a series of tutorials](tutorial/index) to help you learn ReacNetGenerator.
 
 ## Awards
 

From 154776785c252cfd860bc44cfee5721736762ac1 Mon Sep 17 00:00:00 2001
From: Jinzhe Zeng <jinzhe.zeng@rutgers.edu>
Date: Wed, 17 Jul 2024 23:54:04 -0400
Subject: [PATCH 10/11] Update custom.css

---
 docs/_static/css/custom.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
index c6c5aee63..83893e5bf 100644
--- a/docs/_static/css/custom.css
+++ b/docs/_static/css/custom.css
@@ -5,7 +5,7 @@
   width: 100%;
   aspect-ratio: 1.2877;
 }
-.reacnetgenerator-logo img {
+.reacnetgenerator-logo {
   max-width: 100%;
   max-height: 280px;
   display: block;

From ae8b1cabd810e7abc1bd275633f61e80f01ba9eb Mon Sep 17 00:00:00 2001
From: Jinzhe Zeng <jinzhe.zeng@rutgers.edu>
Date: Thu, 18 Jul 2024 00:00:00 -0400
Subject: [PATCH 11/11] 1 2 3 3

---
 docs/overall.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/overall.md b/docs/overall.md
index 74fe826ea..4813b9c27 100644
--- a/docs/overall.md
+++ b/docs/overall.md
@@ -11,7 +11,7 @@ An automatic reaction network generator for reactive molecular dynamics simulati
 Get Started
 ```
 
-::::{grid} 3
+::::{grid} 1 2 3 3
 :::{grid-item-card} Trajectory
 Processing of MD trajectory containing atomic coordinates or bond orders
 :::