build

docs/index.md

@@ -3,14 +3,15 @@ comments: true
 glightbox: false
 hide:
   - footer
+  - toc
 ---
 
 <h1 align="center">  </h1>
 
-<p align="center">
-  <img src="index.assets/conceptual_rendering.png" width="200">
-  <img src="index.assets/hello_algo_mindmap_tp.png" width="320">
-</p>
+<div class="responsive-div" style="max-width: 500px;">
+  <img src="index.assets/conceptual_rendering.png" style="width: 37%; height: auto;">
+  <img src="index.assets/hello_algo_mindmap_tp.png" style="width: 63%; height: auto;">
+</div>
 
 <h2 align="center"> 《 Hello 算法 》</h2>
 
@@ -50,56 +51,68 @@ hide:
 
 <h2 align="center"> 推荐语 </h2>
 
-!!! quote
-
-    “一本通俗易懂的数据结构与算法入门书，引导读者手脑并用地学习，强烈推荐算法初学者阅读。”
-
-    **—— 邓俊辉，清华大学计算机系教授**
-
-!!! quote
-
-    “如果我当年学数据结构与算法的时候有《Hello 算法》，学起来应该会简单 10 倍！”
-
-    **—— 李沐，亚马逊资深首席科学家**
-
----
-
-<h3 align="center"> 全书动画图解 </h3>
-
-<p align="center"> 内容清晰易懂、学习曲线平滑</br>电脑、平板、手机全终端阅读 </p>
-
-<img src="index.assets/animation.gif" class="cover-image" style="width: 100%; border-radius: 0.5rem;">
-
-!!! quote ""
-
-    <p align="center"> "A picture is worth a thousand words." </p>
-    <p align="center"> “一图胜千言” </p>
+<div style="display: flex;">
+  <div class="admonition quote" style="flex: 1; margin-right: 0.4rem;">
+    <p class="admonition-title">Quote</p>
+    <p>“一本通俗易懂的数据结构与算法入门书，引导读者手脑并用地学习，强烈推荐算法初学者阅读。”</p>
+    <p><strong>—— 邓俊辉，清华大学计算机系教授</strong></p>
+  </div>
+  <div class="admonition quote" style="flex: 1; margin-left: 0.4rem;">
+    <p class="admonition-title">Quote</p>
+    <p>“如果我当年学数据结构与算法的时候有《Hello 算法》，学起来应该会简单 10 倍！”</p>
+    <p><strong>—— 李沐，亚马逊资深首席科学家</strong></p>
+  </div>
+</div>
 
 ---
 
-<h3 align="center"> 代码一键运行 </h3>
-
-<p align="center"> 提供各个算法与数据结构的简洁实现与测试样例，皆可直接运行</br>支持 Python、C++、Java、C#、Go、Swift、JS、TS、Dart、Rust、C、Zig 等语言 </p>
-
-<img src="index.assets/running_code.gif" class="cover-image" style="width: 100%; border-radius: 0.5rem;">
-
-!!! quote ""
-
-    <p align="center"> "Talk is cheap. Show me the code." </p>
-    <p align="center"> “少吹牛，看代码” </p>
-
----
+<div style="display: flex; align-items: center; margin: 2rem auto;">
+  <div style="flex: 1; margin: 0 2rem; display: flex; flex-direction: column; align-items: center;">
+    <div style="display: flex; flex-direction: column; align-items: center;">
+      <h3>动画图解</h3>
+      <svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 0H576c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H256c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64zM476 106.7C471.5 100 464 96 456 96s-15.5 4-20 10.7l-56 84L362.7 169c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h80 48H552c8.9 0 17-4.9 21.2-12.7s3.7-17.3-1.2-24.6l-96-144zM336 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM64 128h96V384v32c0 17.7 14.3 32 32 32H320c17.7 0 32-14.3 32-32V384H512v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192c0-35.3 28.7-64 64-64zm8 64c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V208c0-8.8-7.2-16-16-16H72zm0 104c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V312c0-8.8-7.2-16-16-16H72zm0 104c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V416c0-8.8-7.2-16-16-16H72zm336 16v16c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16V416c0-8.8-7.2-16-16-16H424c-8.8 0-16 7.2-16 16z"/></svg>
+    </div>
+    <p style="text-align: center;">内容清晰易懂</br>学习曲线平滑</p>
+  </div>
+  <img src="index.assets/running_code.gif" class="cover-image" style="flex-shrink: 0; width: auto; max-width: 50%; border-radius: 0.5rem;">
+</div>
 
-<h3 align="center"> 可讨论与提问 </h3>
+<div class="admonition quote">
+  <p align="center">"A picture is worth a thousand words."</p>
+  <p align="center">“一图胜千言”</p>
+</div>
 
-<p align="center"> 鼓励小伙伴们互帮互助、共同成长</br>提问与评论一般能在两日内得到回复 </p>
+<div style="display: flex; align-items: center; margin: 2rem auto;">
+  <img src="index.assets/running_code.gif" class="cover-image" style="flex-shrink: 0; width: auto; max-width: 50%; border-radius: 0.5rem;">
+  <div style="flex: 1; margin: 0 2rem; display: flex; flex-direction: column; align-items: center;">
+    <div style="display: flex; flex-direction: column; align-items: center;">
+      <h3>一键运行</h3>
+      <svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z"/></svg>
+    </div>
+    <p style="text-align: center;">支持十余种编程语言<br>代码皆可直接运行</p>
+  </div>
+</div>
 
-<img src="index.assets/comment.gif" class="cover-image" style="width: 100%; border-radius: 0.5rem;">
+<div class="admonition quote">
+  <p align="center">"Talk is cheap. Show me the code."</p>
+  <p align="center">“少吹牛，看代码”</p>
+</div>
 
-!!! quote ""
+<div style="display: flex; align-items: center; margin: 2rem auto;">
+  <div style="flex: 1; margin: 0 2rem; display: flex; flex-direction: column; align-items: center;">
+    <div style="display: flex; flex-direction: column; align-items: center;">
+      <h3>互助学习</h3>
+      <svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M88.2 309.1c9.8-18.3 6.8-40.8-7.5-55.8C59.4 230.9 48 204 48 176c0-63.5 63.8-128 160-128s160 64.5 160 128s-63.8 128-160 128c-13.1 0-25.8-1.3-37.8-3.6c-10.4-2-21.2-.6-30.7 4.2c-4.1 2.1-8.3 4.1-12.6 6c-16 7.2-32.9 13.5-49.9 18c2.8-4.6 5.4-9.1 7.9-13.6c1.1-1.9 2.2-3.9 3.2-5.9zM0 176c0 41.8 17.2 80.1 45.9 110.3c-.9 1.7-1.9 3.5-2.8 5.1c-10.3 18.4-22.3 36.5-36.6 52.1c-6.6 7-8.3 17.2-4.6 25.9C5.8 378.3 14.4 384 24 384c43 0 86.5-13.3 122.7-29.7c4.8-2.2 9.6-4.5 14.2-6.8c15.1 3 30.9 4.5 47.1 4.5c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176zM432 480c16.2 0 31.9-1.6 47.1-4.5c4.6 2.3 9.4 4.6 14.2 6.8C529.5 498.7 573 512 616 512c9.6 0 18.2-5.7 22-14.5c3.8-8.8 2-19-4.6-25.9c-14.2-15.6-26.2-33.7-36.6-52.1c-.9-1.7-1.9-3.4-2.8-5.1C622.8 384.1 640 345.8 640 304c0-94.4-87.9-171.5-198.2-175.8c4.1 15.2 6.2 31.2 6.2 47.8l0 .6c87.2 6.7 144 67.5 144 127.4c0 28-11.4 54.9-32.7 77.2c-14.3 15-17.3 37.6-7.5 55.8c1.1 2 2.2 4 3.2 5.9c2.5 4.5 5.2 9 7.9 13.6c-17-4.5-33.9-10.7-49.9-18c-4.3-1.9-8.5-3.9-12.6-6c-9.5-4.8-20.3-6.2-30.7-4.2c-12.1 2.4-24.7 3.6-37.8 3.6c-61.7 0-110-26.5-136.8-62.3c-16 5.4-32.8 9.4-50 11.8C279 439.8 350 480 432 480z"/></svg>
+    </div>
+    <p style="text-align: center;">鼓励读者讨论与提问</br>可在两日内得到回复</p>
+  </div>
+  <img src="index.assets/running_code.gif" class="cover-image" style="flex-shrink: 0; width: auto; max-width: 50%; border-radius: 0.5rem;">
+</div>
 
-    <p align="center"> “追风赶月莫停留，平芜尽处是春山” </p>
-    <p align="center"> 一起加油！ </p>
+<div class="admonition quote">
+  <p align="center">"追风赶月莫停留"</p>
+  <p align="center">“平芜尽处是春山”</p>
+</div>
 
 ---
 
@@ -115,7 +128,7 @@ hide:
 
 <h3 align="left"> 作者简介 </h3>
 
-靳宇栋 ([Krahets](https://leetcode.cn/u/jyd/))，大厂高级算法工程师，上海交通大学硕士。力扣（LeetCode）全网阅读量最高博主，发表的[《图解算法数据结构》](https://leetcode.cn/leetbook/detail/illustration-of-algorithm/)已被订阅 27 万本。
+靳宇栋 ([Krahets](https://leetcode.cn/u/jyd/))，大厂高级算法工程师，上海交通大学硕士。力扣（LeetCode）全网阅读量最高博主，发表的[《图解算法数据结构》](https://leetcode.cn/leetbook/detail/illustration-of-algorithm/)已被订阅 30 万本。
 
 ---
 
@@ -125,7 +138,7 @@ hide:
 
 <p align="center">
     <a href="https://github.com/krahets/hello-algo/graphs/contributors">
-        <img width="550" src="https://contrib.rocks/image?repo=krahets/hello-algo" />
+        <img width="550" src="https://contrib.rocks/image?repo=krahets/hello-algo">
     </a>
 </p>
 

overrides/stylesheets/extra.css

@@ -119,3 +119,13 @@ body {
 [data-md-color-scheme="slate"] .md-typeset video {
   filter: brightness(0.85) invert(0.05);
 }
+
+/* landing page */
+.responsive-div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%; /* Default to full width */
+}