dubbo-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From liu...@apache.org
Subject [dubbo-website] 26/38: add css styles
Date Wed, 21 Oct 2020 10:12:03 GMT
This is an automated email from the ASF dual-hosted git repository.

liujun pushed a commit to branch mkdocs
in repository https://gitbox.apache.org/repos/asf/dubbo-website.git

commit 36d725cf4b8186fbc9d6248346aafcc20bb607ae
Author: ken.lj <ken.lj.hz@gmail.com>
AuthorDate: Wed Oct 14 23:32:05 2020 +0800

    add css styles
---
 README.md                             |  14 ---
 en-us/css/dropdown.css                | 111 +++++++++++++------
 en-us/index.md                        |   2 +-
 mkdocs_en.yml                         |   6 +-
 mkdocs_zh.yml                         |   4 +-
 overrides/{home.html => home_en.html} | 152 ++++++++++++++++++++++----
 overrides/{home.html => home_zh.html} | 199 ++++++++++++++++++++++++----------
 overrides/partials/tabs-item.html     |  27 +++--
 zh-cn/css/dropdown.css                | 111 +++++++++++++------
 zh-cn/index.md                        |   2 +-
 10 files changed, 450 insertions(+), 178 deletions(-)

diff --git a/README.md b/README.md
index 572f772..a28b7eb 100644
--- a/README.md
+++ b/README.md
@@ -13,20 +13,6 @@ Please also make sure your node version is 8.x, versions higher than 8.x
is not
 
 ## Build instruction
 
-1. Run `npm install docsite -g` to install the dev tool.
-2. Run `npm i` in the root directory to install the dependencies.
-3. Run `docsite start` in the root directory to start a local server, you will see the website
in 'http://127.0.0.1:8080'.
-4. Run `docsite build` to build source code.
-5. Verify your change locally: `python -m SimpleHTTPServer 8000`, when your python version
is 3 use :`python3 -m http.server 8000` instead.
-
-If you have higher version of node installed, you may consider `nvm` to allow different versions
of `node` coexisting on your machine.
-
-1. Follow the [instructions](http://nvm.sh) to install nvm
-2. Run `nvm install v8.16.0` to install node v8
-3. Run `nvm use v8.16.0` to switch the working environment to node v8
-4. Run `npm install docsite -g`
-
-Then you are all set to run and build the website. Follow the build instruction above for
the details.
 
 ## How to send a PR
 
diff --git a/en-us/css/dropdown.css b/en-us/css/dropdown.css
index 0c13a27..f495cb8 100644
--- a/en-us/css/dropdown.css
+++ b/en-us/css/dropdown.css
@@ -1,48 +1,93 @@
-.list-menu{
-    display: flex;
-    background: #f7f7f7;
-    border-radius: 5px;
-    padding: 10px 0;
-    justify-content: space-around;
-    color: #205D67;
-    width: 80%;
+
+.md-tabs_csr {
+    cursor: pointer;
+    position: relative;
+    height: 4.5rem;
 }
 
-.list-menu li{
-    list-style: none;
+.md-sub-tabs_bn {
+    display: none;
+    position: absolute;
+    top: 1.8rem;
+    left: 1rem;
 }
 
-.list-menu li:hover > ul{
-    box-shadow: 0 0 10px #ccc;
+.md-tabs_csr:hover .md-sub-tabs_bn {
     display: block;
 }
 
-.list-menu li ul{
-    position: absolute;
-    display: none;
-    background: #fff;
-    border:1px #f7f7f7 solid;
-    border-radius: 5px;
-    width: 10%;
-    margin: 0;
-    padding: 0;
-    color:#205D67;
-    font-size: 0.9rem;
+.md-sub-tabs_link {
+    display: block;
+    margin-top: .5rem;
+    font-size: .7rem;
+    opacity: .7;
+    transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), opacity 250ms;
 }
 
-.list-menu li ul a{
-    text-decoration: none;
-    color:#205D67;
+.md-sub-tabs_link:hover {
+    color: inherit;
+    opacity: 1;
 }
 
-.list-menu li ul a li{
-    line-height: 30px;
-    padding-left:10%;
-    box-sizing: border-box;
+.text-center {
+    text-align: center;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+    font-family: 'Lato', sans-serif;
+    font-size: 23px;
+    font-weight: 300;
+    padding-bottom: 10px;
+    margin-top: 15px;
+}
+
+.bottom-hr {
+    margin-top: 30px;
     width: 100%;
+    display: flex;
+    max-width: 61rem;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0 .2rem;
 }
 
-.list-menu li ul a li:hover{
-    background: #f7f7f7;
-    cursor: pointer;
+.feature-item {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+}
+
+.feature-item {
+    font-family: 'Lato', sans-serif;
+    font-weight: 300;
+    box-sizing: border-box;
+    padding: 15px;
+    word-break: break-all
+}
+
+.feature-right {
+    /* background-color: aqua; */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 10px;
+}
+
+.feature-title {
+    display: block;
+    font-size: 1.5em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+}
+
+.feature-detail {
+    color: #999;
+    font-size: 13px;
+}
+
+.mt35 {
+    margin-top: 35px;
 }
\ No newline at end of file
diff --git a/en-us/index.md b/en-us/index.md
index 11e203e..0458f54 100755
--- a/en-us/index.md
+++ b/en-us/index.md
@@ -1,4 +1,4 @@
 ---
-template: home.html
+template: home_en.html
 title: Apache Dubbo
 ---
diff --git a/mkdocs_en.yml b/mkdocs_en.yml
index 143bcc1..2ec5d41 100644
--- a/mkdocs_en.yml
+++ b/mkdocs_en.yml
@@ -1,6 +1,6 @@
 site_name: Apache Dubbo
-repo_url: https://github.com/apache/dubbo-website/
-edit_uri: edit/master/en-us/
+repo_url: https://github.com/apache/dubbo/
+edit_uri: https://github.com/apache/dubbo-website/edit/master/en-us/
 site_description: >-
   Apache Dubbo™ is a Microservices Framework。
 docs_dir: 'en-us'
@@ -210,6 +210,8 @@ extra:
     - icon: fontawesome/brands/instagram
       link: https://instagram.com/squidfunk
   docs_key: 'Docs'
+extra_css:
+  - css/dropdown.css
 # Extensions
 markdown_extensions:
   - markdown.extensions.admonition
diff --git a/mkdocs_zh.yml b/mkdocs_zh.yml
index 1736a08..40aa68a 100644
--- a/mkdocs_zh.yml
+++ b/mkdocs_zh.yml
@@ -1,6 +1,6 @@
 site_name: Apache Dubbo
-repo_url: https://github.com/apache/dubbo-website/
-edit_uri: edit/master/zh-cn/
+repo_url: https://github.com/apache/dubbo/
+edit_uri: https://github.com/apache/dubbo-website/edit/master/zh-cn/
 site_description: >-
   Apache Dubbo™ 是一款微服务框架(Microservices Framework),它提供高性能
RPC 通信、服务发现、流量管理等服务治理能力,为你提供构建大规模微服务集群所需的全套解决方案。
 docs_dir: 'zh-cn'
diff --git a/overrides/home.html b/overrides/home_en.html
similarity index 70%
copy from overrides/home.html
copy to overrides/home_en.html
index c6b4503..704c635 100755
--- a/overrides/home.html
+++ b/overrides/home_en.html
@@ -216,7 +216,6 @@ This file was automatically generated - do not edit
     margin: 20px 0;
   }
 
-"A"
   .text-center {
     text-align: center;
     padding-right: 15px;
@@ -314,6 +313,99 @@ This file was automatically generated - do not edit
     color-adjust: exact;
   }
 
+  .md-tabs_csr {
+    cursor: pointer;
+    position: relative;
+    height: 4.5rem;
+  }
+
+  .md-sub-tabs_bn {
+    display: none;
+    position: absolute;
+    top: 1.8rem;
+    left: 1rem;
+  }
+
+  .md-tabs_csr:hover .md-sub-tabs_bn {
+    display: block;
+  }
+
+  .md-sub-tabs_link {
+    display: block;
+    margin-top: .5rem;
+    font-size: .7rem;
+    opacity: .7;
+    transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), opacity 250ms;
+  }
+
+  .md-sub-tabs_link:hover {
+    color: inherit;
+    opacity: 1;
+  }
+
+  .text-center {
+    text-align: center;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+    font-family: 'Lato', sans-serif;
+    font-size: 23px;
+    font-weight: 300;
+    padding-bottom: 10px;
+    margin-top: 15px;
+  }
+
+  .bottom-hr {
+    margin-top: 30px;
+    width: 100%;
+    display: flex;
+    max-width: 61rem;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0 .2rem;
+  }
+
+  .feature-item {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+
+  .feature-item {
+    font-family: 'Lato', sans-serif;
+    font-weight: 300;
+    box-sizing: border-box;
+    padding: 15px;
+    word-break: break-all
+  }
+
+  .feature-right {
+    /* background-color: aqua; */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 10px;
+  }
+
+  .feature-title {
+    display: block;
+    font-size: 1.5em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+  }
+
+  .feature-detail {
+    color: #999;
+    font-size: 13px;
+  }
+
+  .mt35 {
+    margin-top: 35px;
+  }
+
   /* 页脚部分样式结束 */
 </style>
 <section class="tx-container">
@@ -322,11 +414,11 @@ This file was automatically generated - do not edit
       <div class="tx-hero__content">
         <h1>Apache Dubbo</h1>
         <p>{{ config.site_description }}</p>
-        <a href="/zh-cn/docs/2.7/user/quick-start.md" title="Quick Start" class="md-button
md-button--primary">
-          快速开始
+        <a href="/en-us/docs/2.7/user/quick-start.md" title="Quick Start" class="md-button
md-button--primary">
+          Quick Start
         </a>
         <a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-button">
-          前往GitHub
+          Visit GitHub
         </a>
       </div>
     </div>
@@ -334,38 +426,52 @@ This file was automatically generated - do not edit
 
 
 </section>
+<div class="text-center mt35">Features</div>
 <div class="top-hr">
   <div class="feature-item">
-    <h2>
-      <img src="./img/feature_loadbalances.png" alt=""/>基于 HTTP/2 高性能通信协议
-    </h2>
-    <p>Dubbo3 协议基于 HTTP/2 构建,全面兼容 gRPC,对 Service Mesh、移动端设备更通、用更友好</p>
+    <img src="./img/feature_loadbalances.png" alt="" />
+    <div class="feature-right">
+      <div class="feature-title">基于 HTTP/2 高性能通信协议</div>
+      <div class="feature-detail">Dubbo3 协议基于 HTTP/2 构建,全面兼容
gRPC,对 Service Mesh、移动端设备更通、用更友好</div>
+    </div>
   </div>
   <div class="feature-item">
-    <h2>
-      <img src="./img/feature_loadbalances.png" alt=""/>RPC 粒度的透明服务发现能力
-    </h2>
-    <p>地址与 RPC 元数据解耦,实现业界唯一的 RPC 粒度服务自动发现,同时最小化地址推送资源占用,轻松共建百万实例微服务集群</p>
+    <img src="./img/feature_loadbalances.png" alt="" />
+    <div class="feature-right">
+      <div class="feature-title">RPC 粒度的透明服务发现能力</div>
+      <div class="feature-detail">地址与 RPC 元数据解耦,实现业界唯一的
RPC 粒度服务自动发现,同时最小化地址推送资源占用,轻松共建百万实例微服务集群</div>
+    </div>
   </div>
   <div class="feature-item">
-    <h2>
-      <img src="./img/feature_loadbalances.png" alt=""/>全面重构的流量管控策略
-    </h2>
-    <p>提供基于标签匹配的全新路由规则,摆脱内置条件、脚本等路由策略,通过配置不同的路由规则,轻松实现灰度发布,同机房优先等功能。</p>
+    <img src="./img/feature_loadbalances.png" alt="" />
+    <div class="feature-right">
+      <div class="feature-title">全面重构的流量管控策略</div>
+      <div class="feature-detail">提供基于标签匹配的全新路由规则,摆脱内置条件、脚本等路由策略,通过配置不同的路由规则,轻松实现灰度发布,同机房优先等功能</div>
+    </div>
   </div>
 </div>
 <div class="bottom-hr">
   <div class="feature-item">
-    <h2><img src="./img/feature_loadbalances.png" alt=""/>面向接口,极致易用</h2>
-    <p>面向接口的编程模型,面向接口的服务治理能力</p>
+    <img src="./img/feature_loadbalances.png" alt="" />
+    <div class="feature-right">
+      <div class="feature-title">面向接口,极致易用</div>
+      <div class="feature-detail">面向接口的编程模型,面向接口的服务治理能力</div>
+    </div>
   </div>
   <div class="feature-item">
-    <h2><img src="./img/feature_loadbalances.png" alt=""/>柔性</h2>
-    <p>柔性</p>
+    <img src="./img/feature_loadbalances.png" alt="" />
+    <div class="feature-right">
+      <div class="feature-title">柔性</div>
+      <div class="feature-detail">提供基于标签匹配的全新路由规则,摆脱内置条件、脚本等路由策略,通过配置不同的路由规则,轻松实现灰度发布,同机房优先等功能</div>
+    </div>
   </div>
   <div class="feature-item">
-    <h2><img src="./img/feature_loadbalances.png" alt=""/>全面拥抱云原生</h2>
-    <p>服务发现下沉,支持 Kubernetes Native Service;通过对接原生 xDS
数据通信接口,提供云原生 ServiceMesh 平滑迁移方案</p>
+    <img src="./img/feature_loadbalances.png" alt="" />
+    <div class="feature-right">
+      <div class="feature-title">全面拥抱云原生</div>
+      <div class="feature-detail">服务发现下沉,支持 Kubernetes Native Service;通过对接原生
xDS 数据通信接口,提供云原生 ServiceMesh 平滑迁移方案
+      </div>
+    </div>
   </div>
 </div>
 <div class="top-hr">
@@ -373,7 +479,7 @@ This file was automatically generated - do not edit
   </div>
 </div>
 
-<div class="text-center">Dubbo 案例</div>
+<div class="text-center">Use Cases</div>
 <div class="top-hr hr-logos">
   <div class="logos">
     <a href="https://www.alibaba.com" target="_blank">
diff --git a/overrides/home.html b/overrides/home_zh.html
similarity index 63%
rename from overrides/home.html
rename to overrides/home_zh.html
index c6b4503..562ca6b 100755
--- a/overrides/home.html
+++ b/overrides/home_zh.html
@@ -314,8 +314,101 @@ This file was automatically generated - do not edit
     color-adjust: exact;
   }
 
+  .md-tabs_csr {
+    cursor: pointer;
+    position: relative;
+    height: 4.5rem;
+  }
+
+  .md-sub-tabs_bn {
+    display: none;
+    position: absolute;
+    top: 1.8rem;
+    left: 1rem;
+  }
+
+  .md-tabs_csr:hover .md-sub-tabs_bn {
+    display: block;
+  }
+
+  .md-sub-tabs_link {
+    display: block;
+    margin-top: .5rem;
+    font-size: .7rem;
+    opacity: .7;
+    transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), opacity 250ms;
+  }
+
+  .md-sub-tabs_link:hover {
+    color: inherit;
+    opacity: 1;
+  }
+
+  .feature-item {
+    font-family: 'Lato', sans-serif;
+    font-weight: 300;
+    box-sizing: border-box;
+    padding: 15px;
+    word-break: break-all
+  }
+
+  .bottom-hr {
+    margin-top: 30px;
+    width: 100%;
+    display: flex;
+    max-width: 61rem;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0 .2rem;
+  }
+
+  .feature-item {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+
+  .text-center {
+    text-align: center;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+    font-family: 'Lato', sans-serif;
+    font-size: 23px;
+    font-weight: 300;
+    padding-bottom: 10px;
+    margin-top: 15px;
+  }
+
+  .feature-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 10px;
+  }
+
+  .feature-title {
+    display: block;
+    font-size: 1.5em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+  }
+
+  .feature-detail {
+    color: #999;
+    font-size: 13px;
+  }
+
+  .mt35 {
+    margin-top: 35px;
+  }
+
   /* 页脚部分样式结束 */
 </style>
+<style />
 <section class="tx-container">
   <div class="md-grid md-typeset">
     <div class="tx-hero">
@@ -331,72 +424,68 @@ This file was automatically generated - do not edit
       </div>
     </div>
   </div>
-
-
 </section>
-<div class="top-hr">
-  <div class="feature-item">
-    <h2>
-      <img src="./img/feature_loadbalances.png" alt=""/>基于 HTTP/2 高性能通信协议
-    </h2>
-    <p>Dubbo3 协议基于 HTTP/2 构建,全面兼容 gRPC,对 Service Mesh、移动端设备更通、用更友好</p>
+
+<div class="text-center mt35">特性一览</div>
+<div class=top-hr>
+  <div class=feature-item>
+    <img src="./img/feature_loadbalances.png" alt="" />
+    <div class="feature-right">
+      <div class="feature-title">基于 HTTP/2 高性能通信协议</div>
+      <div class="feature-detail">Dubbo3 协议基于 HTTP/2 构建,全面兼容
gRPC,对 Service Mesh、移动端设备更通、用更友好</div>
+    </div>
   </div>
-  <div class="feature-item">
-    <h2>
-      <img src="./img/feature_loadbalances.png" alt=""/>RPC 粒度的透明服务发现能力
-    </h2>
-    <p>地址与 RPC 元数据解耦,实现业界唯一的 RPC 粒度服务自动发现,同时最小化地址推送资源占用,轻松共建百万实例微服务集群</p>
+  <div class=feature-item>
+    <img src="./img/feature_loadbalances.png" alt="" />
+    <div class="feature-right">
+      <div class="feature-title">RPC 粒度的透明服务发现能力</div>
+      <div class="feature-detail">地址与 RPC 元数据解耦,实现业界唯一的
RPC 粒度服务自动发现,同时最小化地址推送资源占用,轻松共建百万实例微服务集群</div>
+    </div>
   </div>
-  <div class="feature-item">
-    <h2>
-      <img src="./img/feature_loadbalances.png" alt=""/>全面重构的流量管控策略
-    </h2>
-    <p>提供基于标签匹配的全新路由规则,摆脱内置条件、脚本等路由策略,通过配置不同的路由规则,轻松实现灰度发布,同机房优先等功能。</p>
+  <div class=feature-item>
+    <img src="./img/feature_loadbalances.png" alt="" />
+    <div class="feature-right">
+      <div class="feature-title">全面重构的流量管控策略</div>
+      <div class="feature-detail">提供基于标签匹配的全新路由规则,摆脱内置条件、脚本等路由策略,通过配置不同的路由规则,轻松实现灰度发布,同机房优先等功能</div>
+    </div>
   </div>
 </div>
-<div class="bottom-hr">
-  <div class="feature-item">
-    <h2><img src="./img/feature_loadbalances.png" alt=""/>面向接口,极致易用</h2>
-    <p>面向接口的编程模型,面向接口的服务治理能力</p>
+<div class=bottom-hr>
+  <div class=feature-item>
+    <img src="./img/feature_loadbalances.png" alt="" />
+    <div class="feature-right">
+      <div class="feature-title">面向接口,极致易用</div>
+      <div class="feature-detail">面向接口的编程模型,面向接口的服务治理能力</div>
+    </div>
   </div>
-  <div class="feature-item">
-    <h2><img src="./img/feature_loadbalances.png" alt=""/>柔性</h2>
-    <p>柔性</p>
+  <div class=feature-item>
+    <img src="./img/feature_loadbalances.png" alt="" />
+    <div class="feature-right">
+      <div class="feature-title">柔性</div>
+      <div class="feature-detail">提供基于标签匹配的全新路由规则,摆脱内置条件、脚本等路由策略,通过配置不同的路由规则,轻松实现灰度发布,同机房优先等功能</div>
+    </div>
   </div>
-  <div class="feature-item">
-    <h2><img src="./img/feature_loadbalances.png" alt=""/>全面拥抱云原生</h2>
-    <p>服务发现下沉,支持 Kubernetes Native Service;通过对接原生 xDS
数据通信接口,提供云原生 ServiceMesh 平滑迁移方案</p>
+  <div class=feature-item>
+    <img src="./img/feature_loadbalances.png" alt="" />
+    <div class="feature-right">
+      <div class="feature-title">全面拥抱云原生</div>
+      <div class="feature-detail">服务发现下沉,支持 Kubernetes Native Service;通过对接原生
xDS 数据通信接口,提供云原生 ServiceMesh 平滑迁移方案
+      </div>
+    </div>
   </div>
 </div>
-<div class="top-hr">
-  <div class="hr">
-  </div>
+<div class=top-hr>
+  <div class=hr> </div>
 </div>
-
-<div class="text-center">Dubbo 案例</div>
+<div class=text-center>Dubbo 案例</div>
 <div class="top-hr hr-logos">
-  <div class="logos">
-    <a href="https://www.alibaba.com" target="_blank">
-      <img src="./img/users_alibaba.png" alt="">
-    </a>
-    <a href="https://www.alibaba.com" target="_blank">
-      <img src="./img/users_alibaba.png" alt="">
-    </a>
-    <a href="https://www.alibaba.com" target="_blank">
-      <img src="./img/users_alibaba.png" alt="">
-    </a>
-    <a href="https://www.alibaba.com" target="_blank">
-      <img src="./img/users_alibaba.png" alt="">
-    </a>
-    <a href="https://www.alibaba.com" target="_blank">
-      <img src="./img/users_alibaba.png" alt="">
-    </a>
-    <a href="https://www.alibaba.com" target="_blank">
-      <img src="./img/users_alibaba.png" alt="">
-    </a>
-  </div>
-</div>
-<!-- 合作伙伴结束 -->
+  <div class=logos> <a href=https://www.alibaba.com target=_blank> <img src=./img/users_alibaba.png
alt> </a> <a
+          href=https://www.alibaba.com target=_blank> <img src=./img/users_alibaba.png
alt> </a> <a
+          href=https://www.alibaba.com target=_blank> <img src=./img/users_alibaba.png
alt> </a> <a
+          href=https://www.alibaba.com target=_blank> <img src=./img/users_alibaba.png
alt> </a> <a
+          href=https://www.alibaba.com target=_blank> <img src=./img/users_alibaba.png
alt> </a> <a
+          href=https://www.alibaba.com target=_blank> <img src=./img/users_alibaba.png
alt> </a> </div>
+</div> <!-- 合作伙伴结束 -->
 <div class="md-footer-meta md-typeset">
   <div class="md-footer-meta__inner md-grid">
     <div class="md-footer-copyright">
diff --git a/overrides/partials/tabs-item.html b/overrides/partials/tabs-item.html
index 6ec5c0b..2e87046 100755
--- a/overrides/partials/tabs-item.html
+++ b/overrides/partials/tabs-item.html
@@ -19,8 +19,9 @@
 {% elif nav_item.children and nav_item.children | length > 0 %}
   {% set title = title | default(nav_item.title) %}
   {% if nav_item.title == config.extra.docs_key %}
-    <li class="md-tabs__item">{{nav_item.title}}
-      <ul class="md-tabs__list">
+    <li class="md-tabs__item md-tabs_csr">
+      <a class="md-tabs__link md-tabs__link--active">{{nav_item.title}}</a>
+      <ul class="md-tabs__list md-sub-tabs_bn">
         {% for versions_nav_item in nav_item.children %}
           {% set versions_title = versions_title | default(versions_nav_item.title) %}
           <!-- Recurse, if the first item has nested items -->
@@ -41,19 +42,17 @@
     {% else %}
     <li class="md-tabs__item">
       {% if nav_item.active %}
-      <a
-              href="{{ (nav_item.children | first).url | url }}"
-              class="md-tabs__link md-tabs__link--active"
-      >
-        {% if title == config.extra.docs_key %} {{versions_title}} {% else %} {{ title }}
{% endif %}
-      </a>
+        {% if title == config.extra.docs_key %}
+          <a href="{{ (nav_item.children | first).url | url }}" class="md-tabs__link md-sub-tabs__link--active">{{versions_title}}</a>
+        {% else %}
+          <a href="{{ (nav_item.children | first).url | url }}" class="md-tabs__link md-tabs__link--active">{{
title }}</a>
+        {% endif %}
       {% else %}
-      <a
-              href="{{ (nav_item.children | first).url | url }}"
-              class="md-tabs__link"
-      >
-        {% if title == config.extra.docs_key %} {{versions_title}} {% else %} {{ title }}
{% endif %}
-      </a>
+        {% if title == config.extra.docs_key %}
+          <a href="{{ (nav_item.children | first).url | url }}" class="md-tabs__link">{{versions_title}}</a>
+        {% else %}
+          <a href="{{ (nav_item.children | first).url | url }}" class="md-sub-tabs_link">{{
title }}</a>
+        {% endif %}
       {% endif %}
     </li>
     {% endif %}
diff --git a/zh-cn/css/dropdown.css b/zh-cn/css/dropdown.css
index 0c13a27..f495cb8 100644
--- a/zh-cn/css/dropdown.css
+++ b/zh-cn/css/dropdown.css
@@ -1,48 +1,93 @@
-.list-menu{
-    display: flex;
-    background: #f7f7f7;
-    border-radius: 5px;
-    padding: 10px 0;
-    justify-content: space-around;
-    color: #205D67;
-    width: 80%;
+
+.md-tabs_csr {
+    cursor: pointer;
+    position: relative;
+    height: 4.5rem;
 }
 
-.list-menu li{
-    list-style: none;
+.md-sub-tabs_bn {
+    display: none;
+    position: absolute;
+    top: 1.8rem;
+    left: 1rem;
 }
 
-.list-menu li:hover > ul{
-    box-shadow: 0 0 10px #ccc;
+.md-tabs_csr:hover .md-sub-tabs_bn {
     display: block;
 }
 
-.list-menu li ul{
-    position: absolute;
-    display: none;
-    background: #fff;
-    border:1px #f7f7f7 solid;
-    border-radius: 5px;
-    width: 10%;
-    margin: 0;
-    padding: 0;
-    color:#205D67;
-    font-size: 0.9rem;
+.md-sub-tabs_link {
+    display: block;
+    margin-top: .5rem;
+    font-size: .7rem;
+    opacity: .7;
+    transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1), opacity 250ms;
 }
 
-.list-menu li ul a{
-    text-decoration: none;
-    color:#205D67;
+.md-sub-tabs_link:hover {
+    color: inherit;
+    opacity: 1;
 }
 
-.list-menu li ul a li{
-    line-height: 30px;
-    padding-left:10%;
-    box-sizing: border-box;
+.text-center {
+    text-align: center;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+    font-family: 'Lato', sans-serif;
+    font-size: 23px;
+    font-weight: 300;
+    padding-bottom: 10px;
+    margin-top: 15px;
+}
+
+.bottom-hr {
+    margin-top: 30px;
     width: 100%;
+    display: flex;
+    max-width: 61rem;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0 .2rem;
 }
 
-.list-menu li ul a li:hover{
-    background: #f7f7f7;
-    cursor: pointer;
+.feature-item {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+}
+
+.feature-item {
+    font-family: 'Lato', sans-serif;
+    font-weight: 300;
+    box-sizing: border-box;
+    padding: 15px;
+    word-break: break-all
+}
+
+.feature-right {
+    /* background-color: aqua; */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 10px;
+}
+
+.feature-title {
+    display: block;
+    font-size: 1.5em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+}
+
+.feature-detail {
+    color: #999;
+    font-size: 13px;
+}
+
+.mt35 {
+    margin-top: 35px;
 }
\ No newline at end of file
diff --git a/zh-cn/index.md b/zh-cn/index.md
index 11e203e..097d5cc 100755
--- a/zh-cn/index.md
+++ b/zh-cn/index.md
@@ -1,4 +1,4 @@
 ---
-template: home.html
+template: home_zh.html
 title: Apache Dubbo
 ---


Mime
View raw message