init

Author: maomincoding

doc/.vitepress/theme/cutom.css

@@ -32,4 +32,45 @@
 .user-img:hover {
     transition: all 1s;
     transform: rotate(360deg);
+}
+
+/* 自定义样式 */
+
+.VPHero {
+    margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px !important;
+}
+
+.VPHome .container {
+    flex-direction: column !important;
+}
+
+.VPHome .container .heading {
+    display: block;
+    text-align: center !important;
+}
+
+.VPHome .container .main {
+    margin: 0 auto;
+    order: 2 !important;
+}
+
+.VPHome .container .image {
+    order: 1 !important;
+}
+
+.VPHome .container .main .name {
+    display: none;
+}
+
+.VPHome .container .main .actions {
+    justify-content: center !important;
+}
+
+.tagline {
+    text-align: center;
+}
+
+.VPHome {
+    margin-bottom: 0 !important;
 }

doc/en/index.md

@@ -2,11 +2,11 @@
 layout: home
 
 title: Mettle
-titleTemplate: A approachable, fast, flexible and lightweight JavaScript library
+titleTemplate: Approachable, fast, flexible and lightweight JavaScript library
 
 hero:
   name: Mettle
-  text: A approachable, fast, flexible and lightweight JavaScript library
+  text: Approachable, fast, flexible and lightweight JavaScript library
   tagline: Building user interfaces
   actions:
     - theme: brand
@@ -18,15 +18,4 @@ hero:
   image:
     src: /logo.svg
     alt: Mettle
-
-features:
-  - icon: 🔌
-    title: Approachable
-    details: Easier to get started. As long as you are basically familiar with HTML, CSS and JavaScript, you can get started directly. We can declaratively describe the relationship between the final output HTML and JavaScript states. Developers can focus more on the development of business logic and do not need to care too much about the details of DOM operations.
-  - icon: 🚀
-    title: Fast
-    details: Blazing Fast Virtual DOM. Adopts the virtual DOM mode. The virtual DOM uses the diff algorithm to calculate the nodes that really need to be updated, minimizing DOM operations and the typesetting and redrawing losses caused by DOM operations. This significantly improves performance.
-  - icon: 🔩
-    title: Flexible
-    details: Flexible manipulation of code blocks. A function is a component, which can be arbitrarily combined according to the size of the application. And the unique "island feature" of the component allows the level of virtual DOM tree calculation to be controlled at the component level.
 ---

doc/zh/index.md

@@ -2,11 +2,11 @@
 layout: home
 
 title: Mettle
-titleTemplate: 一个易用、快速、灵活且轻量级的JavaScript库
+titleTemplate: 易用、快速、灵活且轻量级的JavaScript库
 
 hero:
   name: Mettle
-  text: 一个易用、快速、灵活且轻量级的JavaScript库
+  text: 易用、快速、灵活且轻量级的JavaScript库
   tagline: 用于构建用户界面
   actions:
     - theme: brand
@@ -18,15 +18,4 @@ hero:
   image:
     src: /logo.svg
     alt: Mettle
-
-features:
-  - icon: 🔌
-    title: 易用
-    details: 更容易上手。只要你对 HTML、CSS 和 JavaScript 已经基本熟悉，就可以直接上手。我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系，开发者可以更加专注于业务逻辑的开发，不需要过多地关心 DOM 操作的细节。
-  - icon: 🚀
-    title: 快速
-    details: 超快的虚拟 DOM。采用了虚拟 DOM 的模式，虚拟 DOM 使用 diff 算法的方法来计算出真正需要更新的节点，最大限度地减少了 DOM 操作以及 DOM 操作带来的排版与重绘损耗，从而显著提高了性能。
-  - icon: 🔩
-    title: 灵活
-    details: 灵活操作代码块。一个函数就是一个组件，可以根据应用规模任意组合。并且组件特有的 “孤岛特性”，使得将虚拟 DOM 树计算的级别控制在组件级别。
 ---