Bug fixes and improvements (#1078)

* Fix the logo in the en version

* Optimize header color and fix body background color

* Update theme switch's name

* Fix backfrop-filter on Safari

* Update some animation's file name for adding egde when cropping

* Re-count the comments number

* A bug fix in n_queens_problem.md

docs/chapter_backtracking/n_queens_problem.md

@@ -44,6 +44,6 @@
 [file]{n_queens}-[class]{}-[func]{n_queens}
 ```
 
-逐行放置 $n$ 次，考虑列约束，则从第一行到最后一行分别有 $n$、$n-1$、$\dots$、$2$、$1$ 个选择，**因此时间复杂度为 $O(n!)$** 。实际上，根据对角线约束的剪枝也能够大幅缩小搜索空间，因而搜索效率往往优于以上时间复杂度。
+逐行放置 $n$ 次，考虑列约束，则从第一行到最后一行分别有 $n$、$n-1$、$\dots$、$2$、$1$ 个选择，使用 $O(n!)$ 时间；当保存解时，需要复制矩阵 `state` 并添加进 `res` ，复制操作使用 $O(n^2)$ 时间；因此总体时间复杂度为 $O(n! \cdot n^2)$ 。实际上，根据对角线约束的剪枝也能够大幅缩小搜索空间，因而搜索效率往往优于以上时间复杂度。
 
 数组 `state` 使用 $O(n^2)$ 空间，数组 `cols`、`diags1` 和 `diags2` 皆使用 $O(n)$ 空间。最大递归深度为 $n$ ，使用 $O(n)$ 栈帧空间。因此，**空间复杂度为 $O(n^2)$** 。

docs/chapter_dynamic_programming/dp_solution_pipeline.md

@@ -47,7 +47,7 @@
 
 至此，我们就得到了下图所示的二维 $dp$ 矩阵，其尺寸与输入网格 $grid$ 相同。
 
-![状态定义与 dp 表](dp_solution_pipeline.assets/min_path_sum_solution_step1.png)
+![状态定义与 dp 表](dp_solution_pipeline.assets/min_path_sum_solution_state_definition.png)
 
 !!! note
 
@@ -65,7 +65,7 @@ $$
 dp[i, j] = \min(dp[i-1, j], dp[i, j-1]) + grid[i, j]
 $$
 
-![最优子结构与状态转移方程](dp_solution_pipeline.assets/min_path_sum_solution_step2.png)
+![最优子结构与状态转移方程](dp_solution_pipeline.assets/min_path_sum_solution_state_transition.png)
 
 !!! note
 
@@ -79,7 +79,7 @@ $$
 
 如下图所示，由于每个格子是由其左方格子和上方格子转移而来，因此我们使用循环来遍历矩阵，外循环遍历各行，内循环遍历各列。
 
-![边界条件与状态转移顺序](dp_solution_pipeline.assets/min_path_sum_solution_step3.png)
+![边界条件与状态转移顺序](dp_solution_pipeline.assets/min_path_sum_solution_initial_state.png)
 
 !!! note
 

docs/chapter_graph/graph_operations.md

@@ -12,19 +12,19 @@
 - **初始化**：传入 $n$ 个顶点，初始化长度为 $n$ 的顶点列表 `vertices` ，使用 $O(n)$ 时间；初始化 $n \times n$ 大小的邻接矩阵 `adjMat` ，使用 $O(n^2)$ 时间。
 
 === "初始化邻接矩阵"
-    ![邻接矩阵的初始化、增删边、增删顶点](graph_operations.assets/adjacency_matrix_initialization.png)
+    ![邻接矩阵的初始化、增删边、增删顶点](graph_operations.assets/adjacency_matrix_step1_initialization.png)
 
 === "添加边"
-    ![adjacency_matrix_add_edge](graph_operations.assets/adjacency_matrix_add_edge.png)
+    ![adjacency_matrix_add_edge](graph_operations.assets/adjacency_matrix_step2_add_edge.png)
 
 === "删除边"
-    ![adjacency_matrix_remove_edge](graph_operations.assets/adjacency_matrix_remove_edge.png)
+    ![adjacency_matrix_remove_edge](graph_operations.assets/adjacency_matrix_step3_remove_edge.png)
 
 === "添加顶点"
-    ![adjacency_matrix_add_vertex](graph_operations.assets/adjacency_matrix_add_vertex.png)
+    ![adjacency_matrix_add_vertex](graph_operations.assets/adjacency_matrix_step4_add_vertex.png)
 
 === "删除顶点"
-    ![adjacency_matrix_remove_vertex](graph_operations.assets/adjacency_matrix_remove_vertex.png)
+    ![adjacency_matrix_remove_vertex](graph_operations.assets/adjacency_matrix_step5_remove_vertex.png)
 
 以下是基于邻接矩阵表示图的实现代码：
 
@@ -43,19 +43,19 @@
 - **初始化**：在邻接表中创建 $n$ 个顶点和 $2m$ 条边，使用 $O(n + m)$ 时间。
 
 === "初始化邻接表"
-    ![邻接表的初始化、增删边、增删顶点](graph_operations.assets/adjacency_list_initialization.png)
+    ![邻接表的初始化、增删边、增删顶点](graph_operations.assets/adjacency_list_step1_initialization.png)
 
 === "添加边"
-    ![adjacency_list_add_edge](graph_operations.assets/adjacency_list_add_edge.png)
+    ![adjacency_list_add_edge](graph_operations.assets/adjacency_list_step2_add_edge.png)
 
 === "删除边"
-    ![adjacency_list_remove_edge](graph_operations.assets/adjacency_list_remove_edge.png)
+    ![adjacency_list_remove_edge](graph_operations.assets/adjacency_list_step3_remove_edge.png)
 
 === "添加顶点"
-    ![adjacency_list_add_vertex](graph_operations.assets/adjacency_list_add_vertex.png)
+    ![adjacency_list_add_vertex](graph_operations.assets/adjacency_list_step4_add_vertex.png)
 
 === "删除顶点"
-    ![adjacency_list_remove_vertex](graph_operations.assets/adjacency_list_remove_vertex.png)
+    ![adjacency_list_remove_vertex](graph_operations.assets/adjacency_list_step5_remove_vertex.png)
 
 以下是邻接表的代码实现。对比上图，实际代码有以下不同。
 

docs/chapter_stack_and_queue/deque.md

@@ -347,19 +347,19 @@
 如下图所示，我们将双向链表的头节点和尾节点视为双向队列的队首和队尾，同时实现在两端添加和删除节点的功能。
 
 === "LinkedListDeque"
-    ![基于链表实现双向队列的入队出队操作](deque.assets/linkedlist_deque.png)
+    ![基于链表实现双向队列的入队出队操作](deque.assets/linkedlist_deque_step1.png)
 
 === "push_last()"
-    ![linkedlist_deque_push_last](deque.assets/linkedlist_deque_push_last.png)
+    ![linkedlist_deque_push_last](deque.assets/linkedlist_deque_step2_push_last.png)
 
 === "push_first()"
-    ![linkedlist_deque_push_first](deque.assets/linkedlist_deque_push_first.png)
+    ![linkedlist_deque_push_first](deque.assets/linkedlist_deque_step3_push_first.png)
 
 === "pop_last()"
-    ![linkedlist_deque_pop_last](deque.assets/linkedlist_deque_pop_last.png)
+    ![linkedlist_deque_pop_last](deque.assets/linkedlist_deque_step4_pop_last.png)
 
 === "pop_first()"
-    ![linkedlist_deque_pop_first](deque.assets/linkedlist_deque_pop_first.png)
+    ![linkedlist_deque_pop_first](deque.assets/linkedlist_deque_step5_pop_first.png)
 
 实现代码如下所示：
 
@@ -372,19 +372,19 @@
 如下图所示，与基于数组实现队列类似，我们也可以使用环形数组来实现双向队列。
 
 === "ArrayDeque"
-    ![基于数组实现双向队列的入队出队操作](deque.assets/array_deque.png)
+    ![基于数组实现双向队列的入队出队操作](deque.assets/array_deque_step1.png)
 
 === "push_last()"
-    ![array_deque_push_last](deque.assets/array_deque_push_last.png)
+    ![array_deque_push_last](deque.assets/array_deque_step2_push_last.png)
 
 === "push_first()"
-    ![array_deque_push_first](deque.assets/array_deque_push_first.png)
+    ![array_deque_push_first](deque.assets/array_deque_step3_push_first.png)
 
 === "pop_last()"
-    ![array_deque_pop_last](deque.assets/array_deque_pop_last.png)
+    ![array_deque_pop_last](deque.assets/array_deque_step4_pop_last.png)
 
 === "pop_first()"
-    ![array_deque_pop_first](deque.assets/array_deque_pop_first.png)
+    ![array_deque_pop_first](deque.assets/array_deque_step5_pop_first.png)
 
 在队列的实现基础上，仅需增加“队首入队”和“队尾出队”的方法：
 

docs/chapter_stack_and_queue/queue.md

@@ -321,13 +321,13 @@
 如下图所示，我们可以将链表的“头节点”和“尾节点”分别视为“队首”和“队尾”，规定队尾仅可添加节点，队首仅可删除节点。
 
 === "LinkedListQueue"
-    ![基于链表实现队列的入队出队操作](queue.assets/linkedlist_queue.png)
+    ![基于链表实现队列的入队出队操作](queue.assets/linkedlist_queue_step1.png)
 
 === "push()"
-    ![linkedlist_queue_push](queue.assets/linkedlist_queue_push.png)
+    ![linkedlist_queue_push](queue.assets/linkedlist_queue_step2_push.png)
 
 === "pop()"
-    ![linkedlist_queue_pop](queue.assets/linkedlist_queue_pop.png)
+    ![linkedlist_queue_pop](queue.assets/linkedlist_queue_step3_pop.png)
 
 以下是用链表实现队列的代码：
 
@@ -349,13 +349,13 @@
 可以看到，入队和出队操作都只需进行一次操作，时间复杂度均为 $O(1)$ 。
 
 === "ArrayQueue"
-    ![基于数组实现队列的入队出队操作](queue.assets/array_queue.png)
+    ![基于数组实现队列的入队出队操作](queue.assets/array_queue_step1.png)
 
 === "push()"
-    ![array_queue_push](queue.assets/array_queue_push.png)
+    ![array_queue_push](queue.assets/array_queue_step2_push.png)
 
 === "pop()"
-    ![array_queue_pop](queue.assets/array_queue_pop.png)
+    ![array_queue_pop](queue.assets/array_queue_step3_pop.png)
 
 你可能会发现一个问题：在不断进行入队和出队的过程中，`front` 和 `rear` 都在向右移动，**当它们到达数组尾部时就无法继续移动了**。为了解决此问题，我们可以将数组视为首尾相接的“环形数组”。
 

docs/chapter_stack_and_queue/stack.md

@@ -319,13 +319,13 @@
 如下图所示，对于入栈操作，我们只需将元素插入链表头部，这种节点插入方法被称为“头插法”。而对于出栈操作，只需将头节点从链表中删除即可。
 
 === "LinkedListStack"
-    ![基于链表实现栈的入栈出栈操作](stack.assets/linkedlist_stack.png)
+    ![基于链表实现栈的入栈出栈操作](stack.assets/linkedlist_stack_step1.png)
 
 === "push()"
-    ![linkedlist_stack_push](stack.assets/linkedlist_stack_push.png)
+    ![linkedlist_stack_push](stack.assets/linkedlist_stack_step2_push.png)
 
 === "pop()"
-    ![linkedlist_stack_pop](stack.assets/linkedlist_stack_pop.png)
+    ![linkedlist_stack_pop](stack.assets/linkedlist_stack_step3_pop.png)
 
 以下是基于链表实现栈的示例代码：
 
@@ -338,13 +338,13 @@
 使用数组实现栈时，我们可以将数组的尾部作为栈顶。如下图所示，入栈与出栈操作分别对应在数组尾部添加元素与删除元素，时间复杂度都为 $O(1)$ 。
 
 === "ArrayStack"
-    ![基于数组实现栈的入栈出栈操作](stack.assets/array_stack.png)
+    ![基于数组实现栈的入栈出栈操作](stack.assets/array_stack_step1.png)
 
 === "push()"
-    ![array_stack_push](stack.assets/array_stack_push.png)
+    ![array_stack_push](stack.assets/array_stack_step2_push.png)
 
 === "pop()"
-    ![array_stack_pop](stack.assets/array_stack_pop.png)
+    ![array_stack_pop](stack.assets/array_stack_step3_pop.png)
 
 由于入栈的元素可能会源源不断地增加，因此我们可以使用动态数组，这样就无须自行处理数组扩容问题。以下为示例代码：
 

docs/index.md

@@ -148,7 +148,7 @@ hide:
       <img src="https://img.shields.io/badge/C-snow?logo=c&logoColor=A8B9CC">
       <img src="https://img.shields.io/badge/Zig-snow?logo=zig&logoColor=F7A41D">
     </div>
-    <p style="margin-top: 2em;">500 幅动画图解、12 种编程语言代码、2000 条社区问答，助你快速入门数据结构与算法</p>
+    <p style="margin-top: 2em;">500 幅动画图解、12 种编程语言代码、3000 条社区问答，助你快速入门数据结构与算法</p>
   </div>
 </section>
 

mkdocs-en.yml

@@ -17,6 +17,19 @@ theme:
   font:
     text: Roboto
     code: Roboto Mono
+  palette:
+    - scheme: default
+      primary: white
+      accent: teal
+      toggle:
+        icon: material/theme-light-dark
+        name: Dark mode
+    - scheme: slate
+      primary: black
+      accent: teal
+      toggle:
+        icon: material/theme-light-dark
+        name: Light mode
 
 extra:
   status:

mkdocs.yml

@@ -46,16 +46,16 @@ theme:
   palette:
     - scheme: default
       primary: white
-      # accent: indigo
+      accent: teal
       toggle:
         icon: material/theme-light-dark
-        name: Switch to dark mode
+        name: 深色模式
     - scheme: slate
-      primary: grey
+      primary: black
-      # accent: indigo
+      accent: teal
       toggle:
         icon: material/theme-light-dark
-        name: Switch to light mode
+        name: 浅色模式
   font:
     text: Noto Sans SC
     code: Fira Code

overrides/stylesheets/extra.css

@@ -8,6 +8,9 @@
   --md-default-fg-color: #1d1d20;
   --md-default-bg-color: #ffffff;
 
+  --md-body-bg-color: #22272e;
+  --md-header-bg-color: rgba(255, 255, 255, 0.6);
+
   --md-code-fg-color: #1d1d20;
   --md-code-bg-color: #f5f5f5;
 
@@ -32,6 +35,9 @@
   --md-default-fg-color: #adbac7;
   --md-default-bg-color: #22272e;
 
+  --md-body-bg-color: #22272e;
+  --md-header-bg-color: rgba(34, 39, 46, 0.8);
+
   --md-code-fg-color: #adbac7;
   --md-code-bg-color: #1d2126;
 
@@ -42,7 +48,7 @@
   --md-footer-fg-color: #adbac7;
 
   --md-typeset-color: #adbac7;
-  --md-typeset-a-color: #52bbb1 !important;
+  --md-typeset-a-color: #52bbb1;
 
   --md-typeset-btn-color: #52bbb1;
   --md-typeset-btn-hover-color: #55aea6;
@@ -50,6 +56,23 @@
   --md-admonition-pythontutor-color: #30363f;
 }
 
+[data-md-color-scheme="slate"][data-md-color-primary="black"],
+[data-md-color-scheme="slate"][data-md-color-primary="white"] {
+  --md-typeset-a-color: #52bbb1;
+}
+
+[data-md-color-primary="black"] .md-header {
+  background-color: var(--md-header-bg-color);
+}
+
+.md-header {
+  box-shadow: none;
+  transition: none;
+  backdrop-filter: saturate(180%) blur(20px); /* Gaussian blur */
+  -webkit-backdrop-filter: saturate(180%) blur(20px); /* Safari */
+  background-color: var(--md-header-bg-color);
+}
+
 /* https://github.com/squidfunk/mkdocs-material/issues/4832#issuecomment-1374891676 */
 .md-nav__link[for] {
   color: var(--md-default-fg-color) !important;
@@ -400,7 +423,7 @@ a:hover .hero-caption {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  max-width: 720px;
+  max-width: 40em;
   margin: 1em auto;
 }
 
@@ -433,6 +456,17 @@ a:hover .hero-caption {
     height: 33vw;
   }
 
+  .contrib-image {
+    width: 100%;
+  }
+}
+
+/* Hide table of contents */
+@media screen and (max-width: 60em) {
+  .home-div {
+    font-size: 0.75rem;
+  }
+
   .intro-container {
     flex-direction: column;
   }
@@ -454,25 +488,14 @@ a:hover .hero-caption {
     margin-bottom: 1em;
   }
 
-  .contrib-image {
+  .text-button {
-    width: 100%;
+    margin: 0.7em auto;
   }
 
   .profile-div {
-    max-width: 500px;
+    max-width: 30em;
   }
   .profile-cell {
     flex-basis: 25%;
   }
 }
-
-/* Hide table of contents */
-@media screen and (max-width: 60em) {
-  .home-div {
-    font-size: 0.75rem;
-  }
-
-  .text-button {
-    margin: 0.7em auto;
-  }
-}