add scss support (#876)

Signed-off-by: Arhell <arhell333@gmail.com>
This commit is contained in:
Ihor Sychevskyi 2022-07-26 10:19:41 +03:00 committed by GitHub
parent 2630ea4570
commit 66e8b240c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 285 additions and 292 deletions

View File

@ -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'),
],

View File

@ -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"
]
}
}
}

View File

@ -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;
}

244
src/css/custom.scss Normal file
View File

@ -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;
}
}

View File

@ -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==