diff --git a/assets/scss/docs.scss b/assets/scss/docs.scss index 65d71dc4d..bdc884941 100644 --- a/assets/scss/docs.scss +++ b/assets/scss/docs.scss @@ -43,18 +43,127 @@ } } +.section-link { + transform: translateY(-40px); + + .common-layout { + display: flex; + box-sizing: border-box; + padding: 30px 40px; + border-radius: 10px; + color: #ffffff; + background-color: #36435c; + background-repeat: no-repeat; + background-position: left bottom; + background-image: url("/images/docs/26.svg"); + + @media only screen and (max-width: $mobile-max-width) { + display: block; + padding: 20px; + } + } + + .left { + flex: 1; + @media only screen and (max-width: $mobile-max-width) { + margin-bottom: 20px; + } + ul { + margin-top: 20px; + display: flex; + flex-wrap: wrap; + @media only screen and (max-width: $mobile-max-width) { + display: block; + } + li { + width: 50%; + @media only screen and (max-width: $mobile-max-width) { + width: 100%; + } + margin-bottom: 10px; + font-size: 14px; + line-height: 1.43; + color: #84f5be; + list-style: circle; + list-style-position: inside; + @include ellipsis; + + a { + color: #84f5be; + } + + &:last-child { + margin-bottom: 0; + } + } + } + } + + .right { + width: 333px; + @media only screen and (max-width: $mobile-max-width) { + width: 100%; + } + ul { + margin-top: 20px; + li { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; + padding: 8px 20px; + box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05); + background-color: #ffffff; + + &:last-child { + margin-bottom: 0; + } + + span { + flex: 1; + font-size: 14px; + color: #31383e; + line-height: 24px; + } + + a { + display: inline-block; + width: 40px; + height: 40px; + background-image: url("/images/docs/22.svg"); + + &:hover { + background-image: url("/images/docs/22-hover.svg"); + } + } + } + } + + } + + h2 { + font-size: 28px; + line-height: 34px; + } + + p { + margin-top: 12px; + font-size: 14px; + line-height: 1.43; + } +} + .section-2 { & > div { position: relative; & > ul { - transform: translateY(-60px); @media only screen and (max-width: $mobile-max-width) { justify-content: center; } & > li { width: 373px; height: 470px; - margin-top: 20px; + margin-bottom: 20px; border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05); background-color: #ffffff; @@ -130,6 +239,7 @@ } .section-3 { + margin-top: 60px; .common-layout { box-sizing: border-box; position: relative; diff --git a/content/en/docs/_index.md b/content/en/docs/_index.md index 1ec70b733..5f2ee3a49 100644 --- a/content/en/docs/_index.md +++ b/content/en/docs/_index.md @@ -10,6 +10,23 @@ section1: content: Learn how to build and manage cloud-native applications using KubeSphere Container Platform. Get documentation, example code, tutorials, and more. image: /images/docs/banner.png +sectionLink: + docs: + title: Popular Documentation + description: Learn Docker basics and the benefits of containerizing your applications. + list: + - /docs/installing-on-linux/public-cloud/install-kubesphere-on-azure-vms + - /docs/installing-on-linux/public-cloud/install-kubesphere-on-qingcloud-vms + + videos: + title: How do I? + description: Learn Docker basics and the benefits + list: + - link: /docs/installing-on-linux/public-cloud/install-kubesphere-on-azure-vms/ + text: Write a Dockerfile + - link: /docs/installing-on-linux/public-cloud/install-kubesphere-on-azure-vms/ + text: Write a Docker Compose file + section3: title: Run KubeSphere and Kubernetes Stack from the Cloud Service description: Cloud Providers are providing KubeSphere as a cloud-hosted service for users, helping you to create a highly available cluster within minutes via several clicks. These services will be available starting from September 2020. diff --git a/i18n/zh.yaml b/i18n/zh.yaml index 3585426e0..e0e906116 100644 --- a/i18n/zh.yaml +++ b/i18n/zh.yaml @@ -103,4 +103,4 @@ - id: PPT courseware translation: PPT 课件 - id: Self-test - translation: 考题自测 \ No newline at end of file + translation: 考题自测 diff --git a/layouts/docs/list.html b/layouts/docs/list.html index eda545126..5917fc71d 100644 --- a/layouts/docs/list.html +++ b/layouts/docs/list.html @@ -11,6 +11,42 @@ {{ end }} +{{ $Site := .Site }} +{{ with .Params.sectionLink }} +
+
+ {{ with .docs}} +
+

{{ .title }}

+

{{ .description }}

+
    + {{ range .list }} +
  • + {{ with $Site.GetPage . }} + {{ .LinkTitle }} + {{ end }} +
    • + {{ end }} +
+
+ {{ end }} + {{ with .videos}} +
+

{{ .title }}

+

{{ .description }}

+
    + {{ range .list }} +
  • + {{ .text }} + +
    • + {{ end }} +
+
+ {{ end }} +
+
+{{ end }}
diff --git a/static/images/docs/22-hover.svg b/static/images/docs/22-hover.svg new file mode 100644 index 000000000..64605d8b5 --- /dev/null +++ b/static/images/docs/22-hover.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/docs/22.svg b/static/images/docs/22.svg new file mode 100644 index 000000000..5e2bf5c52 --- /dev/null +++ b/static/images/docs/22.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/docs/26.svg b/static/images/docs/26.svg new file mode 100644 index 000000000..f83963f2c --- /dev/null +++ b/static/images/docs/26.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + +