diff --git a/docusaurus.config.js b/docusaurus.config.js index da3a20a9..58d73ed1 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -187,7 +187,7 @@ module.exports = { editUrl: 'https://github.com/kubevela/kubevela.io/tree/main/', }, theme: { - customCss: require.resolve('./src/css/custom.css'), + customCss: require.resolve('./src/css/custom.scss'), }, }, ], @@ -205,6 +205,7 @@ module.exports = { showLastUpdateTime: true, }, ], + 'docusaurus-plugin-sass', './src/plugins/faviconCustomPlugin', require.resolve('docusaurus-plugin-image-zoom'), ], diff --git a/package.json b/package.json index 65611817..2dedd3ed 100644 --- a/package.json +++ b/package.json @@ -24,12 +24,14 @@ "asciinema-player": "^2.6.1", "clsx": "^1.1.1", "docusaurus-plugin-image-zoom": "^0.1.1", + "docusaurus-plugin-sass": "^0.2.2", "mdx-mermaid": "^1.2.3", "mermaid": "^9.1.1", "nodejieba": "^2.5.2", "react": "^17.0.1", "react-dom": "^17.0.1", - "react-github-btn": "^1.2.0" + "react-github-btn": "^1.2.0", + "sass": "^1.54.0" }, "browserslist": { "production": [ @@ -43,4 +45,4 @@ "last 1 safari version" ] } -} \ No newline at end of file +} diff --git a/src/css/custom.css b/src/css/custom.css deleted file mode 100644 index fc26a779..00000000 --- a/src/css/custom.css +++ /dev/null @@ -1,286 +0,0 @@ -/* stylelint-disable docusaurus/copyright-header */ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ - -/* You can override the default Infima variables here. */ -:root { - --ifm-color-primary: #10a6fa; - --ifm-color-primary-dark: #0598ea; - --ifm-color-primary-darker: #0590dd; - --ifm-color-primary-darkest: #0476b6; - --ifm-color-primary-light: #2ab0fb; - --ifm-color-primary-lighter: #37b5fb; - --ifm-color-primary-lightest: #5ec3fc; - --ifm-code-font-size: 95%; - --ifm-font-size-base: 16px; - - --hero-border-color: rgba(0, 0, 0, 0.1); -} - -:root[data-theme='dark'] { - --hero-border-color: rgba(255, 255, 255, 0.1); -} - -.docusaurus-highlight-code-line { - background-color: rgb(72, 77, 91); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); -} - -.header-github-link:hover { - opacity: 0.6; -} - -.header-github-link:before { - content: ''; - width: 24px; - height: 24px; - display: flex; - background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") - no-repeat; -} - -[data-theme=dark] .header-github-link:before { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") -} - - -@media screen and (max-width: 768px) { - .hero { - padding-top: 2rem; - padding-bottom: 2rem; - } -} - -#banner { - position: relative; - min-height: 56px; - padding: 1rem; - background: var(--ifm-color-primary-lighter); - font-size: 1.125rem; - text-align: center; -} - -#banner a { - color: var(--ifm-background-surface-color); - text-decoration: underline; -} - -#banner .close { - position: absolute; - right: 0; - margin: 0 1rem; - padding: 0; -} - -@media screen and (max-width: 996px) { - #banner .close { - display: none; - } -} - -:root[data-theme='dark'] #banner { - background: var(--ifm-color-primary-darker); -} - - -.youtube-video-wrapper { - position: relative; - height: 0; - padding-bottom: 56.25%; - overflow: hidden; -} - -.youtube-video-wrapper iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.cncf-Logo { - background: center no-repeat url('/img/cncf-color.svg'); -} - -html[data-theme='dark'] .cncf-Logo { - background: center no-repeat url('/img/cncf-white.svg'); -} -.wechat .wechat-label { - color: var(--ifm-footer-link-color); - line-height: 2; - cursor: pointer; -} - -.wechat .wechat-img { - display: none; - position: absolute; - width: 100px; -} -.wechat:hover .wechat-img { - display: block; -} - -.menu__link { - font-size: 0.8rem; -} - -article header h1 { - font-size: 2.2rem !important; -} - -.markdown>h2 { - font-size: 1.5rem !important; -} - -.markdown>h3 { - font-size: 1.2rem !important; -} - -.hero { - border-bottom: 1px solid var(--hero-border-color); -} - -.heroLogoWrapper { - position: relative; - display: flex; - justify-content: center; - align-items: center; - margin: auto; - width: 256px; - height: 256px; - margin-bottom: 1.5rem; - border-radius: 48px; -} - -@media screen and (max-width: 768px) { - .heroLogoWrapper { - width: 192px; - height: 192px; - } -} - -.heroLogo { - width: 80%; - height: 80%; -} - -.installTextWrapper { - width: 100%; -} - -.feature { - margin-bottom: 4.5rem; -} - -.feature:last-child { - margin-bottom: 0; -} - -@media screen and (max-width: 768px) { - .feature { - margin-bottom: 1.5rem; - } -} - -.featureReverse { - flex-direction: row-reverse; -} - -.featureImage { - height: 256px; -} - -@media screen and (max-width: 768px) { - .featureImage { - height: 96px; - margin-bottom: 1.5rem; - } -} - -.features .row:nth-child(even) { - flex-direction: row-reverse; -} - -.featureDesc { - display: flex !important; - align-items: center; -} - -.demoImage { - width:100%; -} - -.whiteboard { - margin-top: 3rem; - background: #fff; - border-radius: 8px; -} - -@media screen and (max-width: 768px) { - .whiteboard { - width: 80%; - margin: 3rem auto 0; - } -} - -@media (min-width: 512px) and (max-width: 768px) { - .whiteboardCol { - --ifm-col-width: calc(6 / 12 * 100%) !important; - - flex: 0 0 var(--ifm-col-width) !important; - max-width: var(--ifm-col-width) !important; - } -} - -@media (min-width: 769px) and (max-width: 1024px) { - .whiteboardCol { - --ifm-col-width: calc(4 / 12 * 100%) !important; - - flex: 0 0 var(--ifm-col-width) !important; - max-width: var(--ifm-col-width) !important; - } -} - -.logoWrapper { - display: flex; - justify-content: center; - align-items: center; - height: 150px; -} - -.logoWrapper img { - width: 80%; -} - -@media screen and (max-width: 768px) { - .logoWrapper { - height: 100px; - } - - .logoWrapper img { - width: 50%; - } -} - -.cncf-Logo { - height: 90px; -} - -@media screen and (max-width: 768px) { - .cncf-Logo { - height: 64px; - } -} - -.heroButtons { - display: flex; - justify-content: center; - flex-wrap: wrap; - margin-top: 1rem; - margin-bottom: 1rem; -} \ No newline at end of file diff --git a/src/css/custom.scss b/src/css/custom.scss new file mode 100644 index 00000000..a599d5f2 --- /dev/null +++ b/src/css/custom.scss @@ -0,0 +1,244 @@ +/* stylelint-disable docusaurus/copyright-header */ +/** + * Any CSS included here will be global. The classic template + * bundles Infima by default. Infima is a CSS framework designed to + * work well for content-centric websites. + */ +/* You can override the default Infima variables here. */ +:root { + --ifm-color-primary: #10a6fa; + --ifm-color-primary-dark: #0598ea; + --ifm-color-primary-darker: #0590dd; + --ifm-color-primary-darkest: #0476b6; + --ifm-color-primary-light: #2ab0fb; + --ifm-color-primary-lighter: #37b5fb; + --ifm-color-primary-lightest: #5ec3fc; + --ifm-code-font-size: 95%; + --ifm-font-size-base: 16px; + --hero-border-color: rgba(0, 0, 0, 0.1); +} +:root[data-theme='dark'] { + --hero-border-color: rgba(255, 255, 255, 0.1); + #banner { + background: var(--ifm-color-primary-darker); + } +} +.docusaurus-highlight-code-line { + background-color: rgb(72, 77, 91); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); +} +.header-github-link { + &:hover { + opacity: 0.6; + } + &:before { + content: ''; + width: 24px; + height: 24px; + display: flex; + background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat; + } +} +[data-theme=dark] { + .header-github-link { + &:before { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E"); + } + } +} +#banner { + position: relative; + min-height: 56px; + padding: 1rem; + background: var(--ifm-color-primary-lighter); + font-size: 1.125rem; + text-align: center; + a { + color: var(--ifm-background-surface-color); + text-decoration: underline; + } + .close { + position: absolute; + right: 0; + margin: 0 1rem; + padding: 0; + } +} +.youtube-video-wrapper { + position: relative; + height: 0; + padding-bottom: 56.25%; + overflow: hidden; + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} +.cncf-Logo { + background: center no-repeat url('/img/cncf-color.svg'); + height: 90px; +} +html[data-theme='dark'] { + .cncf-Logo { + background: center no-repeat url('/img/cncf-white.svg'); + } +} +.wechat { + .wechat-label { + color: var(--ifm-footer-link-color); + line-height: 2; + cursor: pointer; + } + .wechat-img { + display: none; + position: absolute; + width: 100px; + } + &:hover { + .wechat-img { + display: block; + } + } +} +.menu__link { + font-size: 0.8rem; +} +article { + header { + h1 { + font-size: 2.2rem !important; + } + } +} +.markdown { + >h2 { + font-size: 1.5rem !important; + } + >h3 { + font-size: 1.2rem !important; + } +} +.hero { + border-bottom: 1px solid var(--hero-border-color); +} +.heroLogoWrapper { + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin: auto; + width: 256px; + height: 256px; + margin-bottom: 1.5rem; + border-radius: 48px; +} +.heroLogo { + width: 80%; + height: 80%; +} +.installTextWrapper { + width: 100%; +} +.feature { + margin-bottom: 4.5rem; + &:last-child { + margin-bottom: 0; + } +} +.featureReverse { + flex-direction: row-reverse; +} +.featureImage { + height: 256px; +} +.features { + .row { + &:nth-child(even) { + flex-direction: row-reverse; + } + } +} +.featureDesc { + display: flex !important; + align-items: center; +} +.demoImage { + width: 100%; +} +.whiteboard { + margin-top: 3rem; + background: #fff; + border-radius: 8px; +} +.logoWrapper { + display: flex; + justify-content: center; + align-items: center; + height: 150px; + img { + width: 80%; + } +} +.heroButtons { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-top: 1rem; + margin-bottom: 1rem; +} +@media screen and (max-width: 768px) { + .hero { + padding-top: 2rem; + padding-bottom: 2rem; + } + .heroLogoWrapper { + width: 192px; + height: 192px; + } + .feature { + margin-bottom: 1.5rem; + } + .featureImage { + height: 96px; + margin-bottom: 1.5rem; + } + .whiteboard { + width: 80%; + margin: 3rem auto 0; + } + .logoWrapper { + height: 100px; + img { + width: 50%; + } + } + .cncf-Logo { + height: 64px; + } +} +@media screen and (max-width: 996px) { + #banner { + .close { + display: none; + } + } +} +@media (min-width: 512px) and (max-width: 768px) { + .whiteboardCol { + --ifm-col-width: calc(6 / 12 * 100%) !important; + flex: 0 0 var(--ifm-col-width) !important; + max-width: var(--ifm-col-width) !important; + } +} +@media (min-width: 769px) and (max-width: 1024px) { + .whiteboardCol { + --ifm-col-width: calc(4 / 12 * 100%) !important; + flex: 0 0 var(--ifm-col-width) !important; + max-width: var(--ifm-col-width) !important; + } +} diff --git a/yarn.lock b/yarn.lock index cee4e7f0..59a64e1f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4076,7 +4076,7 @@ cheerio@^1.0.0-rc.12: parse5 "^7.0.0" parse5-htmlparser2-tree-adapter "^7.0.0" -chokidar@^3.4.2, chokidar@^3.5.3: +"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.2, chokidar@^3.5.3: version "3.5.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== @@ -5244,6 +5244,13 @@ docusaurus-plugin-image-zoom@^0.1.1: dependencies: medium-zoom "^1.0.6" +docusaurus-plugin-sass@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.2.tgz#9b7f8c6fbe833677064ec05b09b98d90b50be324" + integrity sha512-ZZBpj3PrhGpYE2kAnkZB9NRwy/CDi4rGun1oec6PYR8YvGzqxYGtXvLgHi6FFbu8/N483klk8udqyYMh6Ted+A== + dependencies: + sass-loader "^10.1.1" + dom-converter@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -6368,6 +6375,11 @@ immer@^9.0.7: resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.15.tgz#0b9169e5b1d22137aba7d43f8a81a495dd1b62dc" integrity sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ== +immutable@^4.0.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef" + integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ== + import-fresh@^3.1.0, import-fresh@^3.2.1, import-fresh@^3.3.0: version "3.3.0" resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz" @@ -6796,7 +6808,7 @@ kleur@^3.0.3: resolved "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz" integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w== -klona@^2.0.5: +klona@^2.0.4, klona@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc" integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ== @@ -8588,6 +8600,26 @@ safe-buffer@5.2.1, safe-buffer@~5.2.0: resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== +sass-loader@^10.1.1: + version "10.3.1" + resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.3.1.tgz#a45f0d1dd7ea90de7eb099239a18c83dea6e6341" + integrity sha512-y2aBdtYkbqorVavkC3fcJIUDGIegzDWPn3/LAFhsf3G+MzPKTJx37sROf5pXtUeggSVbNbmfj8TgRaSLMelXRA== + dependencies: + klona "^2.0.4" + loader-utils "^2.0.0" + neo-async "^2.6.2" + schema-utils "^3.0.0" + semver "^7.3.2" + +sass@^1.54.0: + version "1.54.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.54.0.tgz#24873673265e2a4fe3d3a997f714971db2fba1f4" + integrity sha512-C4zp79GCXZfK0yoHZg+GxF818/aclhp9F48XBu/+bm9vXEVAYov9iU3FBVRMq3Hx3OA4jfKL+p2K9180mEh0xQ== + dependencies: + chokidar ">=3.0.0 <4.0.0" + immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" + sax@^1.2.4: version "1.2.4" resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz" @@ -8886,7 +8918,7 @@ sort-css-media-queries@2.0.4: resolved "https://registry.yarnpkg.com/sort-css-media-queries/-/sort-css-media-queries-2.0.4.tgz#b2badfa519cb4a938acbc6d3aaa913d4949dc908" integrity sha512-PAIsEK/XupCQwitjv7XxoMvYhT7EAfyzI3hsy/MyDgTvc+Ft55ctdkctJLOy6cQejaIC+zjpUL4djFVm2ivOOw== -source-map-js@^1.0.2: +"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==