diff --git a/assets/scss/common.scss b/assets/scss/common.scss index 6a3231c55..84d69f513 100644 --- a/assets/scss/common.scss +++ b/assets/scss/common.scss @@ -334,3 +334,36 @@ section { .code-tabs .active { display: block; } + +// copy button +.copy-code-button { + display: none; + position: relative; + z-index: 2; + width: 0; + height: 0; + margin-left: auto; + margin-right: 25px; + transform: translateY(5px); + cursor: pointer; + + div { + position: absolute; + top: 0; + left: 0; + width: 20px; + height: 20px; + background-image: url('/images/docs/copy-code.svg'); + background-repeat: no-repeat; + background-size: cover; + } +} + +.copy-code-button:hover { + top: -2px; +} + +.highlight pre { + /* Avoid pushing up the copy buttons. */ + margin: 0; +} diff --git a/assets/scss/docs.scss b/assets/scss/docs.scss index 249751478..d43603eeb 100644 --- a/assets/scss/docs.scss +++ b/assets/scss/docs.scss @@ -118,4 +118,118 @@ } } } +} + +.section-3 { + .common-layout { + box-sizing: border-box; + position: relative; + padding-right: 373px; + border-radius: 8px; + overflow: hidden; + + @media only screen and (max-width: $mobile-max-width) { + padding: 0 20px; + } + + .left-part-div { + padding: 37px 67px 18px 40px; + background-image: linear-gradient(102deg, #4a499a 28%, #8552c3 119%); + + @media only screen and (max-width: $mobile-max-width) { + padding: 20px; + border-radius: 8px; + } + h2 { + font-size: 28px; + color: #ffffff; + } + + p { + margin-top: 18px; + font-size: 14px; + line-height: 1.43; + color: #ffffff; + } + + .common-flex-layout { + margin-top: 33px; + justify-content: space-around; + div { + position: relative; + + img { + width: 186px; + height: 114px; + border-radius: 11px; + object-fit: contain; + } + + p { + position: relative; + margin: 0 auto; + top: -10px; + width: 148px; + height: 34px; + font-size: 11px; + line-height: 34px; + text-align: center; + color: #ffffff; + border-radius: 17px; + box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #242e42, #242e42); + &:hover { + box-shadow: none; + } + } + } + } + } + + .right-part-div { + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 373px; + box-sizing: border-box; + padding: 124px 66px; + text-align: center; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + background-color: #ffffff; + background-image: url('/images/docs/bg-line.png'); + + @media only screen and (max-width: $mobile-max-width) { + position: relative; + width: 100%; + margin-top: 20px; + border-radius: 8px; + } + + h3 { + font-size: 20px; + color: #3d3e49; + } + + button { + width: 148px; + height: 34px; + margin-top: 22px; + border-radius: 17px; + border: none; + font-size: 11px; + font-weight: 600; + color: #ffffff; + cursor: pointer; + box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a); + + &:hover { + box-shadow: none; + } + } + } + } } \ No newline at end of file diff --git a/config/_default/config.toml b/config/_default/config.toml index c5006c6e7..967632881 100644 --- a/config/_default/config.toml +++ b/config/_default/config.toml @@ -12,6 +12,8 @@ logo = "images/logo.svg" githubUrl = "https://github.com/kubesphere/website" +githubBlobUrl = "https://github.com/kubesphere/website/blob/master/content" + githubEditUrl = "https://github.com/kubesphere/website/edit/master/content" mailchimpSubscribeUrl = "https://kubesphere.us10.list-manage.com/subscribe/post?u=c85ea2b944b08b951f607bdd4&id=83f673a2d9" diff --git a/content/en/docs/_index.md b/content/en/docs/_index.md index 8bea52f1d..95cc31987 100644 --- a/content/en/docs/_index.md +++ b/content/en/docs/_index.md @@ -9,4 +9,22 @@ section1: title: KubeSphere Documentation 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 + +section3: + title: Run KubeSphere and Kubernetes Stack from the Cloud Service + description: Cloud Providers are providing KubeSphere as a SaaS and offer cloud-hosted services for users, help you to create an highly available cluster within minutes via several clicks. + list: + - image: /images/docs/aws.jpg + content: AWS Quickstart + link: + - image: /images/docs/qingcloud.svg + content: QingCloud QKE + link: + - image: /images/docs/radore.jpg + content: Radore RCD + link: + + titleRight: Want to host KubeSphere on your cloud? + btnContent: Partner with us + btnLink: /partner/ --- \ No newline at end of file diff --git a/content/en/docs/quick-start/_index.md b/content/en/docs/quick-start/_index.md index ed0563e5b..b0900e2fa 100644 --- a/content/en/docs/quick-start/_index.md +++ b/content/en/docs/quick-start/_index.md @@ -15,6 +15,24 @@ icon: "/images/docs/docs.svg" In this chapter, we will demonstrate how to use KubeKey to provision a new Kubernetes and KubeSphere cluster based on different infrastructures. Kubekey can help you to quickly build a production-ready cluster architecture on a set of machines from zero to one. It also helps you to easily scale the cluster and install pluggable components on existing architecture. +``` +console.log('aaa') +``` + +```html +
+
+
+
+
+
+
+
+
+
+ +``` + ## Most Popular Pages Below you will find some of the most common and helpful pages from this chapter. We highly recommend you to review them at first. diff --git a/layouts/docs/list.html b/layouts/docs/list.html index 63444489e..1a91f0927 100644 --- a/layouts/docs/list.html +++ b/layouts/docs/list.html @@ -1,6 +1,6 @@ {{ define "main" }} -{{ with .Params.section1}} +{{ with .Params.section1 }}

{{ .title }}

@@ -14,5 +14,27 @@ {{ partial "section" . }}
- + +{{ with .Params.section3 }} +
+
+
+

{{ .title }}

+

{{ .description }}

+
+ {{ range .list }} +
+ +

{{ .content }}

+
+ {{ end }} +
+
+
+

{{ .titleRight }}

+ +
+
+
+{{ end }} {{ end }} \ No newline at end of file diff --git a/layouts/docs/single.html b/layouts/docs/single.html index 4346a4572..aaf7fb265 100644 --- a/layouts/docs/single.html +++ b/layouts/docs/single.html @@ -50,18 +50,20 @@
{{ i18n "Last updated" }}: - + + +
- + {{ i18n "edit" }}
- + {{ i18n "feedback" }} @@ -74,15 +76,15 @@