You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2022/08/10 01:12:34 UTC
[apisix-website] branch master updated: refactor: reduce styles (#1279)
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new 1c36bf4a2e8 refactor: reduce styles (#1279)
1c36bf4a2e8 is described below
commit 1c36bf4a2e8c232c774c26659ee9aeebf2c4af4e
Author: Young <is...@outlook.com>
AuthorDate: Wed Aug 10 09:12:28 2022 +0800
refactor: reduce styles (#1279)
---
blog/en/docusaurus.config.js | 2 +-
blog/src/css/customTheme.css | 2031 --------------------
blog/src/css/customTheme.scss | 480 +++++
blog/src/css/rc-image.scss | 353 ++++
blog/zh/docusaurus.config.js | 2 +-
doc/docusaurus.config.js | 2 +-
doc/src/css/customTheme.css | 2026 -------------------
doc/src/css/customTheme.scss | 478 +++++
website/docusaurus.config.js | 2 +-
website/src/components/HeroCanvas.tsx | 21 +-
website/src/components/sections/Architecture.tsx | 14 +-
website/src/components/sections/Benefits.tsx | 415 ++--
website/src/components/sections/Comparison.tsx | 2 +
website/src/components/sections/Endcta.tsx | 32 +-
website/src/components/sections/Features.tsx | 54 +-
website/src/components/sections/HeroSection.tsx | 19 +-
.../src/components/sections/HomeEventsSection.tsx | 62 +-
.../src/components/sections/OpensourcePromo.tsx | 49 +-
website/src/css/customTheme.css | 2026 -------------------
website/src/css/customTheme.scss | 480 +++++
website/src/css/help.scss | 159 ++
website/src/css/landing-sections/architecture.scss | 118 ++
website/src/css/landing-sections/benefits.scss | 39 +
website/src/css/landing-sections/comparison.scss | 56 +
.../css/{ => landing-sections}/endcta.module.scss | 2 +-
.../{ => landing-sections}/features.module.scss | 2 +-
website/src/css/landing-sections/hero.scss | 160 ++
.../{ => landing-sections}/home-events.module.scss | 26 +-
.../{ => landing-sections}/os-promo.module.scss | 3 +-
website/src/css/plugins.scss | 33 +
website/src/css/rc-image.scss | 353 ++++
website/src/css/showcase.scss | 119 ++
website/src/pages/help.tsx | 1 +
website/src/pages/plugins.tsx | 1 +
.../src/pages/{showcase/index.tsx => showcase.tsx} | 2 +-
website/src/pages/showcase/styles.scss | 50 -
36 files changed, 3228 insertions(+), 6446 deletions(-)
diff --git a/blog/en/docusaurus.config.js b/blog/en/docusaurus.config.js
index a31c0aed2f5..a48536acc10 100644
--- a/blog/en/docusaurus.config.js
+++ b/blog/en/docusaurus.config.js
@@ -35,7 +35,7 @@ module.exports = {
postsPerPage: 9,
},
theme: {
- customCss: require.resolve('./src/css/customTheme.css'),
+ customCss: require.resolve('./src/css/customTheme.scss'),
},
sitemap: {
changefreq: 'daily',
diff --git a/blog/src/css/customTheme.css b/blog/src/css/customTheme.css
deleted file mode 100644
index 7d9335d8dc4..00000000000
--- a/blog/src/css/customTheme.css
+++ /dev/null
@@ -1,2031 +0,0 @@
-:root {
- --ifm-color-primary-lightest: rgb(228 222 222);
- --ifm-color-primary-lighter: #d0312d;
- --ifm-color-primary-light: #f8f8fa;
- --ifm-color-primary: #e8433e;
- --ifm-color-dark: #000;
- --ifm-color-primary-dark: #a5a0a0;
- --ifm-color-primary-darker: #9a2521;
- /* stylelint-disable-next-line custom-property-pattern */
- --ifm-color-shadow--lw: #7f1e1b;
- --color-title: #101827;
- --color-github-button: #101827;
- --color-github-button-hover: #000;
- --color-primary: #e8433e;
- --color-subtitle: #000;
- --color-secondary: #4b5563;
- --color-secondary-bg: #f3f4f6;
- --color-secondary-text: #444952;
- --color-border: #eee;
- --color-downloads-subtitle: #374051;
- --color-downloads-leftsidelinks: #4b5563;
- --color-downloads-leftsidelink-hover: #111827;
- --color-downloads-rightside-versioninfo: #6b7280;
- --color-downloads-rightside-versioninfo-span: #374151;
- --color-team-repocard: #374151;
- --color-team-repocard-hover: #111827;
- --color-docs-subtitle: #374151;
- --color-docs-versioninfo: #4b5563;
- --color-help-subtitle: #6b7280;
- --color-downloads-dropdown: #fff;
- --color-downloads-dropdown-items: #f3f4f6;
-}
-
-html[data-theme="dark"] {
- --color-secondary-bg: #121212;
- --ifm-color-dark: #b0b0b0;
- --color-title: #f0f0f0;
- --color-subtitle: #f0f0f0;
- --color-github-button: #121212;
- --color-secondary-text: #b0b0b0;
- --color-border: #b0b0b0;
- --color-downloads-subtitle: #f0f0f0;
- --color-downloads-leftsidelinks: #909397;
- --color-downloads-leftsidelink-hover: #f0f0f0;
- --color-downloads-rightside-versioninfo: #f0f0f0;
- --color-downloads-rightside-versioninfo-span: #909397;
- --color-team-repocard: #f0f0f0;
- --color-team-repocard-hover: #909397;
- --color-docs-subtitle: #f0f0f0;
- --color-docs-versioninfo: #b0b0b0;
- --color-help-subtitle: #f0f0f0;
- --color-downloads-dropdown: #18191a;
- --color-downloads-dropdown-items: #4c4e50;
-}
-
-@font-face {
- font-family: MaisonNeue-Medium;
- src:
- local("MaisonNeue-Medium"),
- url("https://static.apiseven.com/202202/MaisonNeue-Medium.otf")
- format("opentype");
- font-display: optional;
-}
-
-@font-face {
- font-family: MaisonNeue-Bold;
- src:
- local("MaisonNeue-Bold"),
- url("https://static.apiseven.com/202202/MaisonNeue-Bold.otf")
- format("opentype");
- font-display: optional;
-}
-
-@font-face {
- font-family: MaisonNeue-Light;
- src:
- local("MaisonNeue-Light"),
- url("https://static.apiseven.com/202202/MaisonNeue-Light.otf")
- format("opentype");
- font-display: optional;
-}
-
-@font-face {
- font-family: MaisonNeue-Demi;
- src:
- local("MaisonNeue-Demi"),
- url("https://static.apiseven.com/202202/MaisonNeue-Demi.otf")
- format("opentype");
- font-display: optional;
-}
-
-@font-face {
- font-family: MaisonNeue-ExtraBold;
- src:
- local("MaisonNeue-ExtraBold"),
- url("https://static.apiseven.com/202202/MaisonNeue-ExtraBold.otf")
- format("opentype");
- font-display: optional;
-}
-
-::-webkit-scrollbar {
- width: 5px;
-}
-
-::-webkit-scrollbar-track {
- background: #f1f1f1;
-}
-
-::-webkit-scrollbar-thumb {
- background: #888;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: #555;
-}
-
-body,
-h1,
-h2,
-h3 {
- font-family: MaisonNeue-Medium, apple-system, system-ui, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizelegibility;
- text-size-adjust: 100%;
-}
-
-div.inner {
- color: var(--ifm-color-primary);
-}
-
-.image {
- padding: 75px 10px 75px 75px;
-}
-
-.more-users {
- padding-top: 75px;
-}
-
-.post-header {
- padding-top: 50px;
-}
-
-.header {
- padding-top: 50px;
-}
-
-.color-primary {
- color: var(--ifm-color-primary);
-}
-
-header h2 {
- color: var(--color-primary);
-}
-
-@media only screen and (max-width: 414px) {
- .hide-on-mobile {
- display: none;
- }
-}
-
-/* navbar */
-.navbar__link:hover,
-.navbar__link--active {
- color: var(--color-primary);
-}
-
-.navbar {
- box-shadow: none;
- border-bottom: 1px solid #e8e8ed;
-}
-
-.navbar__title {
- font-size: 18px;
- height: 30px;
-}
-
-.showcase {
- padding-left: 0;
- padding-right: 0;
-}
-
-.showcase .container {
- padding-left: 0;
- padding-right: 0;
- margin-left: 0;
- margin-right: 0;
- max-width: unset;
-}
-
-.showcase .user-logos {
- margin-top: 48px;
-}
-
-.showcase .logo-row {
- display: flex;
- -webkit-box-align: center;
- align-items: center;
- height: 5rem;
- overflow: hidden;
- position: relative;
- width: 100%;
-}
-
-.showcase .user-logos-container {
- display: inline-block;
- white-space: nowrap;
- overflow: hidden;
- position: absolute;
-}
-
-.showcase .user-logos-container section {
- white-space: nowrap;
- overflow: hidden;
- display: flex;
- align-items: center;
-}
-
-.showcase .user-logos-container section span {
- animation: 36s linear 0s infinite reverse none running logo-animation;
- white-space: nowrap;
- overflow: hidden;
- display: flex;
- align-items: center;
-}
-
-.showcase .user-logos:hover span {
- animation-play-state: paused !important;
-}
-
-.showcase .user-logo {
- max-width: 128px;
- max-height: 50px;
- margin: 0 16px;
-}
-
-@keyframes logo-animation {
- from {
- transform: translateX(-100%);
- }
-
- to {
- transform: translateX(0%);
- }
-}
-
-/* button */
-.button {
- margin: 0 10px;
- padding: 12px 24px;
- font-size: 18px;
- font-weight: 600;
- border-radius: 10px;
- border: none;
- background: #fee2e2;
- color: #ef4444;
- transition: all 0.3s;
-}
-
-.button:hover {
- background: #fecaca;
- color: #ef4444;
-}
-
-.button.github {
- background: var(--color-github-button);
- color: white;
- display: inline-flex;
- align-items: center;
- margin-bottom: 15px;
-}
-
-.button.github .github-logo {
- height: 24px;
- margin: 0 12px 1px 0;
-}
-
-.button.github:hover {
- background: var(--color-github-button-hover);
-}
-
-.button-wrapper {
- margin: 0 -10px;
-}
-
-.button.secondary {
- background: #f3f4f6;
- color: #1f2937;
- border: 1px solid #d1d5db;
- box-sizing: border-box;
- margin-bottom: 15px;
-}
-
-.button.secondary:hover {
- background: #e5e7eb;
-}
-
-@media only screen and (max-width: 414px) {
- .button {
- margin: 0;
- }
-
- .button.secondary,
- .button.github {
- width: 100%;
- }
-
- .button-wrapper {
- margin: 0;
- }
-}
-
-a {
- color: var(--ifm-color-dark);
- cursor: pointer;
-}
-
-a:hover {
- color: var(--color-primary);
- text-decoration: none;
-}
-
-.markdown a {
- color: var(--color-primary);
-}
-
-.arrow-btn {
- stroke-dasharray: 1000;
- stroke-dashoffset: 1002;
-}
-
-/* Blogs section */
-.blogPostTitle_node_modules-\@docusaurus-theme-classic-lib-next-theme-BlogPostItem-styles-module {
- font-size: 2rem !important;
-}
-
-.sidebar_node_modules-\@docusaurus-theme-classic-lib-next-theme-BlogSidebar-styles-module {
- margin-left: -3px;
- text-align: left;
- margin-right: 10px;
- padding-right: 20px;
-}
-
-/* Hero section */
-@keyframes fade-in-up {
- from {
- opacity: 0;
- transform: translate3d(0, 50%, 0);
- }
-
- to {
- opacity: 1;
- transform: translate3d(0, 0, 0);
- }
-}
-
-.hero-title,
-.hero-subtitle,
-.hero-ctas {
- animation-name: fade-in-up;
- animation-fill-mode: both;
- animation-delay: 0s;
- animation-duration: 1s;
-}
-
-.hero-subtitle {
- z-index: 100;
- font-size: 1.1rem;
- font-family: MaisonNeue-Light, sans-serif;
- position: relative;
- color: #615d5d;
- line-height: 30px;
- letter-spacing: 0.2px;
- margin: 25px 0;
- padding-right: 20px;
- animation-delay: 0.25s;
-}
-
-.hero-ctas {
- display: flex;
- align-items: center;
- animation-delay: 0.5;
-}
-
-.hero-sec-wrap {
- display: flex;
- background: #f4f4f4ad;
- height: 100vh;
-}
-
-.homeCanvas-overlay {
- position: absolute;
- width: 50vw;
- height: 100vh;
- background: #fff;
- top: -1px;
- right: 0;
-}
-
-.homeCanvas {
- width: 50vw;
- height: 100vh;
-}
-
-.hero-text {
- height: 100%;
- display: flex;
- flex-wrap: wrap;
- align-content: center;
- width: 50%;
- padding: 0 0 0 6vw;
-}
-
-.hero-title {
- font-family: MaisonNeue-Bold, sans-serif;
- color: #121212;
- width: 42vw;
- font-size: 4.2rem;
- letter-spacing: 0.2px;
- margin: 0;
-}
-
-.btn {
- background: #030c16;
- border-style: solid;
- border-width: 1px;
- border: none;
- color: white;
- padding: 5px 20px;
- border-radius: 20px;
- font-size: 1rem;
- text-decoration: none;
- margin: 0 10px 0 0;
- transition: all 0.3s;
-}
-
-.btn:hover {
- background: #9b9b9b;
- color: white;
- text-decoration: none;
-}
-
-.btn-docs {
- display: flex;
- flex-direction: row;
- align-items: center;
-}
-
-.btn-docs:hover {
- text-decoration: none;
-}
-
-.btn-docs .goto {
- color: #000;
-}
-
-.btn-docs:hover .goto,
-.btn-docs:active .goto {
- opacity: 0.8;
-}
-
-.btn-docs .arrow {
- width: 30px;
- height: 30px;
- position: relative;
-}
-
-.btn-docs .arrow svg {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-
-.btn-docs .arrow polygon,
-.btn-docs .arrow rect {
- transition: all 250ms;
-}
-
-.btn-docs .arrow rect {
- opacity: 0;
-}
-
-.btn-docs:hover .arrow polygon {
- transform: translateX(100px);
-}
-
-.btn-docs:hover .arrow rect {
- transform: translateX(240px);
- opacity: 1;
-}
-
-/* Architecture section */
-.hldesign {
- height: 100%;
- display: flex;
- justify-content: center;
-}
-
-.hldesign-graphic {
- width: 60%;
- height: auto;
-}
-
-.Architecture_svg__architecture {
- font-family: MaisonNeue-Medium, sans-serif;
-}
-
-.arch {
- background: linear-gradient(180deg, #e2ecff 15%, #fff 90%);
- position: relative;
- z-index: 1;
- padding: 50px 0;
- overflow: hidden;
-}
-
-.arch-card-caption {
- height: 100%;
- display: flex;
- justify-content: center;
- color: #615d5d;
-}
-
-.arch-card-caption > p {
- width: 90%;
- letter-spacing: 0.2px;
- font-family: MaisonNeue-Light, sans-serif;
- font-weight: 700;
- text-align: center;
- position: relative;
- bottom: -15px;
- font-size: 1rem;
-}
-
-.arch-card-border {
- z-index: -10;
- position: absolute;
- width: 66%;
- height: 100%;
- border-style: solid;
- top: 15px;
- left: 17%;
- border-color: white;
- background: white;
- filter: drop-shadow(0 4px 10px rgb(0 0 0 / 25%));
-}
-
-.arch-head,
-.compare-head,
-.testimonials-head,
-.docs-promo-head {
- font-size: 2.4rem;
- position: relative;
- left: 16.8%;
- width: 83.2%;
-}
-
-.arch-subtitle,
-.compare-subtitle,
-.testimonials-subtitle,
-.docs-promo-subtitle {
- font-size: 1.13rem;
- position: relative;
- left: 16.8%;
- width: 70%;
- color: #615d5d;
- letter-spacing: 0.2px;
- font-family: MaisonNeue-Light, sans-serif;
- font-weight: 700;
-}
-
-.add-left-margin {
- position: relative;
- left: 16.8%;
-}
-
-/* Features section */
-.feat-head {
- font-size: 2.4rem;
- width: 75%;
-}
-
-.feat-container-d {
- width: 100%;
- height: 300vh;
- display: flex;
-}
-
-.feat-container-m {
- display: none;
-}
-
-.feat-head-desc {
- font-size: 1.4rem;
- color: #363130;
- opacity: 0.5;
- position: relative;
- left: 17%;
- margin: 0;
- line-height: 1.8;
- width: fit-content;
-}
-
-.feat-desc {
- margin: 10px 0;
- font-size: 1.13rem;
- color: #615d5d;
- font-weight: 700;
- font-family: MaisonNeue-Light, sans-serif;
- width: 65%;
- left: 17%;
-}
-
-.add-left-margin-feat {
- position: absolute;
- left: 34%;
-}
-
-.i-text {
- font-family: MaisonNeue-Demi, sans-serif;
- font-size: 2rem;
- padding: 0 0 200px;
-}
-
-.text-div {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.i-text-desc {
- font-size: 1.13rem;
- color: #615d5d;
- font-weight: 700;
- font-family: MaisonNeue-Light, sans-serif;
-}
-
-.i-image {
- opacity: 1;
- width: auto;
- height: 90%;
- border-radius: 10px;
- max-width: 200%;
- max-height: 100%;
- filter: drop-shadow(0 4px 10px rgb(0 0 0 / 25%));
-}
-
-.n-image {
- opacity: 0;
- width: auto;
- height: 90%;
- border-radius: 10px;
- max-height: 100%;
- max-width: 200%;
- filter: drop-shadow(0 4px 10px rgb(0 0 0 / 25%));
-}
-
-.i-image-col {
- opacity: 1;
- width: 100%;
- height: auto;
- max-height: 100%;
- max-width: 100%;
- margin: 0 0 20px;
- filter: drop-shadow(0 4px 10px rgb(0 0 0 / 25%));
-}
-
-.imagePosition {
- position: absolute;
- bottom: 10px;
- left: 30px;
- max-width: none;
-}
-
-.i-text-col {
- font-family: MaisonNeue-Demi, sans-serif;
- font-size: 2rem;
- top: 0;
-}
-
-.i-text-desc-col {
- font-size: 0.95rem;
- color: #615d5d;
- font-weight: 700;
- font-family: MaisonNeue-Light, sans-serif;
- width: 80%;
-}
-
-.hiddenDiv-col {
- opacity: 0;
-}
-
-.dashboard-playground-link {
- bottom: 14%;
- color: hsl(0deg 0% 80%);
-}
-
-.dashboard-playground-link:hover {
- color: hsl(0deg 0% 80%);
-}
-
-@media (min-width: 1600px) and (max-width: 2080px) {
- .dashboard-playground-link {
- bottom: 18%;
- }
-}
-
-.dashboard-playground {
- background-color: hsl(0deg 100% 0%);
- font-family: MaisonNeue-Bold, sans-serif;
-
- --height: 130px;
- --width: calc(var(--height) * 2.048);
- --radius: calc(var(--height) * 0.168);
-
- height: var(--height);
- width: var(--width);
- border-radius: var(--radius);
- padding: calc(var(--radius) - 6px);
- display: flex;
- flex-direction: column;
- position: relative;
- left: calc(var(--width) * -0.05);
- overflow: hidden;
- transform: scale3d(0.95, 0.95, 1);
- transition: all 200ms cubic-bezier(0.65, 0.05, 0.36, 1);
-}
-
-.dashboard-playground::before {
- content: "";
- width: calc(100% - 6px);
- height: calc(100% - 6px);
- border-radius: inherit;
- position: absolute;
- top: 3px;
- left: 3px;
- backdrop-filter: blur(2px);
- opacity: 0;
- transition: opacity 300ms ease-in-out;
-}
-
-.dashboard-playground::after {
- content: "APISIX";
- position: absolute;
- top: 5px;
- left: -35%;
- font-size: 8.5rem;
- font-weight: bolder;
- line-height: 1;
- color: #fff;
- opacity: 0.06;
-}
-
-.dashboard-playground:hover {
- transform: scale3d(1, 1, 1);
- box-shadow:
- 0 0 0 1px hsl(213deg 26% 28% / 2%),
- 0 3px 2px hsl(0deg 0% 0% / 14%),
- 0 7px 5px hsl(0deg 0% 0% / 12%),
- 0 13px 10px hsl(0deg 0% 0% / 5%),
- 0 22px 17px hsl(0deg 0% 0% / 8%);
-}
-
-.dashboard-playground:active {
- transform: scale3d(0.95, 0.95, 1);
-}
-
-.dashboard-title {
- font-size: 1.35rem;
- font-family: MaisonNeue-ExtraBold, sans-serif;
- white-space: nowrap;
- flex-grow: 1;
- background-image:
- linear-gradient(
- 135deg,
- hsl(0deg 73% 50%),
- hsl(227deg 90% 65%)
- );
- background-clip: text;
- /* stylelint-disable-next-line property-no-vendor-prefix */
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- width: fit-content;
- position: relative;
-}
-
-.dashboard-playground:hover .dashboard-title {
- animation: pulse 3s linear infinite;
-}
-
-@keyframes pulse {
- from {
- filter: hue-rotate(0);
- }
-
- to {
- filter: hue-rotate(360deg);
- }
-}
-
-.dashboard-account {
- font-variant: small-caps;
- line-height: normal;
- letter-spacing: 1px;
- position: relative;
- opacity: 0.8;
-}
-
-.dashboard-account::after {
- content: "↑";
- font-family: MaisonNeue-Light, sans-serif;
- font-size: 2.5rem;
- line-height: 2rem;
- position: absolute;
- top: 2px;
- right: 8px;
- opacity: 0;
- color: hsl(0deg 0% 70%);
- transform: rotate(90deg);
- transition: opacity 300ms ease-in-out;
-}
-
-.dashboard-playground:hover .dashboard-account {
- opacity: 0.9;
-}
-
-.dashboard-playground:hover .dashboard-account::after {
- opacity: 0.6;
- animation: bounce 1.8s ease-in-out infinite;
-}
-
-@keyframes bounce {
- from,
- 20%,
- 53%,
- to {
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- transform: rotate(90deg) translate3d(0, 0, 0);
- }
-
- 40%,
- 43% {
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
- transform: rotate(90deg) translate3d(0, 30px, 0) scaleY(1.1);
- }
-
- 70% {
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
- transform: rotate(90deg) translate3d(0, 15px, 0) scaleY(1.05);
- }
-
- 80% {
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- transform: rotate(90deg) translate3d(0, 0, 0) scaleY(0.95);
- }
-
- 90% {
- transform: rotate(90deg) translate3d(0, 4px, 0) scaleY(1.02);
- }
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.dashboard-account span {
- font-family: MaisonNeue-Medium, sans-serif;
- font-variant: normal;
- letter-spacing: normal;
- font-size: 0.9rem;
-}
-
-.btn-try-demo {
- text-align: center;
- display: block;
- width: 100%;
- border-radius: 6px;
- background-color: #ebedf0;
- color: #615d5d;
- transition: all 300ms;
-}
-
-.btn-try-demo:hover {
- color: currentcolor;
- background-color: rgb(0 0 0 / 30%);
-}
-
-/* benefits section */
-.row-benefit {
- margin: 100px 5px;
- display: flex;
- justify-content: center;
- align-items: center;
- height: fit-content;
-}
-
-.benefit {
- background: #fff8f6;
- padding: 50px 0;
-}
-
-.benefit-infograph {
- width: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-/* Comparison table section */
-.compare {
- padding: 50px 0;
-}
-
-.table tbody td:nth-child(even) {
- background: rgb(14 30 37 / 2%);
-}
-
-.table tbody tr:nth-child(odd) {
- background: rgb(14 30 37 / 2%);
-}
-
-.table thead {
- font-size: 1.13rem;
-}
-
-.table {
- background: #fff;
- border-radius: 8px;
- box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 2px 4px 0 rgb(14 30 37 / 12%);
- color: rgb(14 30 37 / 87%);
- font-size: 1.13rem;
- margin: 1em auto;
- border-collapse: collapse;
- max-width: 100%;
- overflow-x: auto;
- table-layout: fixed;
- width: 66.4%;
- font-family: MaisonNeue-Light, sans-serif;
- display: table;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.table td,
-.table th {
- font-weight: 700;
- min-width: 11.089em;
- padding: 0.85rem 1rem;
- text-align: center;
-}
-
-.table-head {
- font-weight: 900;
- font-family: MaisonNeue-Demi, sans-serif;
- font-size: 1.25rem;
-}
-
-.table tbody th {
- font-weight: 700;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.table td:first-child,
-.table th:first-child {
- text-align: left;
-}
-
-/* opensource and docs promotion */
-.docs-promo {
- display: flex;
- padding: 100px 0;
- background: #fff8f6;
- justify-content: center;
-}
-
-.docs-promo-text {
- display: flex;
- justify-content: center;
- flex-flow: column;
-}
-
-.docs-promo-video {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 50%;
-}
-
-.docs-promo-video > iframe {
- width: 500px;
- height: 288px;
-}
-
-.docs-promo-video .vjs-has-started .vjs-big-play-button {
- display: none !important;
-}
-
-.oss-promo {
- display: flex;
- padding: 80px 0;
- justify-content: center;
- background: #121010;
- color: white;
-}
-
-.oss-promo-inwrapper {
- display: flex;
- flex-direction: column;
- text-align: left;
-}
-
-.oss-promo-head {
- font-size: 2.4rem;
-}
-
-.oss-promo-subtitle {
- font-size: 1.13rem;
- color: #615d5d;
- letter-spacing: 0.2px;
- font-family: MaisonNeue-Light, sans-serif;
- font-weight: 700;
- text-align: center;
-}
-
-.oss-promo-cta {
- margin: 0 auto;
- background: #080808;
- display: flex;
- width: fit-content;
- font-size: 0.95rem;
- border-style: solid;
- border-radius: 32px;
- border-width: 1.75px;
- padding: 5px 12px;
- transition: background 0.5s;
-}
-
-.oss-promo a {
- color: white;
-}
-
-.oss-promo-cta:hover {
- background: hsl(0deg 100% 100% / 80%);
- color: #080808;
-}
-
-.oss-promo-cta:hover > a {
- color: #080808;
-}
-
-/* Events and newsletter */
-.event-card-container {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
-}
-
-.event-card {
- border-style: solid;
- border-color: #fff;
- box-shadow: 0 4px 23px rgb(0 0 0 / 10%);
- font-size: 0.95rem;
- font-family: MaisonNeue-Light, sans-serif;
- font-weight: 700;
- padding: 20px;
- width: 230px;
- height: 200px;
- margin: 0 20px;
- border-radius: 10px;
- position: relative;
-}
-
-.event-card-title {
- position: absolute;
- top: 25px;
-}
-
-.event-card-time {
- position: absolute;
- top: 55%;
- color: #6a6a6a;
-}
-
-.event-card-read {
- position: absolute;
- bottom: 25px;
-}
-
-.newsletter {
- display: flex;
- font-weight: 700;
- font-family: MaisonNeue-Light, sans-serif;
- font-size: 0.95rem;
- color: #615d5d;
- letter-spacing: 0.2px;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- margin: 25px 0;
-}
-
-.news-button {
- border: none;
- padding: 5px 30px;
- border-style: solid;
- border-radius: 20px;
- background: #030c16;
- color: white;
- margin: 0;
- text-decoration: none;
- transition: all 0.3s;
-}
-
-.news-button:hover {
- background: #9b9b9b;
- color: white;
- text-decoration: none;
-}
-
-.endcta-text {
- text-align: center;
- font-size: 3.5rem;
- font-family: MaisonNeue-ExtraBold, sans-serif;
-}
-
-.endcta-btns {
- display: flex;
- justify-content: center;
- padding-bottom: 2rem;
-}
-
-.rocket {
- width: 6vw;
- height: auto;
- transform: rotate(45deg);
-}
-
-/* footer */
-.footer__title {
- font-family: MaisonNeue-Medium, sans-serif !important;
-}
-
-.footer__links .footer__title {
- font-weight: 700;
- font-size: 1.1rem;
-}
-
-.footer__links .footer__item a {
- opacity: 0.94;
-}
-
-.footer__links a:hover {
- opacity: 1;
- text-decoration: none;
-}
-
-.footer__bottom {
- margin-top: 36px;
-}
-
-.footer__bottom a[href^="https://www.apache.org/"] {
- opacity: 1;
-}
-
-.footer__bottom a[href^="https://www.apache.org/"]:hover {
- transform: scale(0.5);
-}
-
-.footer__bottom a[href^="https://www.apache.org/"] img {
- margin-top: 0;
- background: white;
- padding: 8px 20px 6px 19px;
- border-radius: 24px;
-}
-
-.footer__copyright {
- font-size: 12px;
- max-width: 680px;
- margin: 0 auto;
- opacity: 0.88;
-}
-
-/* help page */
-.help-page .cards {
- margin-top: 38px;
- margin-bottom: 56px;
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-gap: 36px;
-}
-
-.help-page .card {
- padding: 24px 28px 18px;
- border: 1px solid #eee;
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 3%);
-}
-
-.help-page .card .header {
- padding: 0;
-}
-
-.help-page .card h2 {
- display: flex;
- align-items: center;
-}
-
-.help-page .card h2 img {
- padding-bottom: 2px;
- height: 28px;
- margin-right: 14px;
-}
-
-.help-page #documents-icon {
- margin-right: 10px;
- margin-left: -6px;
-}
-
-.help-page .card p {
- color: var(--color-help-subtitle);
-}
-
-.help-page .card .buttons {
- margin-top: 18px;
- display: flex;
-}
-
-.help-page .card .buttons svg {
- height: 12px;
- margin-left: 4px;
- transition: transform 0.3s;
-}
-
-.help-page .card .buttons a {
- font-size: 18px;
- font-weight: 600;
- transition: all 0.3s;
- margin-right: 32px;
-}
-
-.help-page .card .buttons a:hover {
- text-decoration: none;
-}
-
-.help-page .card .buttons a:hover svg {
- transform: translateX(2px);
-}
-
-.team-githubLogo {
- height: 24px;
-}
-
-.downloads-subtitle {
- color: var(--color-downloads-subtitle);
-}
-
-.downloads-leftsidelinks {
- color: var(--color-downloads-leftsidelinks);
-}
-
-.downloads-leftsidelink:hover {
- color: var(--color-downloads-leftsidelink-hover);
-}
-
-.downloads-versioninfo {
- color: var(--color-downloads-rightside-versioninfo);
-}
-
-.downloads-versioninfo-span {
- color: var(--color-downloads-rightside-versioninfo-span);
-}
-
-.downloads-dropdown {
- background-color: var(--color-downloads-dropdown);
-}
-
-.download-dropdown-item:hover {
- background-color: var(--color-downloads-dropdown-items);
-}
-
-.team-repocard {
- color: var(--color-team-repocard);
-}
-
-.team-repocard:hover {
- color: var(--color-team-repocard-hover);
-}
-
-.docs-subtitle {
- color: var(--color-docs-subtitle);
-}
-
-.docs-versioninfo {
- color: var(--color-docs-versioninfo);
-}
-
-.pic-wrapper {
- width: 350px;
- position: fixed;
- display: flex;
- right: 0;
- bottom: 0;
- z-index: 999;
- outline: 0;
- overflow: auto;
- border: 0;
- box-shadow: 0 0 20px -12px #626365;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.pic-wrapper a {
- display: flex;
-}
-
-.pic-wrapper-close {
- position: absolute;
- z-index: 1000;
- top: 10px;
- right: 10px;
- padding: 5px;
- font-weight: 900;
- color: rgb(135 151 172);
- font-size: 16px;
- outline: none;
- border-radius: 100px;
- border: 1px solid transparent;
-}
-
-.pic-wrapper-close:hover {
- cursor: pointer;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.pic-wrapper-close svg {
- width: 10px;
- height: 10px;
- display: inherit;
-}
-
-@media only screen and (max-width: 440px) {
- .pic-wrapper {
- width: 70%;
- }
-}
-
-/* plugin hub section */
-.plugin-logo {
- margin-top: 10px;
- max-width: 250px;
- max-height: 180px;
- transform: scale(1);
- transition: transform 0.5s ease;
-}
-
-.plugin-logo.default {
- opacity: 0.2;
-}
-
-.overflow {
- overflow: hidden;
-}
-
-.plugin-logo:hover {
- transform: scale(1.2);
-}
-
-.read-more-link {
- color: #d0312d;
- font-size: 0.8rem;
- font-weight: 500;
- text-align: left;
- padding-bottom: 2px;
- display: flex;
-}
-
-.read-more-link:hover {
- color: var(--color-primary);
- text-decoration: var(--ifm-link-hover-decoration);
-}
-
-/* Sidebar Section */
-.sidebar-link {
- color: #d0312d;
-}
-
-.sidebar-link :hover {
- color: #ffb3b3;
-}
-
-/* Mobile-phones and tablet styles */
-@media only screen and (min-width: 300px) and (max-width: 1100px) {
- body {
- overflow-x: hidden !important;
- }
-
- .hero-sec-wrap {
- display: block;
- height: fit-content;
- }
-
- .homeCanvas-overlay {
- position: absolute;
- width: 100vw;
- height: 50vh;
- background: #ebe6dc;
- top: -1px;
- right: 0;
- }
-
- .hero-text {
- height: 50%;
- width: 100%;
- padding: 5rem 0 0 6vw;
- }
-
- .hero-title {
- width: 100vw;
- font-size: 3.4rem;
- }
-
- .hero-subtitle {
- font-size: 1.05rem;
- line-height: 28px;
- margin: 25px 0 24px;
- padding-right: 20px;
- }
-
- .add-margin {
- margin: 30px 0 0;
- }
-
- .homeCanvas {
- width: 100vw;
- height: 50vh;
- }
-
- .hero-infograph {
- overflow: hidden;
- }
-
- .hldesign-graphic {
- width: 100%;
- }
-
- .arch-scale-svg {
- display: none;
- }
-
- .arch-card-border {
- width: 100%;
- left: 0;
- top: 10px;
- }
-
- .arch-head,
- .compare-head,
- .testimonials-head,
- .docs-promo-head,
- .oss-promo-head {
- left: 7%;
- width: 83%;
- }
-
- .arch-subtitle,
- .compare-subtitle,
- .testimonials-subtitle,
- .docs-promo-subtitle,
- .oss-promo-subtitle {
- left: 7%;
- width: 85%;
- }
-
- .add-left-margin {
- position: relative;
- left: 7%;
- }
-
- .add-left-margin-feat {
- position: absolute;
- left: 7%;
- }
-
- .bottom-pos {
- bottom: 34%;
- }
-
- .feat-head {
- font-size: 2.13rem;
- width: 84%;
- }
-
- .feat-head-desc {
- left: 7%;
- }
-
- .feat-desc {
- width: 83%;
- left: 7%;
- }
-
- .feat-container-d {
- display: none;
- }
-
- .feat-container-m {
- display: block;
- }
-
- .benefit {
- background: #fff8f6;
- padding: 50px 0;
- height: 100vh;
- }
-
- .row-benefit {
- margin: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-flow: column-reverse;
- position: absolute;
- height: 100vh;
- width: 100vw;
- }
-
- .benefit-infograph {
- width: 100%;
- padding: 0 0 60px;
- }
-
- .row-reverse {
- flex-flow: column;
- }
-
- .row-hidden {
- opacity: 0;
- }
-
- .table {
- width: 100%;
- display: block;
- }
-
- .docs-promo {
- flex-flow: column-reverse;
- padding: 50px 0;
- }
-
- .docs-promo-video {
- width: 100%;
- }
-
- .docs-promo-video > video {
- padding: 0 26px 35px;
- width: 100%;
- height: auto;
- }
-
- .oss-promo {
- flex-flow: column;
- background: #121010;
- padding: 50px 0 0;
- }
-
- .oss-promo-text {
- width: 100%;
- }
-
- .oss-promo-infograph {
- width: 100%;
- margin-top: 30px;
- }
-
- .event-card {
- margin: 0 20px 20px;
- }
-
- .event-card-container {
- flex-flow: column;
- }
-
- .newsletter > p {
- text-align: center;
- }
-
- .endcta-text {
- font-size: 1.7rem;
- }
-
- .navbar {
- transform: none !important;
- }
-
- .rocket {
- width: 12vw;
- height: auto;
- transform: rotate(45deg);
- }
-}
-
-@media only screen and (min-height: 500px) and (max-height: 670px) {
- .benefit-infograph {
- width: 70%;
- padding: 0 0 60px;
- }
-}
-
-@media only screen and (min-width: 768px) {
- .react-toggle {
- display: none;
- }
-
- .arch-card-caption > p {
- width: 50%;
- }
-}
-
-.bottom-pos {
- bottom: 34%;
-}
-
-@media only screen and (min-device-width: 768px) and (max-device-width: 1100px) {
- .feat-container-d {
- display: none;
- }
-
- .feat-container-m {
- display: block;
- }
-}
-
-@media only screen and (min-device-width: 300px) and (max-device-width: 360px) {
- .hero-title {
- font-size: 2.95rem;
- }
-
- .hero-infograph {
- overflow: hidden;
- }
-
- .endcta-text {
- font-size: 1.6rem;
- }
-
- .arch-head,
- .compare-head,
- .testimonials-head,
- .docs-promo-head,
- .oss-promo-head {
- left: 7%;
- width: 93%;
- }
-
- .benefit .feat-desc {
- font-size: 0.85rem;
- }
-
- .oss-promo-infograph {
- overflow: hidden;
- }
-}
-
-@media (min-width: 1600px) and (max-width: 2080px) {
- .hero-title {
- width: 40vw;
- font-size: 5.2rem;
- }
-
- .hero-subtitle {
- width: 40vw;
- }
-
- .bottom-pos {
- bottom: 38%;
- }
-
- .arch-scale-svg {
- transform: scale(1.2);
- }
-}
-
-.rc-image {
- display: inline-flex;
- position: relative;
-}
-
-.rc-image-img {
- width: 100%;
- height: auto;
-}
-
-.rc-image-img-placeholder {
- background-color: #f3f3f3;
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjhweCIgaGVpZ2h0PSIyMnB4IiB2aWV3Qm94PSIwIDAgMjggMjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1LjIgKDc4MTgxKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5pbWFnZS1maWxs5aSH5Lu9PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgP [...]
-}
-
-.rc-image-placeholder {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
-}
-
-.rc-image-mask {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- background: rgb(0 0 0 / 30%);
- opacity: 0;
- pointer-events: none;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- transition: opacity 0.3s;
-}
-
-.rc-image:hover .rc-image-mask {
- opacity: 1;
-}
-
-.rc-image-preview {
- text-align: center;
- height: 100%;
- pointer-events: none;
-}
-
-.rc-image-preview-body {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
-}
-
-.rc-image-preview.zoom-enter,
-.rc-image-preview.zoom-appear {
- transform: none;
- opacity: 0;
- animation-duration: 0.3s;
-}
-
-.rc-image-preview-mask {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 1000;
- height: 100%;
- background-color: #000;
- opacity: 0.8;
-}
-
-.rc-image-preview-mask-hidden {
- display: none;
-}
-
-.rc-image-preview-img {
- cursor: grab;
- transform: scale3d(1, 1, 1);
- transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
- user-select: none;
- vertical-align: middle;
- max-width: 100%;
- max-height: 100%;
- pointer-events: auto;
-}
-
-.rc-image-preview-img-wrapper {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
-}
-
-.rc-image-preview-img-wrapper::before {
- content: "";
- display: inline-block;
- height: 50%;
- width: 1px;
- margin-right: -1px;
-}
-
-.rc-image-preview-moving .rc-image-preview-img {
- cursor: grabbing;
-}
-
-.rc-image-preview-moving .rc-image-preview-img-wrapper {
- transition-duration: 0s;
-}
-
-.rc-image-preview-wrap {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 1000;
- overflow: auto;
- outline: 0;
- -webkit-overflow-scrolling: touch;
-}
-
-.rc-image-preview-operations {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- pointer-events: auto;
- list-style: none;
- position: absolute;
- display: flex;
- top: 0;
- right: 0;
- width: 100%;
- align-items: center;
- flex-direction: row-reverse;
- z-index: 1;
- color: #bbb;
- background: rgb(0 0 0 / 45%);
-}
-
-.rc-image-preview-operations-progress {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
-}
-
-.rc-image-preview-operations-operation {
- padding: 10px;
- cursor: pointer;
- margin-left: 10px;
-}
-
-.rc-image-preview-operations-operation-disabled {
- pointer-events: none;
- color: #6f6f6f;
-}
-
-.rc-image-preview-operations-operation:last-of-type {
- margin-left: 0;
-}
-
-.rc-image-preview-operations-icon {
- font-size: 18px;
-}
-
-.rc-image-preview-switch-left {
- position: absolute;
- left: 10px;
- top: 50%;
- width: 44px;
- height: 44px;
- margin-top: -22px;
- background: rgb(187 187 187 / 45%);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1;
- pointer-events: auto;
- color: #bbb;
-}
-
-.rc-image-preview-switch-left-disabled {
- background: rgb(187 187 187 / 30%);
- color: #6f6f6f;
- cursor: not-allowed;
-}
-
-.rc-image-preview-switch-left-disabled > .anticon {
- cursor: not-allowed;
-}
-
-.rc-image-preview-switch-left > .anticon {
- font-size: 24px;
-}
-
-.rc-image-preview-switch-right {
- position: absolute;
- right: 10px;
- top: 50%;
- width: 44px;
- height: 44px;
- margin-top: -22px;
- background: rgb(187 187 187 / 45%);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1;
- pointer-events: auto;
- color: #bbb;
-}
-
-.rc-image-preview-switch-right-disabled {
- background: rgb(187 187 187 / 20%);
- color: #6f6f6f;
- cursor: not-allowed;
-}
-
-.rc-image-preview-switch-right-disabled > .anticon {
- cursor: not-allowed;
-}
-
-.rc-image-preview-switch-right > .anticon {
- font-size: 24px;
-}
-
-.fade-enter,
-.fade-appear {
- animation-duration: 0.2s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-
-.fade-leave {
- animation-duration: 0.2s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-
-.fade-enter.fade-enter-active,
-.fade-appear.fade-appear-active {
- animation-name: rc-image-fade-in;
- animation-play-state: running;
-}
-
-.fade-leave.fade-leave-active {
- animation-name: rc-image-fade-out;
- animation-play-state: running;
- pointer-events: none;
-}
-
-/* stylelint-disable-next-line no-duplicate-selectors */
-.fade-enter,
-.fade-appear {
- opacity: 0;
- animation-timing-function: linear;
-}
-
-/* stylelint-disable-next-line no-duplicate-selectors */
-.fade-leave {
- animation-timing-function: linear;
-}
-
-@keyframes rc-image-fade-in {
- 0% {
- opacity: 0;
- }
-
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes rc-image-fade-out {
- 0% {
- opacity: 1;
- }
-
- 100% {
- opacity: 0;
- }
-}
-
-.zoom-enter,
-.zoom-appear {
- animation-duration: 0.2s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-
-.zoom-leave {
- animation-duration: 0.2s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-
-.zoom-enter.zoom-enter-active,
-.zoom-appear.zoom-appear-active {
- animation-name: rc-image-zoom-in;
- animation-play-state: running;
-}
-
-.zoom-leave.zoom-leave-active {
- animation-name: rc-image-zoom-out;
- animation-play-state: running;
- pointer-events: none;
-}
-
-/* stylelint-disable-next-line no-duplicate-selectors */
-.zoom-enter,
-.zoom-appear {
- transform: scale(0);
- opacity: 0;
- animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
-}
-
-/* stylelint-disable-next-line no-duplicate-selectors */
-.zoom-leave {
- animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
-}
-
-@keyframes rc-image-zoom-in {
- 0% {
- transform: scale(0.2);
- opacity: 0;
- }
-
- 100% {
- transform: scale(1);
- opacity: 1;
- }
-}
-
-@keyframes rc-image-zoom-out {
- 0% {
- transform: scale(1);
- }
-
- 100% {
- transform: scale(0.2);
- opacity: 0;
- }
-}
diff --git a/blog/src/css/customTheme.scss b/blog/src/css/customTheme.scss
new file mode 100644
index 00000000000..a705253eb63
--- /dev/null
+++ b/blog/src/css/customTheme.scss
@@ -0,0 +1,480 @@
+/* stylelint-disable custom-property-pattern */
+
+@import "./rc-image";
+
+:root {
+ --ifm-color-primary-lightest: rgb(228 222 222);
+ --ifm-color-primary-lighter: #d0312d;
+ --ifm-color-primary-light: #f8f8fa;
+ --ifm-color-primary: #e8433e;
+ --ifm-color-dark: #000;
+ --ifm-color-primary-dark: #a5a0a0;
+ --ifm-color-primary-darker: #9a2521;
+ --ifm-color-shadow--lw: #7f1e1b;
+ --color-title: #101827;
+ --color-github-button: #101827;
+ --color-github-button-hover: #000;
+ --color-primary: #e8433e;
+ --color-subtitle: #000;
+ --color-secondary: #4b5563;
+ --color-secondary-bg: #f3f4f6;
+ --color-secondary-text: #444952;
+ --color-border: #eee;
+ --color-downloads-subtitle: #374051;
+ --color-downloads-leftsidelinks: #4b5563;
+ --color-downloads-leftsidelink-hover: #111827;
+ --color-downloads-rightside-versioninfo: #6b7280;
+ --color-downloads-rightside-versioninfo-span: #374151;
+ --color-team-repocard: #374151;
+ --color-team-repocard-hover: #111827;
+ --color-docs-subtitle: #374151;
+ --color-docs-versioninfo: #4b5563;
+ --color-help-subtitle: #6b7280;
+ --color-downloads-dropdown: #fff;
+ --color-downloads-dropdown-items: #f3f4f6;
+}
+
+html[data-theme="dark"] {
+ --color-secondary-bg: #121212;
+ --ifm-color-dark: #b0b0b0;
+ --color-title: #f0f0f0;
+ --color-subtitle: #f0f0f0;
+ --color-github-button: #121212;
+ --color-secondary-text: #b0b0b0;
+ --color-border: #b0b0b0;
+ --color-downloads-subtitle: #f0f0f0;
+ --color-downloads-leftsidelinks: #909397;
+ --color-downloads-leftsidelink-hover: #f0f0f0;
+ --color-downloads-rightside-versioninfo: #f0f0f0;
+ --color-downloads-rightside-versioninfo-span: #909397;
+ --color-team-repocard: #f0f0f0;
+ --color-team-repocard-hover: #909397;
+ --color-docs-subtitle: #f0f0f0;
+ --color-docs-versioninfo: #b0b0b0;
+ --color-help-subtitle: #f0f0f0;
+ --color-downloads-dropdown: #18191a;
+ --color-downloads-dropdown-items: #4c4e50;
+}
+
+@font-face {
+ font-family: MaisonNeue-Medium;
+ src:
+ local("MaisonNeue-Medium"),
+ url("https://static.apiseven.com/202202/MaisonNeue-Medium.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+@font-face {
+ font-family: MaisonNeue-Bold;
+ src:
+ local("MaisonNeue-Bold"),
+ url("https://static.apiseven.com/202202/MaisonNeue-Bold.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+@font-face {
+ font-family: MaisonNeue-Light;
+ src:
+ local("MaisonNeue-Light"),
+ url("https://static.apiseven.com/202202/MaisonNeue-Light.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+@font-face {
+ font-family: MaisonNeue-Demi;
+ src:
+ local("MaisonNeue-Demi"),
+ url("https://static.apiseven.com/202202/MaisonNeue-Demi.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+@font-face {
+ font-family: MaisonNeue-ExtraBold;
+ src:
+ local("MaisonNeue-ExtraBold"),
+ url("https://static.apiseven.com/202202/MaisonNeue-ExtraBold.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+body {
+ overflow-x: hidden;
+}
+
+body,
+h1,
+h2,
+h3 {
+ font-family: MaisonNeue-Medium, apple-system, system-ui, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizelegibility;
+ text-size-adjust: 100%;
+}
+
+div.inner {
+ color: var(--ifm-color-primary);
+}
+
+.image {
+ padding: 75px 10px 75px 75px;
+}
+
+.more-users {
+ padding-top: 75px;
+}
+
+.post-header {
+ padding-top: 50px;
+}
+
+.header {
+ padding-top: 50px;
+}
+
+.color-primary {
+ color: var(--ifm-color-primary);
+}
+
+header h2 {
+ color: var(--color-primary);
+}
+
+@media only screen and (max-width: 414px) {
+ .hide-on-mobile {
+ display: none;
+ }
+}
+
+/* navbar */
+.navbar__link:hover,
+.navbar__link--active {
+ color: var(--color-primary);
+}
+
+.navbar__title {
+ font-size: 18px;
+ height: 30px;
+}
+
+/* button */
+.button {
+ margin: 0 10px;
+ padding: 12px 24px;
+ font-size: 18px;
+ font-weight: 600;
+ border-radius: 10px;
+ border: none;
+ background: #fee2e2;
+ color: #ef4444;
+ transition: all 0.3s;
+}
+
+.button:hover {
+ background: #fecaca;
+ color: #ef4444;
+}
+
+.button.github {
+ background: var(--color-github-button);
+ color: white;
+ display: inline-flex;
+ align-items: center;
+ margin-bottom: 15px;
+}
+
+.button.github .github-logo {
+ height: 24px;
+ margin: 0 12px 1px 0;
+}
+
+.button.github:hover {
+ background: var(--color-github-button-hover);
+}
+
+.button-wrapper {
+ margin: 0 -10px;
+}
+
+.button.secondary {
+ background: #f3f4f6;
+ color: #1f2937;
+ border: 1px solid #d1d5db;
+ box-sizing: border-box;
+ margin-bottom: 15px;
+}
+
+.button.secondary:hover {
+ background: #e5e7eb;
+}
+
+@media only screen and (max-width: 414px) {
+ .button {
+ margin: 0;
+ }
+
+ .button.secondary,
+ .button.github {
+ width: 100%;
+ }
+
+ .button-wrapper {
+ margin: 0;
+ }
+}
+
+a {
+ color: var(--ifm-color-dark);
+ cursor: pointer;
+}
+
+a:hover {
+ color: var(--color-primary);
+ text-decoration: none;
+}
+
+.markdown a {
+ color: var(--color-primary);
+}
+
+.arrow-btn {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1002;
+}
+
+/* Sidebar Section */
+.sidebar-link {
+ color: #d0312d;
+}
+
+.sidebar-link :hover {
+ color: #ffb3b3;
+}
+
+.arch-head,
+.compare-head,
+.testimonials-head,
+.docs-promo-head {
+ font-size: 2.4rem;
+ position: relative;
+ left: 16.8%;
+ width: 83.2%;
+}
+
+.arch-subtitle,
+.compare-subtitle,
+.testimonials-subtitle,
+.docs-promo-subtitle {
+ font-size: 1.13rem;
+ position: relative;
+ left: 16.8%;
+ width: 70%;
+ color: #615d5d;
+ letter-spacing: 0.2px;
+ font-family: MaisonNeue-Light, sans-serif;
+ font-weight: 700;
+}
+
+.add-left-margin {
+ position: relative;
+ left: 16.8%;
+}
+
+/* Mobile-phones and tablet styles */
+@media only screen and (min-width: 300px) and (max-width: 1100px) {
+ body {
+ overflow-x: hidden !important;
+ }
+
+ .hero-sec-wrap {
+ display: block;
+ height: fit-content;
+ }
+
+ .homeCanvas-overlay {
+ position: absolute;
+ width: 100vw;
+ height: 50vh;
+ background: #ebe6dc;
+ top: -1px;
+ right: 0;
+ }
+
+ .hero-text {
+ height: 50%;
+ width: 100%;
+ padding: 5rem 0 0 6vw;
+ }
+
+ .hero-title {
+ width: 100vw;
+ font-size: 3.4rem;
+ }
+
+ .hero-subtitle {
+ font-size: 1.05rem;
+ line-height: 28px;
+ margin: 25px 0 24px;
+ padding-right: 20px;
+ }
+
+ .add-margin {
+ margin: 30px 0 0;
+ }
+
+ .homeCanvas {
+ width: 100vw;
+ height: 50vh;
+ }
+
+ .hero-infograph {
+ overflow: hidden;
+ }
+
+ .add-left-margin {
+ position: relative;
+ left: 7%;
+ }
+
+ .add-left-margin-feat {
+ position: absolute;
+ left: 7%;
+ }
+
+ .bottom-pos {
+ bottom: 34%;
+ }
+
+ .feat-head {
+ font-size: 2.13rem;
+ width: 84%;
+ }
+
+ .feat-head-desc {
+ left: 7%;
+ }
+
+ .feat-desc {
+ width: 83%;
+ left: 7%;
+ }
+
+ .feat-container-d {
+ display: none;
+ }
+
+ .feat-container-m {
+ display: block;
+ }
+
+ .benefit {
+ background: #fff8f6;
+ padding: 50px 0;
+ height: 100vh;
+ }
+
+ .row-benefit {
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-flow: column-reverse;
+ position: absolute;
+ height: 100vh;
+ width: 100vw;
+ }
+
+ .benefit-infograph {
+ width: 100%;
+ padding: 0 0 60px;
+ }
+
+ .row-reverse {
+ flex-flow: column;
+ }
+
+ .row-hidden {
+ opacity: 0;
+ }
+
+ .table {
+ width: 100%;
+ display: block;
+ }
+}
+
+@media only screen and (min-height: 500px) and (max-height: 670px) {
+ .benefit-infograph {
+ width: 70%;
+ padding: 0 0 60px;
+ }
+}
+
+@media only screen and (min-width: 768px) {
+ .react-toggle {
+ display: none;
+ }
+
+ .arch-card-caption > p {
+ width: 50%;
+ }
+}
+
+.bottom-pos {
+ bottom: 34%;
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1100px) {
+ .feat-container-d {
+ display: none;
+ }
+
+ .feat-container-m {
+ display: block;
+ }
+}
+
+@media only screen and (min-device-width: 300px) and (max-device-width: 360px) {
+ .hero-title {
+ font-size: 2.95rem;
+ }
+
+ .hero-infograph {
+ overflow: hidden;
+ }
+
+ .endcta-text {
+ font-size: 1.6rem;
+ }
+
+ .arch-head,
+ .compare-head,
+ .testimonials-head,
+ .docs-promo-head,
+ .oss-promo-head {
+ left: 7%;
+ width: 93%;
+ }
+
+ .benefit .feat-desc {
+ font-size: 0.85rem;
+ }
+
+ .oss-promo-infograph {
+ overflow: hidden;
+ }
+}
+
+@media (min-width: 1600px) and (max-width: 2080px) {
+ .bottom-pos {
+ bottom: 38%;
+ }
+
+ .arch-scale-svg {
+ transform: scale(1.2);
+ }
+}
diff --git a/blog/src/css/rc-image.scss b/blog/src/css/rc-image.scss
new file mode 100644
index 00000000000..3f34b20be4d
--- /dev/null
+++ b/blog/src/css/rc-image.scss
@@ -0,0 +1,353 @@
+.rc-image {
+ display: inline-flex;
+ position: relative;
+}
+
+.rc-image-img {
+ width: 100%;
+ height: auto;
+}
+
+.rc-image-img-placeholder {
+ background-color: #f3f3f3;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjhweCIgaGVpZ2h0PSIyMnB4IiB2aWV3Qm94PSIwIDAgMjggMjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1LjIgKDc4MTgxKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5pbWFnZS1maWxs5aSH5Lu9PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgP [...]
+}
+
+.rc-image-placeholder {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+.rc-image-mask {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background: rgb(0 0 0 / 30%);
+ opacity: 0;
+ pointer-events: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ transition: opacity 0.3s;
+}
+
+.rc-image:hover .rc-image-mask {
+ opacity: 1;
+}
+
+.rc-image-preview {
+ text-align: center;
+ height: 100%;
+ pointer-events: none;
+}
+
+.rc-image-preview-body {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+}
+
+.rc-image-preview.zoom-enter,
+.rc-image-preview.zoom-appear {
+ transform: none;
+ opacity: 0;
+ animation-duration: 0.3s;
+}
+
+.rc-image-preview-mask {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ height: 100%;
+ background-color: #000;
+ opacity: 0.8;
+}
+
+.rc-image-preview-mask-hidden {
+ display: none;
+}
+
+.rc-image-preview-img {
+ cursor: grab;
+ transform: scale3d(1, 1, 1);
+ transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+ user-select: none;
+ vertical-align: middle;
+ max-width: 100%;
+ max-height: 100%;
+ pointer-events: auto;
+}
+
+.rc-image-preview-img-wrapper {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+
+.rc-image-preview-img-wrapper::before {
+ content: "";
+ display: inline-block;
+ height: 50%;
+ width: 1px;
+ margin-right: -1px;
+}
+
+.rc-image-preview-moving .rc-image-preview-img {
+ cursor: grabbing;
+}
+
+.rc-image-preview-moving .rc-image-preview-img-wrapper {
+ transition-duration: 0s;
+}
+
+.rc-image-preview-wrap {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ overflow: auto;
+ outline: 0;
+ -webkit-overflow-scrolling: touch;
+}
+
+.rc-image-preview-operations {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ pointer-events: auto;
+ list-style: none;
+ position: absolute;
+ display: flex;
+ top: 0;
+ right: 0;
+ width: 100%;
+ align-items: center;
+ flex-direction: row-reverse;
+ z-index: 1;
+ color: #bbb;
+ background: rgb(0 0 0 / 45%);
+}
+
+.rc-image-preview-operations-progress {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.rc-image-preview-operations-operation {
+ padding: 10px;
+ cursor: pointer;
+ margin-left: 10px;
+}
+
+.rc-image-preview-operations-operation-disabled {
+ pointer-events: none;
+ color: #6f6f6f;
+}
+
+.rc-image-preview-operations-operation:last-of-type {
+ margin-left: 0;
+}
+
+.rc-image-preview-operations-icon {
+ font-size: 18px;
+}
+
+.rc-image-preview-switch-left {
+ position: absolute;
+ left: 10px;
+ top: 50%;
+ width: 44px;
+ height: 44px;
+ margin-top: -22px;
+ background: rgb(187 187 187 / 45%);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ pointer-events: auto;
+ color: #bbb;
+}
+
+.rc-image-preview-switch-left-disabled {
+ background: rgb(187 187 187 / 30%);
+ color: #6f6f6f;
+ cursor: not-allowed;
+}
+
+.rc-image-preview-switch-left-disabled > .anticon {
+ cursor: not-allowed;
+}
+
+.rc-image-preview-switch-left > .anticon {
+ font-size: 24px;
+}
+
+.rc-image-preview-switch-right {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ width: 44px;
+ height: 44px;
+ margin-top: -22px;
+ background: rgb(187 187 187 / 45%);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ pointer-events: auto;
+ color: #bbb;
+}
+
+.rc-image-preview-switch-right-disabled {
+ background: rgb(187 187 187 / 20%);
+ color: #6f6f6f;
+ cursor: not-allowed;
+}
+
+.rc-image-preview-switch-right-disabled > .anticon {
+ cursor: not-allowed;
+}
+
+.rc-image-preview-switch-right > .anticon {
+ font-size: 24px;
+}
+
+.fade-enter,
+.fade-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+
+.fade-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+
+.fade-enter.fade-enter-active,
+.fade-appear.fade-appear-active {
+ animation-name: rc-image-fade-in;
+ animation-play-state: running;
+}
+
+.fade-leave.fade-leave-active {
+ animation-name: rc-image-fade-out;
+ animation-play-state: running;
+ pointer-events: none;
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors */
+.fade-enter,
+.fade-appear {
+ opacity: 0;
+ animation-timing-function: linear;
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors */
+.fade-leave {
+ animation-timing-function: linear;
+}
+
+@keyframes rc-image-fade-in {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes rc-image-fade-out {
+ 0% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+.zoom-enter,
+.zoom-appear {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+
+.zoom-leave {
+ animation-duration: 0.2s;
+ animation-fill-mode: both;
+ animation-play-state: paused;
+}
+
+.zoom-enter.zoom-enter-active,
+.zoom-appear.zoom-appear-active {
+ animation-name: rc-image-zoom-in;
+ animation-play-state: running;
+}
+
+.zoom-leave.zoom-leave-active {
+ animation-name: rc-image-zoom-out;
+ animation-play-state: running;
+ pointer-events: none;
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors */
+.zoom-enter,
+.zoom-appear {
+ transform: scale(0);
+ opacity: 0;
+ animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors */
+.zoom-leave {
+ animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+
+@keyframes rc-image-zoom-in {
+ 0% {
+ transform: scale(0.2);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+@keyframes rc-image-zoom-out {
+ 0% {
+ transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(0.2);
+ opacity: 0;
+ }
+}
diff --git a/blog/zh/docusaurus.config.js b/blog/zh/docusaurus.config.js
index 30d6837bd98..3ada0485489 100644
--- a/blog/zh/docusaurus.config.js
+++ b/blog/zh/docusaurus.config.js
@@ -37,7 +37,7 @@ module.exports = {
readingTime: ({ content }) => readingTime(content).minutes,
},
theme: {
- customCss: require.resolve('./src/css/customTheme.css'),
+ customCss: require.resolve('./src/css/customTheme.scss'),
},
sitemap: {
changefreq: 'daily',
diff --git a/doc/docusaurus.config.js b/doc/docusaurus.config.js
index 0f0098c0bcb..0f8703d1aa7 100644
--- a/doc/docusaurus.config.js
+++ b/doc/docusaurus.config.js
@@ -61,7 +61,7 @@ module.exports = {
docs: false,
blog: false,
theme: {
- customCss: require.resolve('./src/css/customTheme.css'),
+ customCss: require.resolve('./src/css/customTheme.scss'),
},
sitemap: {
changefreq: 'daily',
diff --git a/doc/src/css/customTheme.css b/doc/src/css/customTheme.css
deleted file mode 100644
index c24abdaaa80..00000000000
--- a/doc/src/css/customTheme.css
+++ /dev/null
@@ -1,2026 +0,0 @@
-:root {
- --ifm-color-primary-lightest: rgb(228 222 222);
- --ifm-color-primary-lighter: #d0312d;
- --ifm-color-primary-light: #f8f8fa;
- --ifm-color-primary: #e8433e;
- --ifm-color-dark: #000;
- --ifm-color-primary-dark: #a5a0a0;
- --ifm-color-primary-darker: #9a2521;
- /* stylelint-disable-next-line custom-property-pattern */
- --ifm-color-shadow--lw: #7f1e1b;
- --color-title: #101827;
- --color-github-button: #101827;
- --color-github-button-hover: #000;
- --color-primary: #e8433e;
- --color-subtitle: #000;
- --color-secondary: #4b5563;
- --color-secondary-bg: #f3f4f6;
- --color-secondary-text: #444952;
- --color-border: #eee;
- --color-downloads-subtitle: #374051;
- --color-downloads-leftsidelinks: #4b5563;
- --color-downloads-leftsidelink-hover: #111827;
- --color-downloads-rightside-versioninfo: #6b7280;
- --color-downloads-rightside-versioninfo-span: #374151;
- --color-team-repocard: #374151;
- --color-team-repocard-hover: #111827;
- --color-docs-subtitle: #374151;
- --color-docs-versioninfo: #4b5563;
- --color-help-subtitle: #6b7280;
- --color-downloads-dropdown: #fff;
- --color-downloads-dropdown-items: #f3f4f6;
-}
-
-html[data-theme="dark"] {
- --color-secondary-bg: #121212;
- --ifm-color-dark: #b0b0b0;
- --color-title: #f0f0f0;
- --color-subtitle: #f0f0f0;
- --color-github-button: #121212;
- --color-secondary-text: #b0b0b0;
- --color-border: #b0b0b0;
- --color-downloads-subtitle: #f0f0f0;
- --color-downloads-leftsidelinks: #909397;
- --color-downloads-leftsidelink-hover: #f0f0f0;
- --color-downloads-rightside-versioninfo: #f0f0f0;
- --color-downloads-rightside-versioninfo-span: #909397;
- --color-team-repocard: #f0f0f0;
- --color-team-repocard-hover: #909397;
- --color-docs-subtitle: #f0f0f0;
- --color-docs-versioninfo: #b0b0b0;
- --color-help-subtitle: #f0f0f0;
- --color-downloads-dropdown: #18191a;
- --color-downloads-dropdown-items: #4c4e50;
-}
-
-@font-face {
- font-family: MaisonNeue-Medium;
- src:
- local("MaisonNeue-Medium"),
- url("https://static.apiseven.com/202202/MaisonNeue-Medium.otf")
- format("opentype");
- font-display: optional;
-}
-
-@font-face {
- font-family: MaisonNeue-Bold;
- src:
- local("MaisonNeue-Bold"),
- url("https://static.apiseven.com/202202/MaisonNeue-Bold.otf")
- format("opentype");
- font-display: optional;
-}
-
-@font-face {
- font-family: MaisonNeue-Light;
- src:
- local("MaisonNeue-Light"),
- url("https://static.apiseven.com/202202/MaisonNeue-Light.otf")
- format("opentype");
- font-display: optional;
-}
-
-@font-face {
- font-family: MaisonNeue-Demi;
- src:
- local("MaisonNeue-Demi"),
- url("https://static.apiseven.com/202202/MaisonNeue-Demi.otf")
- format("opentype");
- font-display: optional;
-}
-
-@font-face {
- font-family: MaisonNeue-ExtraBold;
- src:
- local("MaisonNeue-ExtraBold"),
- url("https://static.apiseven.com/202202/MaisonNeue-ExtraBold.otf")
- format("opentype");
- font-display: optional;
-}
-
-::-webkit-scrollbar {
- width: 5px;
-}
-
-::-webkit-scrollbar-track {
- background: #f1f1f1;
-}
-
-::-webkit-scrollbar-thumb {
- background: #888;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: #555;
-}
-
-body,
-h1,
-h2,
-h3 {
- font-family: MaisonNeue-Medium, apple-system, system-ui, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizelegibility;
- text-size-adjust: 100%;
-}
-
-div.inner {
- color: var(--ifm-color-primary);
-}
-
-.image {
- padding: 75px 10px 75px 75px;
-}
-
-.more-users {
- padding-top: 75px;
-}
-
-.post-header {
- padding-top: 50px;
-}
-
-.header {
- padding-top: 50px;
-}
-
-.color-primary {
- color: var(--ifm-color-primary);
-}
-
-header h2 {
- color: var(--color-primary);
-}
-
-@media only screen and (max-width: 414px) {
- .hide-on-mobile {
- display: none;
- }
-}
-
-/* navbar */
-.navbar__link:hover,
-.navbar__link--active {
- color: var(--color-primary);
-}
-
-.navbar__title {
- font-size: 18px;
- height: 30px;
-}
-
-.showcase {
- padding-left: 0;
- padding-right: 0;
-}
-
-.showcase .container {
- padding-left: 0;
- padding-right: 0;
- margin-left: 0;
- margin-right: 0;
- max-width: unset;
-}
-
-.showcase .user-logos {
- margin-top: 48px;
-}
-
-.showcase .logo-row {
- display: flex;
- -webkit-box-align: center;
- align-items: center;
- height: 5rem;
- overflow: hidden;
- position: relative;
- width: 100%;
-}
-
-.showcase .user-logos-container {
- display: inline-block;
- white-space: nowrap;
- overflow: hidden;
- position: absolute;
-}
-
-.showcase .user-logos-container section {
- white-space: nowrap;
- overflow: hidden;
- display: flex;
- align-items: center;
-}
-
-.showcase .user-logos-container section span {
- animation: 36s linear 0s infinite reverse none running logo-animation;
- white-space: nowrap;
- overflow: hidden;
- display: flex;
- align-items: center;
-}
-
-.showcase .user-logos:hover span {
- animation-play-state: paused !important;
-}
-
-.showcase .user-logo {
- max-width: 128px;
- max-height: 50px;
- margin: 0 16px;
-}
-
-@keyframes logo-animation {
- from {
- transform: translateX(-100%);
- }
-
- to {
- transform: translateX(0%);
- }
-}
-
-/* button */
-.button {
- margin: 0 10px;
- padding: 12px 24px;
- font-size: 18px;
- font-weight: 600;
- border-radius: 10px;
- border: none;
- background: #fee2e2;
- color: #ef4444;
- transition: all 0.3s;
-}
-
-.button:hover {
- background: #fecaca;
- color: #ef4444;
-}
-
-.button.github {
- background: var(--color-github-button);
- color: white;
- display: inline-flex;
- align-items: center;
- margin-bottom: 15px;
-}
-
-.button.github .github-logo {
- height: 24px;
- margin: 0 12px 1px 0;
-}
-
-.button.github:hover {
- background: var(--color-github-button-hover);
-}
-
-.button-wrapper {
- margin: 0 -10px;
-}
-
-.button.secondary {
- background: #f3f4f6;
- color: #1f2937;
- border: 1px solid #d1d5db;
- box-sizing: border-box;
- margin-bottom: 15px;
-}
-
-.button.secondary:hover {
- background: #e5e7eb;
-}
-
-@media only screen and (max-width: 414px) {
- .button {
- margin: 0;
- }
-
- .button.secondary,
- .button.github {
- width: 100%;
- }
-
- .button-wrapper {
- margin: 0;
- }
-}
-
-a {
- color: var(--ifm-color-dark);
- cursor: pointer;
-}
-
-a:hover {
- color: var(--color-primary);
- text-decoration: none;
-}
-
-.markdown a {
- color: var(--color-primary);
-}
-
-.arrow-btn {
- stroke-dasharray: 1000;
- stroke-dashoffset: 1002;
-}
-
-/* Blogs section */
-.blogPostTitle_node_modules-\@docusaurus-theme-classic-lib-next-theme-BlogPostItem-styles-module {
- font-size: 2rem !important;
-}
-
-.sidebar_node_modules-\@docusaurus-theme-classic-lib-next-theme-BlogSidebar-styles-module {
- margin-left: -3px;
- text-align: left;
- margin-right: 10px;
- padding-right: 20px;
-}
-
-/* Hero section */
-@keyframes fade-in-up {
- from {
- opacity: 0;
- transform: translate3d(0, 50%, 0);
- }
-
- to {
- opacity: 1;
- transform: translate3d(0, 0, 0);
- }
-}
-
-.hero-title,
-.hero-subtitle,
-.hero-ctas {
- animation-name: fade-in-up;
- animation-fill-mode: both;
- animation-delay: 0s;
- animation-duration: 1s;
-}
-
-.hero-subtitle {
- z-index: 100;
- font-size: 1.1rem;
- font-family: MaisonNeue-Light, sans-serif;
- position: relative;
- color: #615d5d;
- line-height: 30px;
- letter-spacing: 0.2px;
- margin: 25px 0;
- padding-right: 20px;
- animation-delay: 0.25s;
-}
-
-.hero-ctas {
- display: flex;
- align-items: center;
- animation-delay: 0.5;
-}
-
-.hero-sec-wrap {
- display: flex;
- background: #f4f4f4ad;
- height: 100vh;
-}
-
-.homeCanvas-overlay {
- position: absolute;
- width: 50vw;
- height: 100vh;
- background: #fff;
- top: -1px;
- right: 0;
-}
-
-.homeCanvas {
- width: 50vw;
- height: 100vh;
-}
-
-.hero-text {
- height: 100%;
- display: flex;
- flex-wrap: wrap;
- align-content: center;
- width: 50%;
- padding: 0 0 0 6vw;
-}
-
-.hero-title {
- font-family: MaisonNeue-Bold, sans-serif;
- color: #121212;
- width: 42vw;
- font-size: 4.2rem;
- letter-spacing: 0.2px;
- margin: 0;
-}
-
-.btn {
- background: #030c16;
- border-style: solid;
- border-width: 1px;
- border: none;
- color: white;
- padding: 5px 20px;
- border-radius: 20px;
- font-size: 1rem;
- text-decoration: none;
- margin: 0 10px 0 0;
- transition: all 0.3s;
-}
-
-.btn:hover {
- background: #9b9b9b;
- color: white;
- text-decoration: none;
-}
-
-.btn-docs {
- display: flex;
- flex-direction: row;
- align-items: center;
-}
-
-.btn-docs:hover {
- text-decoration: none;
-}
-
-.btn-docs .goto {
- color: #000;
-}
-
-.btn-docs:hover .goto,
-.btn-docs:active .goto {
- opacity: 0.8;
-}
-
-.btn-docs .arrow {
- width: 30px;
- height: 30px;
- position: relative;
-}
-
-.btn-docs .arrow svg {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-
-.btn-docs .arrow polygon,
-.btn-docs .arrow rect {
- transition: all 250ms;
-}
-
-.btn-docs .arrow rect {
- opacity: 0;
-}
-
-.btn-docs:hover .arrow polygon {
- transform: translateX(100px);
-}
-
-.btn-docs:hover .arrow rect {
- transform: translateX(240px);
- opacity: 1;
-}
-
-/* Architecture section */
-.hldesign {
- height: 100%;
- display: flex;
- justify-content: center;
-}
-
-.hldesign-graphic {
- width: 60%;
- height: auto;
-}
-
-.Architecture_svg__architecture {
- font-family: MaisonNeue-Medium, sans-serif;
-}
-
-.arch {
- background: linear-gradient(180deg, #e2ecff 15%, #fff 90%);
- position: relative;
- z-index: 1;
- padding: 50px 0;
- overflow: hidden;
-}
-
-.arch-card-caption {
- height: 100%;
- display: flex;
- justify-content: center;
- color: #615d5d;
-}
-
-.arch-card-caption > p {
- width: 90%;
- letter-spacing: 0.2px;
- font-family: MaisonNeue-Light, sans-serif;
- font-weight: 700;
- text-align: center;
- position: relative;
- bottom: -15px;
- font-size: 1rem;
-}
-
-.arch-card-border {
- z-index: -10;
- position: absolute;
- width: 66%;
- height: 100%;
- border-style: solid;
- top: 15px;
- left: 17%;
- border-color: white;
- background: white;
- filter: drop-shadow(0 4px 10px rgb(0 0 0 / 25%));
-}
-
-.arch-head,
-.compare-head,
-.testimonials-head,
-.docs-promo-head {
- font-size: 2.4rem;
- position: relative;
- left: 16.8%;
- width: 83.2%;
-}
-
-.arch-subtitle,
-.compare-subtitle,
-.testimonials-subtitle,
-.docs-promo-subtitle {
- font-size: 1.13rem;
- position: relative;
- left: 16.8%;
- width: 70%;
- color: #615d5d;
- letter-spacing: 0.2px;
- font-family: MaisonNeue-Light, sans-serif;
- font-weight: 700;
-}
-
-.add-left-margin {
- position: relative;
- left: 16.8%;
-}
-
-/* Features section */
-.feat-head {
- font-size: 2.4rem;
- width: 75%;
-}
-
-.feat-container-d {
- width: 100%;
- height: 300vh;
- display: flex;
-}
-
-.feat-container-m {
- display: none;
-}
-
-.feat-head-desc {
- font-size: 1.4rem;
- color: #363130;
- opacity: 0.5;
- position: relative;
- left: 17%;
- margin: 0;
- line-height: 1.8;
- width: fit-content;
-}
-
-.feat-desc {
- margin: 10px 0;
- font-size: 1.13rem;
- color: #615d5d;
- font-weight: 700;
- font-family: MaisonNeue-Light, sans-serif;
- width: 65%;
- left: 17%;
-}
-
-.add-left-margin-feat {
- position: absolute;
- left: 34%;
-}
-
-.i-text {
- font-family: MaisonNeue-Demi, sans-serif;
- font-size: 2rem;
- padding: 0 0 200px;
-}
-
-.text-div {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.i-text-desc {
- font-size: 1.13rem;
- color: #615d5d;
- font-weight: 700;
- font-family: MaisonNeue-Light, sans-serif;
-}
-
-.i-image {
- opacity: 1;
- width: auto;
- height: 90%;
- border-radius: 10px;
- max-width: 200%;
- max-height: 100%;
- filter: drop-shadow(0 4px 10px rgb(0 0 0 / 25%));
-}
-
-.n-image {
- opacity: 0;
- width: auto;
- height: 90%;
- border-radius: 10px;
- max-height: 100%;
- max-width: 200%;
- filter: drop-shadow(0 4px 10px rgb(0 0 0 / 25%));
-}
-
-.i-image-col {
- opacity: 1;
- width: 100%;
- height: auto;
- max-height: 100%;
- max-width: 100%;
- margin: 0 0 20px;
- filter: drop-shadow(0 4px 10px rgb(0 0 0 / 25%));
-}
-
-.imagePosition {
- position: absolute;
- bottom: 10px;
- left: 30px;
- max-width: none;
-}
-
-.i-text-col {
- font-family: MaisonNeue-Demi, sans-serif;
- font-size: 2rem;
- top: 0;
-}
-
-.i-text-desc-col {
- font-size: 0.95rem;
- color: #615d5d;
- font-weight: 700;
- font-family: MaisonNeue-Light, sans-serif;
- width: 80%;
-}
-
-.hiddenDiv-col {
- opacity: 0;
-}
-
-.dashboard-playground-link {
- bottom: 14%;
- color: hsl(0deg 0% 80%);
-}
-
-.dashboard-playground-link:hover {
- color: hsl(0deg 0% 80%);
-}
-
-@media (min-width: 1600px) and (max-width: 2080px) {
- .dashboard-playground-link {
- bottom: 18%;
- }
-}
-
-.dashboard-playground {
- background-color: hsl(0deg 100% 0%);
- font-family: MaisonNeue-Bold, sans-serif;
-
- --height: 130px;
- --width: calc(var(--height) * 2.048);
- --radius: calc(var(--height) * 0.168);
-
- height: var(--height);
- width: var(--width);
- border-radius: var(--radius);
- padding: calc(var(--radius) - 6px);
- display: flex;
- flex-direction: column;
- position: relative;
- left: calc(var(--width) * -0.05);
- overflow: hidden;
- transform: scale3d(0.95, 0.95, 1);
- transition: all 200ms cubic-bezier(0.65, 0.05, 0.36, 1);
-}
-
-.dashboard-playground::before {
- content: "";
- width: calc(100% - 6px);
- height: calc(100% - 6px);
- border-radius: inherit;
- position: absolute;
- top: 3px;
- left: 3px;
- backdrop-filter: blur(2px);
- opacity: 0;
- transition: opacity 300ms ease-in-out;
-}
-
-.dashboard-playground::after {
- content: "APISIX";
- position: absolute;
- top: 5px;
- left: -35%;
- font-size: 8.5rem;
- font-weight: bolder;
- line-height: 1;
- color: #fff;
- opacity: 0.06;
-}
-
-.dashboard-playground:hover {
- transform: scale3d(1, 1, 1);
- box-shadow:
- 0 0 0 1px hsl(213deg 26% 28% / 2%),
- 0 3px 2px hsl(0deg 0% 0% / 14%),
- 0 7px 5px hsl(0deg 0% 0% / 12%),
- 0 13px 10px hsl(0deg 0% 0% / 5%),
- 0 22px 17px hsl(0deg 0% 0% / 8%);
-}
-
-.dashboard-playground:active {
- transform: scale3d(0.95, 0.95, 1);
-}
-
-.dashboard-title {
- font-size: 1.35rem;
- font-family: MaisonNeue-ExtraBold, sans-serif;
- white-space: nowrap;
- flex-grow: 1;
- background-image:
- linear-gradient(
- 135deg,
- hsl(0deg 73% 50%),
- hsl(227deg 90% 65%)
- );
- background-clip: text;
- /* stylelint-disable-next-line property-no-vendor-prefix */
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- width: fit-content;
- position: relative;
-}
-
-.dashboard-playground:hover .dashboard-title {
- animation: pulse 3s linear infinite;
-}
-
-@keyframes pulse {
- from {
- filter: hue-rotate(0);
- }
-
- to {
- filter: hue-rotate(360deg);
- }
-}
-
-.dashboard-account {
- font-variant: small-caps;
- line-height: normal;
- letter-spacing: 1px;
- position: relative;
- opacity: 0.8;
-}
-
-.dashboard-account::after {
- content: "↑";
- font-family: MaisonNeue-Light, sans-serif;
- font-size: 2.5rem;
- line-height: 2rem;
- position: absolute;
- top: 2px;
- right: 8px;
- opacity: 0;
- color: hsl(0deg 0% 70%);
- transform: rotate(90deg);
- transition: opacity 300ms ease-in-out;
-}
-
-.dashboard-playground:hover .dashboard-account {
- opacity: 0.9;
-}
-
-.dashboard-playground:hover .dashboard-account::after {
- opacity: 0.6;
- animation: bounce 1.8s ease-in-out infinite;
-}
-
-@keyframes bounce {
- from,
- 20%,
- 53%,
- to {
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- transform: rotate(90deg) translate3d(0, 0, 0);
- }
-
- 40%,
- 43% {
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
- transform: rotate(90deg) translate3d(0, 30px, 0) scaleY(1.1);
- }
-
- 70% {
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
- transform: rotate(90deg) translate3d(0, 15px, 0) scaleY(1.05);
- }
-
- 80% {
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- transform: rotate(90deg) translate3d(0, 0, 0) scaleY(0.95);
- }
-
- 90% {
- transform: rotate(90deg) translate3d(0, 4px, 0) scaleY(1.02);
- }
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.dashboard-account span {
- font-family: MaisonNeue-Medium, sans-serif;
- font-variant: normal;
- letter-spacing: normal;
- font-size: 0.9rem;
-}
-
-.btn-try-demo {
- text-align: center;
- display: block;
- width: 100%;
- border-radius: 6px;
- background-color: #ebedf0;
- color: #615d5d;
- transition: all 300ms;
-}
-
-.btn-try-demo:hover {
- color: currentcolor;
- background-color: rgb(0 0 0 / 30%);
-}
-
-/* benefits section */
-.row-benefit {
- margin: 100px 5px;
- display: flex;
- justify-content: center;
- align-items: center;
- height: fit-content;
-}
-
-.benefit {
- background: #fff8f6;
- padding: 50px 0;
-}
-
-.benefit-infograph {
- width: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-/* Comparison table section */
-.compare {
- padding: 50px 0;
-}
-
-.table tbody td:nth-child(even) {
- background: rgb(14 30 37 / 2%);
-}
-
-.table tbody tr:nth-child(odd) {
- background: rgb(14 30 37 / 2%);
-}
-
-.table thead {
- font-size: 1.13rem;
-}
-
-.table {
- background: #fff;
- border-radius: 8px;
- box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 2px 4px 0 rgb(14 30 37 / 12%);
- color: rgb(14 30 37 / 87%);
- font-size: 1.13rem;
- margin: 1em auto;
- border-collapse: collapse;
- max-width: 100%;
- overflow-x: auto;
- table-layout: fixed;
- width: 66.4%;
- font-family: MaisonNeue-Light, sans-serif;
- display: table;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.table td,
-.table th {
- font-weight: 700;
- min-width: 11.089em;
- padding: 0.85rem 1rem;
- text-align: center;
-}
-
-.table-head {
- font-weight: 900;
- font-family: MaisonNeue-Demi, sans-serif;
- font-size: 1.25rem;
-}
-
-.table tbody th {
- font-weight: 700;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.table td:first-child,
-.table th:first-child {
- text-align: left;
-}
-
-/* opensource and docs promotion */
-.docs-promo {
- display: flex;
- padding: 100px 0;
- background: #fff8f6;
- justify-content: center;
-}
-
-.docs-promo-text {
- display: flex;
- justify-content: center;
- flex-flow: column;
-}
-
-.docs-promo-video {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 50%;
-}
-
-.docs-promo-video > iframe {
- width: 500px;
- height: 288px;
-}
-
-.docs-promo-video .vjs-has-started .vjs-big-play-button {
- display: none !important;
-}
-
-.oss-promo {
- display: flex;
- padding: 80px 0;
- justify-content: center;
- background: #121010;
- color: white;
-}
-
-.oss-promo-inwrapper {
- display: flex;
- flex-direction: column;
- text-align: left;
-}
-
-.oss-promo-head {
- font-size: 2.4rem;
-}
-
-.oss-promo-subtitle {
- font-size: 1.13rem;
- color: #615d5d;
- letter-spacing: 0.2px;
- font-family: MaisonNeue-Light, sans-serif;
- font-weight: 700;
- text-align: center;
-}
-
-.oss-promo-cta {
- margin: 0 auto;
- background: #080808;
- display: flex;
- width: fit-content;
- font-size: 0.95rem;
- border-style: solid;
- border-radius: 32px;
- border-width: 1.75px;
- padding: 5px 12px;
- transition: background 0.5s;
-}
-
-.oss-promo a {
- color: white;
-}
-
-.oss-promo-cta:hover {
- background: hsl(0deg 100% 100% / 80%);
- color: #080808;
-}
-
-.oss-promo-cta:hover > a {
- color: #080808;
-}
-
-/* Events and newsletter */
-.event-card-container {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
-}
-
-.event-card {
- border-style: solid;
- border-color: #fff;
- box-shadow: 0 4px 23px rgb(0 0 0 / 10%);
- font-size: 0.95rem;
- font-family: MaisonNeue-Light, sans-serif;
- font-weight: 700;
- padding: 20px;
- width: 230px;
- height: 200px;
- margin: 0 20px;
- border-radius: 10px;
- position: relative;
-}
-
-.event-card-title {
- position: absolute;
- top: 25px;
-}
-
-.event-card-time {
- position: absolute;
- top: 55%;
- color: #6a6a6a;
-}
-
-.event-card-read {
- position: absolute;
- bottom: 25px;
-}
-
-.newsletter {
- display: flex;
- font-weight: 700;
- font-family: MaisonNeue-Light, sans-serif;
- font-size: 0.95rem;
- color: #615d5d;
- letter-spacing: 0.2px;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- margin: 25px 0;
-}
-
-.news-button {
- border: none;
- padding: 5px 30px;
- border-style: solid;
- border-radius: 20px;
- background: #030c16;
- color: white;
- margin: 0;
- text-decoration: none;
- transition: all 0.3s;
-}
-
-.news-button:hover {
- background: #9b9b9b;
- color: white;
- text-decoration: none;
-}
-
-.endcta-text {
- text-align: center;
- font-size: 3.5rem;
- font-family: MaisonNeue-ExtraBold, sans-serif;
-}
-
-.endcta-btns {
- display: flex;
- justify-content: center;
- padding-bottom: 2rem;
-}
-
-.rocket {
- width: 6vw;
- height: auto;
- transform: rotate(45deg);
-}
-
-/* footer */
-.footer__title {
- font-family: MaisonNeue-Medium, sans-serif !important;
-}
-
-.footer__links .footer__title {
- font-weight: 700;
- font-size: 1.1rem;
-}
-
-.footer__links .footer__item a {
- opacity: 0.94;
-}
-
-.footer__links a:hover {
- opacity: 1;
- text-decoration: none;
-}
-
-.footer__bottom {
- margin-top: 36px;
-}
-
-.footer__bottom a[href^="https://www.apache.org/"] {
- opacity: 1;
-}
-
-.footer__bottom a[href^="https://www.apache.org/"]:hover {
- transform: scale(0.5);
-}
-
-.footer__bottom a[href^="https://www.apache.org/"] img {
- margin-top: 0;
- background: white;
- padding: 8px 20px 6px 19px;
- border-radius: 24px;
-}
-
-.footer__copyright {
- font-size: 12px;
- max-width: 680px;
- margin: 0 auto;
- opacity: 0.88;
-}
-
-/* help page */
-.help-page .cards {
- margin-top: 38px;
- margin-bottom: 56px;
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-gap: 36px;
-}
-
-.help-page .card {
- padding: 24px 28px 18px;
- border: 1px solid #eee;
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 3%);
-}
-
-.help-page .card .header {
- padding: 0;
-}
-
-.help-page .card h2 {
- display: flex;
- align-items: center;
-}
-
-.help-page .card h2 img {
- padding-bottom: 2px;
- height: 28px;
- margin-right: 14px;
-}
-
-.help-page #documents-icon {
- margin-right: 10px;
- margin-left: -6px;
-}
-
-.help-page .card p {
- color: var(--color-help-subtitle);
-}
-
-.help-page .card .buttons {
- margin-top: 18px;
- display: flex;
-}
-
-.help-page .card .buttons svg {
- height: 12px;
- margin-left: 4px;
- transition: transform 0.3s;
-}
-
-.help-page .card .buttons a {
- font-size: 18px;
- font-weight: 600;
- transition: all 0.3s;
- margin-right: 32px;
-}
-
-.help-page .card .buttons a:hover {
- text-decoration: none;
-}
-
-.help-page .card .buttons a:hover svg {
- transform: translateX(2px);
-}
-
-.team-githubLogo {
- height: 24px;
-}
-
-.downloads-subtitle {
- color: var(--color-downloads-subtitle);
-}
-
-.downloads-leftsidelinks {
- color: var(--color-downloads-leftsidelinks);
-}
-
-.downloads-leftsidelink:hover {
- color: var(--color-downloads-leftsidelink-hover);
-}
-
-.downloads-versioninfo {
- color: var(--color-downloads-rightside-versioninfo);
-}
-
-.downloads-versioninfo-span {
- color: var(--color-downloads-rightside-versioninfo-span);
-}
-
-.downloads-dropdown {
- background-color: var(--color-downloads-dropdown);
-}
-
-.download-dropdown-item:hover {
- background-color: var(--color-downloads-dropdown-items);
-}
-
-.team-repocard {
- color: var(--color-team-repocard);
-}
-
-.team-repocard:hover {
- color: var(--color-team-repocard-hover);
-}
-
-.docs-subtitle {
- color: var(--color-docs-subtitle);
-}
-
-.docs-versioninfo {
- color: var(--color-docs-versioninfo);
-}
-
-.pic-wrapper {
- width: 350px;
- position: fixed;
- display: flex;
- right: 0;
- bottom: 0;
- z-index: 999;
- outline: 0;
- overflow: auto;
- border: 0;
- box-shadow: 0 0 20px -12px #626365;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.pic-wrapper a {
- display: flex;
-}
-
-.pic-wrapper-close {
- position: absolute;
- z-index: 1000;
- top: 10px;
- right: 10px;
- padding: 5px;
- font-weight: 900;
- color: rgb(135 151 172);
- font-size: 16px;
- outline: none;
- border-radius: 100px;
- border: 1px solid transparent;
-}
-
-.pic-wrapper-close:hover {
- cursor: pointer;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.pic-wrapper-close svg {
- width: 10px;
- height: 10px;
- display: inherit;
-}
-
-@media only screen and (max-width: 440px) {
- .pic-wrapper {
- width: 70%;
- }
-}
-
-/* plugin hub section */
-.plugin-logo {
- margin-top: 10px;
- max-width: 250px;
- max-height: 180px;
- transform: scale(1);
- transition: transform 0.5s ease;
-}
-
-.plugin-logo.default {
- opacity: 0.2;
-}
-
-.overflow {
- overflow: hidden;
-}
-
-.plugin-logo:hover {
- transform: scale(1.2);
-}
-
-.read-more-link {
- color: #d0312d;
- font-size: 0.8rem;
- font-weight: 500;
- text-align: left;
- padding-bottom: 2px;
- display: flex;
-}
-
-.read-more-link:hover {
- color: var(--color-primary);
- text-decoration: var(--ifm-link-hover-decoration);
-}
-
-/* Sidebar Section */
-.sidebar-link {
- color: #d0312d;
-}
-
-.sidebar-link :hover {
- color: #ffb3b3;
-}
-
-/* Mobile-phones and tablet styles */
-@media only screen and (min-width: 300px) and (max-width: 1100px) {
- body {
- overflow-x: hidden !important;
- }
-
- .hero-sec-wrap {
- display: block;
- height: fit-content;
- }
-
- .homeCanvas-overlay {
- position: absolute;
- width: 100vw;
- height: 50vh;
- background: #ebe6dc;
- top: -1px;
- right: 0;
- }
-
- .hero-text {
- height: 50%;
- width: 100%;
- padding: 5rem 0 0 6vw;
- }
-
- .hero-title {
- width: 100vw;
- font-size: 3.4rem;
- }
-
- .hero-subtitle {
- font-size: 1.05rem;
- line-height: 28px;
- margin: 25px 0 24px;
- padding-right: 20px;
- }
-
- .add-margin {
- margin: 30px 0 0;
- }
-
- .homeCanvas {
- width: 100vw;
- height: 50vh;
- }
-
- .hero-infograph {
- overflow: hidden;
- }
-
- .hldesign-graphic {
- width: 100%;
- }
-
- .arch-scale-svg {
- display: none;
- }
-
- .arch-card-border {
- width: 100%;
- left: 0;
- top: 10px;
- }
-
- .arch-head,
- .compare-head,
- .testimonials-head,
- .docs-promo-head,
- .oss-promo-head {
- left: 7%;
- width: 83%;
- }
-
- .arch-subtitle,
- .compare-subtitle,
- .testimonials-subtitle,
- .docs-promo-subtitle,
- .oss-promo-subtitle {
- left: 7%;
- width: 85%;
- }
-
- .add-left-margin {
- position: relative;
- left: 7%;
- }
-
- .add-left-margin-feat {
- position: absolute;
- left: 7%;
- }
-
- .bottom-pos {
- bottom: 34%;
- }
-
- .feat-head {
- font-size: 2.13rem;
- width: 84%;
- }
-
- .feat-head-desc {
- left: 7%;
- }
-
- .feat-desc {
- width: 83%;
- left: 7%;
- }
-
- .feat-container-d {
- display: none;
- }
-
- .feat-container-m {
- display: block;
- }
-
- .benefit {
- background: #fff8f6;
- padding: 50px 0;
- height: 100vh;
- }
-
- .row-benefit {
- margin: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-flow: column-reverse;
- position: absolute;
- height: 100vh;
- width: 100vw;
- }
-
- .benefit-infograph {
- width: 100%;
- padding: 0 0 60px;
- }
-
- .row-reverse {
- flex-flow: column;
- }
-
- .row-hidden {
- opacity: 0;
- }
-
- .table {
- width: 100%;
- display: block;
- }
-
- .docs-promo {
- flex-flow: column-reverse;
- padding: 50px 0;
- }
-
- .docs-promo-video {
- width: 100%;
- }
-
- .docs-promo-video > video {
- padding: 0 26px 35px;
- width: 100%;
- height: auto;
- }
-
- .oss-promo {
- flex-flow: column;
- background: #121010;
- padding: 50px 0 0;
- }
-
- .oss-promo-text {
- width: 100%;
- }
-
- .oss-promo-infograph {
- width: 100%;
- margin-top: 30px;
- }
-
- .event-card {
- margin: 0 20px 20px;
- }
-
- .event-card-container {
- flex-flow: column;
- }
-
- .newsletter > p {
- text-align: center;
- }
-
- .endcta-text {
- font-size: 1.7rem;
- }
-
- .navbar {
- transform: none !important;
- }
-
- .rocket {
- width: 12vw;
- height: auto;
- transform: rotate(45deg);
- }
-}
-
-@media only screen and (min-height: 500px) and (max-height: 670px) {
- .benefit-infograph {
- width: 70%;
- padding: 0 0 60px;
- }
-}
-
-@media only screen and (min-width: 768px) {
- .react-toggle {
- display: none;
- }
-
- .arch-card-caption > p {
- width: 50%;
- }
-}
-
-.bottom-pos {
- bottom: 34%;
-}
-
-@media only screen and (min-device-width: 768px) and (max-device-width: 1100px) {
- .feat-container-d {
- display: none;
- }
-
- .feat-container-m {
- display: block;
- }
-}
-
-@media only screen and (min-device-width: 300px) and (max-device-width: 360px) {
- .hero-title {
- font-size: 2.95rem;
- }
-
- .hero-infograph {
- overflow: hidden;
- }
-
- .endcta-text {
- font-size: 1.6rem;
- }
-
- .arch-head,
- .compare-head,
- .testimonials-head,
- .docs-promo-head,
- .oss-promo-head {
- left: 7%;
- width: 93%;
- }
-
- .benefit .feat-desc {
- font-size: 0.85rem;
- }
-
- .oss-promo-infograph {
- overflow: hidden;
- }
-}
-
-@media (min-width: 1600px) and (max-width: 2080px) {
- .hero-title {
- width: 40vw;
- font-size: 5.2rem;
- }
-
- .hero-subtitle {
- width: 40vw;
- }
-
- .bottom-pos {
- bottom: 38%;
- }
-
- .arch-scale-svg {
- transform: scale(1.2);
- }
-}
-
-.rc-image {
- display: inline-flex;
- position: relative;
-}
-
-.rc-image-img {
- width: 100%;
- height: auto;
-}
-
-.rc-image-img-placeholder {
- background-color: #f3f3f3;
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjhweCIgaGVpZ2h0PSIyMnB4IiB2aWV3Qm94PSIwIDAgMjggMjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1LjIgKDc4MTgxKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5pbWFnZS1maWxs5aSH5Lu9PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgP [...]
-}
-
-.rc-image-placeholder {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
-}
-
-.rc-image-mask {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- background: rgb(0 0 0 / 30%);
- opacity: 0;
- pointer-events: none;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- transition: opacity 0.3s;
-}
-
-.rc-image:hover .rc-image-mask {
- opacity: 1;
-}
-
-.rc-image-preview {
- text-align: center;
- height: 100%;
- pointer-events: none;
-}
-
-.rc-image-preview-body {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
-}
-
-.rc-image-preview.zoom-enter,
-.rc-image-preview.zoom-appear {
- transform: none;
- opacity: 0;
- animation-duration: 0.3s;
-}
-
-.rc-image-preview-mask {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 1000;
- height: 100%;
- background-color: #000;
- opacity: 0.8;
-}
-
-.rc-image-preview-mask-hidden {
- display: none;
-}
-
-.rc-image-preview-img {
- cursor: grab;
- transform: scale3d(1, 1, 1);
- transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
- user-select: none;
- vertical-align: middle;
- max-width: 100%;
- max-height: 100%;
- pointer-events: auto;
-}
-
-.rc-image-preview-img-wrapper {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
-}
-
-.rc-image-preview-img-wrapper::before {
- content: "";
- display: inline-block;
- height: 50%;
- width: 1px;
- margin-right: -1px;
-}
-
-.rc-image-preview-moving .rc-image-preview-img {
- cursor: grabbing;
-}
-
-.rc-image-preview-moving .rc-image-preview-img-wrapper {
- transition-duration: 0s;
-}
-
-.rc-image-preview-wrap {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 1000;
- overflow: auto;
- outline: 0;
- -webkit-overflow-scrolling: touch;
-}
-
-.rc-image-preview-operations {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- pointer-events: auto;
- list-style: none;
- position: absolute;
- display: flex;
- top: 0;
- right: 0;
- width: 100%;
- align-items: center;
- flex-direction: row-reverse;
- z-index: 1;
- color: #bbb;
- background: rgb(0 0 0 / 45%);
-}
-
-.rc-image-preview-operations-progress {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
-}
-
-.rc-image-preview-operations-operation {
- padding: 10px;
- cursor: pointer;
- margin-left: 10px;
-}
-
-.rc-image-preview-operations-operation-disabled {
- pointer-events: none;
- color: #6f6f6f;
-}
-
-.rc-image-preview-operations-operation:last-of-type {
- margin-left: 0;
-}
-
-.rc-image-preview-operations-icon {
- font-size: 18px;
-}
-
-.rc-image-preview-switch-left {
- position: absolute;
- left: 10px;
- top: 50%;
- width: 44px;
- height: 44px;
- margin-top: -22px;
- background: rgb(187 187 187 / 45%);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1;
- pointer-events: auto;
- color: #bbb;
-}
-
-.rc-image-preview-switch-left-disabled {
- background: rgb(187 187 187 / 30%);
- color: #6f6f6f;
- cursor: not-allowed;
-}
-
-.rc-image-preview-switch-left-disabled > .anticon {
- cursor: not-allowed;
-}
-
-.rc-image-preview-switch-left > .anticon {
- font-size: 24px;
-}
-
-.rc-image-preview-switch-right {
- position: absolute;
- right: 10px;
- top: 50%;
- width: 44px;
- height: 44px;
- margin-top: -22px;
- background: rgb(187 187 187 / 45%);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1;
- pointer-events: auto;
- color: #bbb;
-}
-
-.rc-image-preview-switch-right-disabled {
- background: rgb(187 187 187 / 20%);
- color: #6f6f6f;
- cursor: not-allowed;
-}
-
-.rc-image-preview-switch-right-disabled > .anticon {
- cursor: not-allowed;
-}
-
-.rc-image-preview-switch-right > .anticon {
- font-size: 24px;
-}
-
-.fade-enter,
-.fade-appear {
- animation-duration: 0.2s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-
-.fade-leave {
- animation-duration: 0.2s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-
-.fade-enter.fade-enter-active,
-.fade-appear.fade-appear-active {
- animation-name: rc-image-fade-in;
- animation-play-state: running;
-}
-
-.fade-leave.fade-leave-active {
- animation-name: rc-image-fade-out;
- animation-play-state: running;
- pointer-events: none;
-}
-
-/* stylelint-disable-next-line no-duplicate-selectors */
-.fade-enter,
-.fade-appear {
- opacity: 0;
- animation-timing-function: linear;
-}
-
-/* stylelint-disable-next-line no-duplicate-selectors */
-.fade-leave {
- animation-timing-function: linear;
-}
-
-@keyframes rc-image-fade-in {
- 0% {
- opacity: 0;
- }
-
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes rc-image-fade-out {
- 0% {
- opacity: 1;
- }
-
- 100% {
- opacity: 0;
- }
-}
-
-.zoom-enter,
-.zoom-appear {
- animation-duration: 0.2s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-
-.zoom-leave {
- animation-duration: 0.2s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-
-.zoom-enter.zoom-enter-active,
-.zoom-appear.zoom-appear-active {
- animation-name: rc-image-zoom-in;
- animation-play-state: running;
-}
-
-.zoom-leave.zoom-leave-active {
- animation-name: rc-image-zoom-out;
- animation-play-state: running;
- pointer-events: none;
-}
-
-/* stylelint-disable-next-line no-duplicate-selectors */
-.zoom-enter,
-.zoom-appear {
- transform: scale(0);
- opacity: 0;
- animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
-}
-
-/* stylelint-disable-next-line no-duplicate-selectors */
-.zoom-leave {
- animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
-}
-
-@keyframes rc-image-zoom-in {
- 0% {
- transform: scale(0.2);
- opacity: 0;
- }
-
- 100% {
- transform: scale(1);
- opacity: 1;
- }
-}
-
-@keyframes rc-image-zoom-out {
- 0% {
- transform: scale(1);
- }
-
- 100% {
- transform: scale(0.2);
- opacity: 0;
- }
-}
diff --git a/doc/src/css/customTheme.scss b/doc/src/css/customTheme.scss
new file mode 100644
index 00000000000..76c1f82a56d
--- /dev/null
+++ b/doc/src/css/customTheme.scss
@@ -0,0 +1,478 @@
+/* stylelint-disable custom-property-pattern */
+
+:root {
+ --ifm-color-primary-lightest: rgb(228 222 222);
+ --ifm-color-primary-lighter: #d0312d;
+ --ifm-color-primary-light: #f8f8fa;
+ --ifm-color-primary: #e8433e;
+ --ifm-color-dark: #000;
+ --ifm-color-primary-dark: #a5a0a0;
+ --ifm-color-primary-darker: #9a2521;
+ --ifm-color-shadow--lw: #7f1e1b;
+ --color-title: #101827;
+ --color-github-button: #101827;
+ --color-github-button-hover: #000;
+ --color-primary: #e8433e;
+ --color-subtitle: #000;
+ --color-secondary: #4b5563;
+ --color-secondary-bg: #f3f4f6;
+ --color-secondary-text: #444952;
+ --color-border: #eee;
+ --color-downloads-subtitle: #374051;
+ --color-downloads-leftsidelinks: #4b5563;
+ --color-downloads-leftsidelink-hover: #111827;
+ --color-downloads-rightside-versioninfo: #6b7280;
+ --color-downloads-rightside-versioninfo-span: #374151;
+ --color-team-repocard: #374151;
+ --color-team-repocard-hover: #111827;
+ --color-docs-subtitle: #374151;
+ --color-docs-versioninfo: #4b5563;
+ --color-help-subtitle: #6b7280;
+ --color-downloads-dropdown: #fff;
+ --color-downloads-dropdown-items: #f3f4f6;
+}
+
+html[data-theme="dark"] {
+ --color-secondary-bg: #121212;
+ --ifm-color-dark: #b0b0b0;
+ --color-title: #f0f0f0;
+ --color-subtitle: #f0f0f0;
+ --color-github-button: #121212;
+ --color-secondary-text: #b0b0b0;
+ --color-border: #b0b0b0;
+ --color-downloads-subtitle: #f0f0f0;
+ --color-downloads-leftsidelinks: #909397;
+ --color-downloads-leftsidelink-hover: #f0f0f0;
+ --color-downloads-rightside-versioninfo: #f0f0f0;
+ --color-downloads-rightside-versioninfo-span: #909397;
+ --color-team-repocard: #f0f0f0;
+ --color-team-repocard-hover: #909397;
+ --color-docs-subtitle: #f0f0f0;
+ --color-docs-versioninfo: #b0b0b0;
+ --color-help-subtitle: #f0f0f0;
+ --color-downloads-dropdown: #18191a;
+ --color-downloads-dropdown-items: #4c4e50;
+}
+
+@font-face {
+ font-family: MaisonNeue-Medium;
+ src:
+ local("MaisonNeue-Medium"),
+ url("https://static.apiseven.com/202202/MaisonNeue-Medium.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+@font-face {
+ font-family: MaisonNeue-Bold;
+ src:
+ local("MaisonNeue-Bold"),
+ url("https://static.apiseven.com/202202/MaisonNeue-Bold.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+@font-face {
+ font-family: MaisonNeue-Light;
+ src:
+ local("MaisonNeue-Light"),
+ url("https://static.apiseven.com/202202/MaisonNeue-Light.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+@font-face {
+ font-family: MaisonNeue-Demi;
+ src:
+ local("MaisonNeue-Demi"),
+ url("https://static.apiseven.com/202202/MaisonNeue-Demi.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+@font-face {
+ font-family: MaisonNeue-ExtraBold;
+ src:
+ local("MaisonNeue-ExtraBold"),
+ url("https://static.apiseven.com/202202/MaisonNeue-ExtraBold.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+body {
+ overflow-x: hidden;
+}
+
+body,
+h1,
+h2,
+h3 {
+ font-family: MaisonNeue-Medium, apple-system, system-ui, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizelegibility;
+ text-size-adjust: 100%;
+}
+
+div.inner {
+ color: var(--ifm-color-primary);
+}
+
+.image {
+ padding: 75px 10px 75px 75px;
+}
+
+.more-users {
+ padding-top: 75px;
+}
+
+.post-header {
+ padding-top: 50px;
+}
+
+.header {
+ padding-top: 50px;
+}
+
+.color-primary {
+ color: var(--ifm-color-primary);
+}
+
+header h2 {
+ color: var(--color-primary);
+}
+
+@media only screen and (max-width: 414px) {
+ .hide-on-mobile {
+ display: none;
+ }
+}
+
+/* navbar */
+.navbar__link:hover,
+.navbar__link--active {
+ color: var(--color-primary);
+}
+
+.navbar__title {
+ font-size: 18px;
+ height: 30px;
+}
+
+/* button */
+.button {
+ margin: 0 10px;
+ padding: 12px 24px;
+ font-size: 18px;
+ font-weight: 600;
+ border-radius: 10px;
+ border: none;
+ background: #fee2e2;
+ color: #ef4444;
+ transition: all 0.3s;
+}
+
+.button:hover {
+ background: #fecaca;
+ color: #ef4444;
+}
+
+.button.github {
+ background: var(--color-github-button);
+ color: white;
+ display: inline-flex;
+ align-items: center;
+ margin-bottom: 15px;
+}
+
+.button.github .github-logo {
+ height: 24px;
+ margin: 0 12px 1px 0;
+}
+
+.button.github:hover {
+ background: var(--color-github-button-hover);
+}
+
+.button-wrapper {
+ margin: 0 -10px;
+}
+
+.button.secondary {
+ background: #f3f4f6;
+ color: #1f2937;
+ border: 1px solid #d1d5db;
+ box-sizing: border-box;
+ margin-bottom: 15px;
+}
+
+.button.secondary:hover {
+ background: #e5e7eb;
+}
+
+@media only screen and (max-width: 414px) {
+ .button {
+ margin: 0;
+ }
+
+ .button.secondary,
+ .button.github {
+ width: 100%;
+ }
+
+ .button-wrapper {
+ margin: 0;
+ }
+}
+
+a {
+ color: var(--ifm-color-dark);
+ cursor: pointer;
+}
+
+a:hover {
+ color: var(--color-primary);
+ text-decoration: none;
+}
+
+.markdown a {
+ color: var(--color-primary);
+}
+
+.arrow-btn {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1002;
+}
+
+/* Sidebar Section */
+.sidebar-link {
+ color: #d0312d;
+}
+
+.sidebar-link :hover {
+ color: #ffb3b3;
+}
+
+.arch-head,
+.compare-head,
+.testimonials-head,
+.docs-promo-head {
+ font-size: 2.4rem;
+ position: relative;
+ left: 16.8%;
+ width: 83.2%;
+}
+
+.arch-subtitle,
+.compare-subtitle,
+.testimonials-subtitle,
+.docs-promo-subtitle {
+ font-size: 1.13rem;
+ position: relative;
+ left: 16.8%;
+ width: 70%;
+ color: #615d5d;
+ letter-spacing: 0.2px;
+ font-family: MaisonNeue-Light, sans-serif;
+ font-weight: 700;
+}
+
+.add-left-margin {
+ position: relative;
+ left: 16.8%;
+}
+
+/* Mobile-phones and tablet styles */
+@media only screen and (min-width: 300px) and (max-width: 1100px) {
+ body {
+ overflow-x: hidden !important;
+ }
+
+ .hero-sec-wrap {
+ display: block;
+ height: fit-content;
+ }
+
+ .homeCanvas-overlay {
+ position: absolute;
+ width: 100vw;
+ height: 50vh;
+ background: #ebe6dc;
+ top: -1px;
+ right: 0;
+ }
+
+ .hero-text {
+ height: 50%;
+ width: 100%;
+ padding: 5rem 0 0 6vw;
+ }
+
+ .hero-title {
+ width: 100vw;
+ font-size: 3.4rem;
+ }
+
+ .hero-subtitle {
+ font-size: 1.05rem;
+ line-height: 28px;
+ margin: 25px 0 24px;
+ padding-right: 20px;
+ }
+
+ .add-margin {
+ margin: 30px 0 0;
+ }
+
+ .homeCanvas {
+ width: 100vw;
+ height: 50vh;
+ }
+
+ .hero-infograph {
+ overflow: hidden;
+ }
+
+ .add-left-margin {
+ position: relative;
+ left: 7%;
+ }
+
+ .add-left-margin-feat {
+ position: absolute;
+ left: 7%;
+ }
+
+ .bottom-pos {
+ bottom: 34%;
+ }
+
+ .feat-head {
+ font-size: 2.13rem;
+ width: 84%;
+ }
+
+ .feat-head-desc {
+ left: 7%;
+ }
+
+ .feat-desc {
+ width: 83%;
+ left: 7%;
+ }
+
+ .feat-container-d {
+ display: none;
+ }
+
+ .feat-container-m {
+ display: block;
+ }
+
+ .benefit {
+ background: #fff8f6;
+ padding: 50px 0;
+ height: 100vh;
+ }
+
+ .row-benefit {
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-flow: column-reverse;
+ position: absolute;
+ height: 100vh;
+ width: 100vw;
+ }
+
+ .benefit-infograph {
+ width: 100%;
+ padding: 0 0 60px;
+ }
+
+ .row-reverse {
+ flex-flow: column;
+ }
+
+ .row-hidden {
+ opacity: 0;
+ }
+
+ .table {
+ width: 100%;
+ display: block;
+ }
+}
+
+@media only screen and (min-height: 500px) and (max-height: 670px) {
+ .benefit-infograph {
+ width: 70%;
+ padding: 0 0 60px;
+ }
+}
+
+@media only screen and (min-width: 768px) {
+ .react-toggle {
+ display: none;
+ }
+
+ .arch-card-caption > p {
+ width: 50%;
+ }
+}
+
+.bottom-pos {
+ bottom: 34%;
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1100px) {
+ .feat-container-d {
+ display: none;
+ }
+
+ .feat-container-m {
+ display: block;
+ }
+}
+
+@media only screen and (min-device-width: 300px) and (max-device-width: 360px) {
+ .hero-title {
+ font-size: 2.95rem;
+ }
+
+ .hero-infograph {
+ overflow: hidden;
+ }
+
+ .endcta-text {
+ font-size: 1.6rem;
+ }
+
+ .arch-head,
+ .compare-head,
+ .testimonials-head,
+ .docs-promo-head,
+ .oss-promo-head {
+ left: 7%;
+ width: 93%;
+ }
+
+ .benefit .feat-desc {
+ font-size: 0.85rem;
+ }
+
+ .oss-promo-infograph {
+ overflow: hidden;
+ }
+}
+
+@media (min-width: 1600px) and (max-width: 2080px) {
+ .bottom-pos {
+ bottom: 38%;
+ }
+
+ .arch-scale-svg {
+ transform: scale(1.2);
+ }
+}
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index c4acf11da12..615a53194eb 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -66,7 +66,7 @@ module.exports = {
},
blog: false,
theme: {
- customCss: require.resolve('./src/css/customTheme.css'),
+ customCss: require.resolve('./src/css/customTheme.scss'),
},
sitemap: {
changefreq: 'daily',
diff --git a/website/src/components/HeroCanvas.tsx b/website/src/components/HeroCanvas.tsx
index a3df0090ddb..32b13accfb8 100644
--- a/website/src/components/HeroCanvas.tsx
+++ b/website/src/components/HeroCanvas.tsx
@@ -13,6 +13,7 @@ import {
BufferAttribute,
Scene,
DoubleSide,
+ Clock,
} from 'three';
import { gsap } from 'gsap/gsap-core';
@@ -35,6 +36,9 @@ const HeroCanvas: FC = () => {
let isLoaded = false;
let isRendering = false;
let animationFrame: number;
+ const clock = new Clock();
+ let delta = 0;
+ const interval = 1 / 30;
useEffect(() => {
screenWidth = window.innerWidth;
@@ -100,7 +104,7 @@ const HeroCanvas: FC = () => {
const canvasObserver = new IntersectionObserver(onCanvasIntersection, {
root: null,
- threshold: 0.01,
+ threshold: 0.1,
});
init(canvasWidth, canvasHeight);
@@ -231,10 +235,17 @@ const HeroCanvas: FC = () => {
function animate() {
animationFrame = requestAnimationFrame(animate);
- material.uniforms.u_time.value += 0.05;
- controls.update();
- renderer.render(scene, camera);
- isRendering = true;
+ delta += clock.getDelta();
+
+ if (delta > interval) {
+ // The draw or time dependent code are here
+ material.uniforms.u_time.value += 0.05;
+ controls.update();
+ renderer.render(scene, camera);
+ isRendering = true;
+
+ delta %= interval;
+ }
}
return () => {
diff --git a/website/src/components/sections/Architecture.tsx b/website/src/components/sections/Architecture.tsx
index 2a5f03a4af7..3f3a0695ede 100644
--- a/website/src/components/sections/Architecture.tsx
+++ b/website/src/components/sections/Architecture.tsx
@@ -5,6 +5,7 @@ import Translate from '@docusaurus/Translate';
import HLDesign from '../../assets/images/infographs/Architecture-min.svg';
import Pattern from '../../assets/images/PatternGrouped-min.svg';
+import '../../css/landing-sections/architecture.scss';
const Architecture: FC = () => (
<div className="arch">
@@ -22,14 +23,16 @@ const Architecture: FC = () => (
}}
/>
<h3 className="arch-head">
- <Translate id="architecture.component.title.name">Building for large-scale, high value systems</Translate>
+ <Translate id="architecture.component.title.name">
+ Building for large-scale, high value systems
+ </Translate>
</h3>
<div className="arch-subtitle">
<p>
<Translate id="architecture.component.title.subtitle">
Apache APISIX provides open source API Gateway to help you manage microservices,
- delivering the ultimate performance, security,
- and scalable platform for all your APIs and microservices.
+ delivering the ultimate performance, security, and scalable platform for all your APIs and
+ microservices.
</Translate>
</p>
</div>
@@ -40,9 +43,8 @@ const Architecture: FC = () => (
<div className="arch-card-caption">
<p>
<Translate id="architecture.component.card.caption">
- Apache APISIX is based on NGINX and etcd.
- Compared with traditional API Gateways,
- APISIX has features like dynamic routing and hot-loading plugins, etc.
+ Apache APISIX is based on NGINX and etcd. Compared with traditional API Gateways, APISIX
+ has features like dynamic routing and hot-loading plugins, etc.
</Translate>
</p>
</div>
diff --git a/website/src/components/sections/Benefits.tsx b/website/src/components/sections/Benefits.tsx
index 396384007f0..e7bc3277ed1 100644
--- a/website/src/components/sections/Benefits.tsx
+++ b/website/src/components/sections/Benefits.tsx
@@ -14,6 +14,8 @@ import Dynamic from '../../assets/images/infographs/dynamic.svg';
import Multiplatform from '../../assets/images/infographs/multiplatform.svg';
import useWindowSize from '../../hooks/useWindowSize';
+import '../../css/landing-sections/benefits.scss';
+
const Benefits: FC = () => {
const triggerDiv = useRef(null);
const performance = useRef(null);
@@ -30,17 +32,19 @@ const Benefits: FC = () => {
const observers = [];
for (let i = 0; i < 5; i += 1) {
- tweenTls.push(gsap.timeline({
- paused: true,
- yoyo: true,
- yoyoEase: 'power3.out',
- repeat: -1,
- defaults: {
+ tweenTls.push(
+ gsap.timeline({
+ paused: true,
yoyo: true,
- ease: 'power3.inOut',
yoyoEase: 'power3.out',
- },
- }));
+ repeat: -1,
+ defaults: {
+ yoyo: true,
+ ease: 'power3.inOut',
+ yoyoEase: 'power3.out',
+ },
+ })
+ );
}
const circles = [];
@@ -54,105 +58,148 @@ const Benefits: FC = () => {
}
// Performance anim
- tweenTls[0].fromTo('.performance_svg__network', {
- strokeDashoffset: 1000,
- stroke: 'black',
- }, {
- strokeDashoffset: 0,
- duration: 1,
- strokeWidth: 5,
- stroke: 'orange',
- ease: 'power2.in',
- yoyoEase: 'power2.out',
- repeat: -1,
- })
- .fromTo('.performance_svg__lightning', {
- fill: 'orange',
- }, {
- fill: 'red',
- duration: 1,
- repeat: -1,
- }, '-=1');
+ tweenTls[0]
+ .fromTo(
+ '.performance_svg__network',
+ {
+ strokeDashoffset: 1000,
+ stroke: 'black',
+ },
+ {
+ strokeDashoffset: 0,
+ duration: 1,
+ strokeWidth: 5,
+ stroke: 'orange',
+ ease: 'power2.in',
+ yoyoEase: 'power2.out',
+ repeat: -1,
+ }
+ )
+ .fromTo(
+ '.performance_svg__lightning',
+ {
+ fill: 'orange',
+ },
+ {
+ fill: 'red',
+ duration: 1,
+ repeat: -1,
+ },
+ '-=1'
+ );
// Security anim
- tweenTls[1].fromTo(['.security_svg__malWarn-square', '.security_svg__malConn'], {
- fill: '#FA5252',
- }, {
- fill: 'yellow',
- duration: 0.5,
- repeat: -1,
- repeatDelay: 0.1,
- });
- for (let i = 1; i < 4; i += 1) {
- tweenTls[1].fromTo(`.security_svg__conn${i}`, {
- strokeWidth: 4,
- strokeDasharray: 25,
- strokeDashoffset: 200,
- }, {
- strokeDashoffset: 0,
- duration: 2.5,
+ tweenTls[1].fromTo(
+ ['.security_svg__malWarn-square', '.security_svg__malConn'],
+ {
+ fill: '#FA5252',
+ },
+ {
+ fill: 'yellow',
+ duration: 0.5,
repeat: -1,
- ease: 'linear',
- yoyoEase: 'linear',
- });
+ repeatDelay: 0.1,
+ }
+ );
+ for (let i = 1; i < 4; i += 1) {
+ tweenTls[1].fromTo(
+ `.security_svg__conn${i}`,
+ {
+ strokeWidth: 4,
+ strokeDasharray: 25,
+ strokeDashoffset: 200,
+ },
+ {
+ strokeDashoffset: 0,
+ duration: 2.5,
+ repeat: -1,
+ ease: 'linear',
+ yoyoEase: 'linear',
+ }
+ );
}
// Scaling anim
for (let i = 0; i < 27; i += 1) {
- tweenTls[2].fromTo(circles[i], {
- fill: gsap.utils.random(colors),
- }, {
- fill: gsap.utils.random(colors),
- duration: 0.3,
- repeat: -1,
- repeatDelay: 0.1,
- });
- tweenTls[2].fromTo(links[i], {
- stroke: gsap.utils.random(pathColors),
- }, {
- stroke: gsap.utils.random(pathColors),
- duration: 0.3,
- repeat: -1,
- repeatDelay: 0.1,
- });
+ tweenTls[2].fromTo(
+ circles[i],
+ {
+ fill: gsap.utils.random(colors),
+ },
+ {
+ fill: gsap.utils.random(colors),
+ duration: 0.3,
+ repeat: -1,
+ repeatDelay: 0.1,
+ }
+ );
+ tweenTls[2].fromTo(
+ links[i],
+ {
+ stroke: gsap.utils.random(pathColors),
+ },
+ {
+ stroke: gsap.utils.random(pathColors),
+ duration: 0.3,
+ repeat: -1,
+ repeatDelay: 0.1,
+ }
+ );
}
// Dynamic anim
tweenTls[3].repeatDelay(1.5);
- tweenTls[3].fromTo(['.dynamic_svg__rcard'], {
- x: -400,
- opacity: 0,
- }, {
- opacity: 1,
- x: 0,
- ease: 'sin.inOut',
- duration: 1.5,
- })
- .fromTo('.dynamic_svg__arrow', {
- opacity: 0,
- }, {
- opacity: 1,
- ease: 'power3.out',
- duration: 0.5,
- })
- .fromTo('.dynamic_svg__lightning', {
- opacity: 0,
- y: 10,
- }, {
- opacity: 1,
- y: 0,
- duration: 1,
- ease: 'power2.inOut',
- });
+ tweenTls[3]
+ .fromTo(
+ ['.dynamic_svg__rcard'],
+ {
+ x: -400,
+ opacity: 0,
+ },
+ {
+ opacity: 1,
+ x: 0,
+ ease: 'sin.inOut',
+ duration: 1.5,
+ }
+ )
+ .fromTo(
+ '.dynamic_svg__arrow',
+ {
+ opacity: 0,
+ },
+ {
+ opacity: 1,
+ ease: 'power3.out',
+ duration: 0.5,
+ }
+ )
+ .fromTo(
+ '.dynamic_svg__lightning',
+ {
+ opacity: 0,
+ y: 10,
+ },
+ {
+ opacity: 1,
+ y: 0,
+ duration: 1,
+ ease: 'power2.inOut',
+ }
+ );
// Multiplatform anim
for (let i = 1; i < 4; i += 1) {
- tweenTls[4].fromTo(`.multiplatform_svg__server-port${i}`, {
- fill: '#60E0F2',
- }, {
- fill: '#ffdc21',
- duration: 0.5,
- });
+ tweenTls[4].fromTo(
+ `.multiplatform_svg__server-port${i}`,
+ {
+ fill: '#60E0F2',
+ },
+ {
+ fill: '#ffdc21',
+ duration: 0.5,
+ }
+ );
}
const standloneObserver = new IntersectionObserver(onIntersection, {
@@ -176,19 +223,23 @@ const Benefits: FC = () => {
onComplete: () => {
rot -= 360;
},
+ }
+ );
+ const tweenFloat = gsap.fromTo(
+ '.multiplatform_svg__lightning',
+ {
+ y: -2.5,
},
+ {
+ y: 5,
+ duration: 1,
+ ease: 'linear',
+ repeat: -1,
+ yoyo: true,
+ paused: true,
+ yoyoEase: 'linear',
+ }
);
- const tweenFloat = gsap.fromTo('.multiplatform_svg__lightning', {
- y: -2.5,
- }, {
- y: 5,
- duration: 1,
- ease: 'linear',
- repeat: -1,
- yoyo: true,
- paused: true,
- yoyoEase: 'linear',
- });
function onIntersection(entries) {
entries.forEach((entry) => {
@@ -212,18 +263,23 @@ const Benefits: FC = () => {
multiplatform.current,
];
for (let i = 0; i < 5; i += 1) {
- observers.push(new IntersectionObserver((entries) => {
- entries.forEach((entry) => {
- if (entry.isIntersecting) {
- tweenTls[i].paused(false);
- } else {
- tweenTls[i].paused(true);
+ observers.push(
+ new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ tweenTls[i].paused(false);
+ } else {
+ tweenTls[i].paused(true);
+ }
+ });
+ },
+ {
+ root: null,
+ threshold: 0.2,
}
- });
- }, {
- root: null,
- threshold: 0.2,
- }));
+ )
+ );
}
observers.forEach((it, index) => {
@@ -264,40 +320,60 @@ const Benefits: FC = () => {
end: '+=500%',
},
});
- tl.fromTo(performance.current, {
- opacity: 1,
- }, {
- opacity: 0,
- })
- .fromTo(security.current, {
- opacity: 0,
- }, {
+ tl.fromTo(
+ performance.current,
+ {
opacity: 1,
- })
- .to(security.current, {
+ },
+ {
opacity: 0,
- })
- .fromTo(scale.current, {
+ }
+ )
+ .fromTo(
+ security.current,
+ {
+ opacity: 0,
+ },
+ {
+ opacity: 1,
+ }
+ )
+ .to(security.current, {
opacity: 0,
- }, {
- opacity: 1,
})
+ .fromTo(
+ scale.current,
+ {
+ opacity: 0,
+ },
+ {
+ opacity: 1,
+ }
+ )
.to(scale.current, {
opacity: 0,
})
- .fromTo(dynamic.current, {
- opacity: 0,
- }, {
- opacity: 1,
- })
+ .fromTo(
+ dynamic.current,
+ {
+ opacity: 0,
+ },
+ {
+ opacity: 1,
+ }
+ )
.to(dynamic.current, {
opacity: 0,
})
- .fromTo(multiplatform.current, {
- opacity: 0,
- }, {
- opacity: 1,
- });
+ .fromTo(
+ multiplatform.current,
+ {
+ opacity: 0,
+ },
+ {
+ opacity: 1,
+ }
+ );
},
'(min-width: 1101px)': () => {
const tl = gsap.timeline();
@@ -334,9 +410,9 @@ const Benefits: FC = () => {
<strong>
<Translate id="benefits.component.performance.message">
Apache APISIX Gateway uses radixtree-route-matching and etcd under the hood to
- provide you the ability to create high speed synchronized systems.
- From routing to built-in plugins, all these are designed and implemented to
- be uber performant with the minimum latency possible.
+ provide you the ability to create high speed synchronized systems. From routing to
+ built-in plugins, all these are designed and implemented to be uber performant with
+ the minimum latency possible.
</Translate>
</strong>
</p>
@@ -348,13 +424,17 @@ const Benefits: FC = () => {
<div ref={security} className="row-benefit row-reverse row-hidden">
<div className="benefit-infograph">
- <Security style={{ width: screenWidth >= 768 ? '75%' : '100%', position: 'relative', left: screenWidth >= 768 ? '3%' : '0' }} />
+ <Security
+ style={{
+ width: screenWidth >= 768 ? '75%' : '100%',
+ position: 'relative',
+ left: screenWidth >= 768 ? '3%' : '0',
+ }}
+ />
</div>
<div style={{ width: screenWidth > 768 ? '50%' : '100%' }}>
<h3 className="feat-head-desc">
- <Translate id="benefits.component.security.title">
- Security
- </Translate>
+ <Translate id="benefits.component.security.title">Security</Translate>
</h3>
<h2 className="feat-head add-left-margin">
<Translate id="benefits.component.security.subtitle">
@@ -364,16 +444,12 @@ const Benefits: FC = () => {
<p className="feat-desc add-left-margin">
<strong>
<Translate id="benefits.component.security.message">
- Apache APISIX Gateway provides multiple security plugins for identity
- authentication and API verification, including CORS, JWT, Key
- Auth, OpenID Connect (OIDC), Keycloak, etc. We put stability and
- security first. For more information, check
- </Translate>
- {' '}
+ Apache APISIX Gateway provides multiple security plugins for identity authentication
+ and API verification, including CORS, JWT, Key Auth, OpenID Connect (OIDC),
+ Keycloak, etc. We put stability and security first. For more information, check
+ </Translate>{' '}
<Link style={{ color: '#e8433e' }} to={useBaseUrl('docs/apisix/plugins/cors/')}>
- <Translate id="benefits.component.security.link.here">
- here
- </Translate>
+ <Translate id="benefits.component.security.link.here">here</Translate>
</Link>
<Translate id="common.punctuation.anEnd">.</Translate>
</strong>
@@ -396,9 +472,9 @@ const Benefits: FC = () => {
<p className="feat-desc add-left-margin">
<strong>
<Translate id="benefits.component.scalability.message">
- Apache APISIX Gateway provides the ability to write your own custom plugins,
- use custom Load Balancing Algorithms during the balancer phase
- for scaling and custom Routing algorithms for fine control on routing.
+ Apache APISIX Gateway provides the ability to write your own custom plugins, use
+ custom Load Balancing Algorithms during the balancer phase for scaling and custom
+ Routing algorithms for fine control on routing.
</Translate>
</strong>
</p>
@@ -414,9 +490,7 @@ const Benefits: FC = () => {
</div>
<div style={{ width: screenWidth > 768 ? '50%' : '100%' }}>
<h3 className="feat-head-desc">
- <Translate id="benefits.component.fullyDynamic.title">
- Fully dynamic
- </Translate>
+ <Translate id="benefits.component.fullyDynamic.title">Fully dynamic</Translate>
</h3>
<h2 className="feat-head add-left-margin">
<Translate id="benefits.component.fullyDynamic.subtitle">
@@ -426,10 +500,10 @@ const Benefits: FC = () => {
<p className="feat-desc add-left-margin">
<strong>
<Translate id="benefits.component.fullyDynamic.message">
- As API Gateway, Apache APISIX provides Hot updates and Hot plugins,
- which continuously update configurations without restarts, saving development
- time and stress. In addition, health checks, circuit breakers,
- and many more features keep the system balanced.
+ As API Gateway, Apache APISIX provides Hot updates and Hot plugins, which
+ continuously update configurations without restarts, saving development time and
+ stress. In addition, health checks, circuit breakers, and many more features keep
+ the system balanced.
</Translate>
</strong>
</p>
@@ -451,11 +525,10 @@ const Benefits: FC = () => {
<p className="feat-desc add-left-margin">
<strong>
<Translate id="benefits.component.multiPlatform.message">
- Platform agnostic, no vendor lock-in.
- Apache APISIX as API Management solution, can run from bare-metal to Kubernetes.
- It supports HTTP to gRPC transcoding, websockets, gRPC, Dubbo,
- MQTT proxy and multiple platforms including ARM64,
- don't worry about the lock-in of the infra technology.
+ Platform agnostic, no vendor lock-in. Apache APISIX as API Management solution, can
+ run from bare-metal to Kubernetes. It supports HTTP to gRPC transcoding, websockets,
+ gRPC, Dubbo, MQTT proxy and multiple platforms including ARM64, don't worry
+ about the lock-in of the infra technology.
</Translate>
</strong>
</p>
diff --git a/website/src/components/sections/Comparison.tsx b/website/src/components/sections/Comparison.tsx
index 57ce5e639d1..e1171b37b8a 100644
--- a/website/src/components/sections/Comparison.tsx
+++ b/website/src/components/sections/Comparison.tsx
@@ -6,6 +6,8 @@ import Translate from '@docusaurus/Translate';
import Cross from '../../assets/icons/cross.svg';
import Tick from '../../assets/icons/tick.svg';
+import '../../css/landing-sections/comparison.scss';
+
const Comparison: FC = () => (
<div className="compare">
<div>
diff --git a/website/src/components/sections/Endcta.tsx b/website/src/components/sections/Endcta.tsx
index e01a42c66b9..78ced14e21d 100644
--- a/website/src/components/sections/Endcta.tsx
+++ b/website/src/components/sections/Endcta.tsx
@@ -6,7 +6,7 @@ import Translate from '@docusaurus/Translate';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import useWindowType from '@theme/hooks/useWindowSize';
import ArrowAnim from '../ArrowAnim';
-import style from '../../css/endcta.module.scss';
+import style from '../../css/landing-sections/endcta.module.scss';
const EndCTA: FC = () => {
const windowType = useWindowType();
@@ -14,25 +14,21 @@ const EndCTA: FC = () => {
return (
<div className={style.endcta}>
<p className={style.text}>
- <span>
- Try
- {' '}
- </span>
- <span className={style.apisix}>
- Apache APISIX
- {' '}
- </span>
- <span>
- today.
- </span>
- {windowType === 'desktop'
- && (<LazyLoadImage className={style.rocket} src="https://static.apiseven.com/202202/rocket.gif" alt="Rocket" width="6vw" height="6vw" />)}
+ <span>Try </span>
+ <span className={style.apisix}>Apache APISIX </span>
+ <span>today.</span>
+ {windowType === 'desktop' && (
+ <LazyLoadImage
+ className={style.rocket}
+ src="https://static.apiseven.com/202202/rocket.gif"
+ alt="Rocket"
+ width="6vw"
+ height="6vw"
+ />
+ )}
</p>
<div className={style.links}>
- <Link
- to={useBaseUrl('downloads')}
- className="btn btn-download"
- >
+ <Link to={useBaseUrl('downloads')} className="btn btn-download">
<Translate id="hero.component.download.btn">Downloads</Translate>
</Link>
<ArrowAnim />
diff --git a/website/src/components/sections/Features.tsx b/website/src/components/sections/Features.tsx
index e0dea7b16dc..2064341f7c8 100644
--- a/website/src/components/sections/Features.tsx
+++ b/website/src/components/sections/Features.tsx
@@ -5,10 +5,11 @@ import { animated } from 'react-spring';
import Translate from '@docusaurus/Translate';
import useBaseUrl from '@docusaurus/useBaseUrl';
import { LazyLoadImage } from 'react-lazy-load-image-component';
-import styles from '../../css/features.module.scss';
import ArrowAnim from '../ArrowAnim';
import useWindowSize from '../../hooks/useWindowSize';
+import styles from '../../css/landing-sections/features.module.scss';
+
const DashboardPlayground = () => {
const [width] = useWindowSize();
@@ -28,14 +29,10 @@ const DashboardPlayground = () => {
<div className={styles.dashboardAccount}>
<div>
- username
- {' '}
- <span>admin</span>
+ username <span>admin</span>
</div>
<div>
- passwd
- {' '}
- <span>admin</span>
+ passwd <span>admin</span>
</div>
</div>
</div>
@@ -44,26 +41,23 @@ const DashboardPlayground = () => {
};
interface FeatProps {
- style?: CSSProperties
+ style?: CSSProperties;
}
-type Feat = FC<FeatProps>
+type Feat = FC<FeatProps>;
const DashboardFeat: Feat = (props) => (
<animated.div className={styles.feat} {...props}>
<div className={styles.left}>
<section>
<h2>
- <Translate id="features.component.easyDashboard.title">
- Easy-to-use Dashboard
- </Translate>
+ <Translate id="features.component.easyDashboard.title">Easy-to-use Dashboard</Translate>
</h2>
<div>
<Translate id="features.component.easyDashboard.message">
- The Apache APISIX Dashboard is designed to make it as easy as
- possible for users to operate Apache APISIX through a frontend
- interface. It’s opensource and ever evolving, feel free to
- contribute.
+ The Apache APISIX Dashboard is designed to make it as easy as possible for users to
+ operate Apache APISIX through a frontend interface. It’s opensource and ever evolving,
+ feel free to contribute.
</Translate>
<div className={styles.action}>
<Link to={useBaseUrl('downloads')} className="btn btn-download">
@@ -94,19 +88,16 @@ const CodeFeat: Feat = (props) => (
</h2>
<p>
<Translate id="features.component.userFlexible.message">
- The Apache APISIX dashboard is flexible to User demand,
- providing option to create custom modules through code matching
- your requirements, alongside the existing no-code toolchain.
+ The Apache APISIX dashboard is flexible to User demand, providing option to create
+ custom modules through code matching your requirements, alongside the existing no-code
+ toolchain.
</Translate>
</p>
</section>
</div>
<div className={styles.right}>
- <LazyLoadImage
- src="https://static.apiseven.com/202202/code-sample.png"
- alt="code-snippet"
- />
+ <LazyLoadImage src="https://static.apiseven.com/202202/code-sample.png" alt="code-snippet" />
</div>
</animated.div>
);
@@ -120,10 +111,9 @@ const PluginFeat: Feat = (props) => (
</h2>
<p>
<Translate id="features.component.pluginised.message">
- No need to reinvent the wheel again and again. Use inbuilt
- plugins to create high performance systems in tight deadlines.
- For something custom, there is option of building custom
- plugins.
+ No need to reinvent the wheel again and again. Use inbuilt plugins to create high
+ performance systems in tight deadlines. For something custom, there is option of
+ building custom plugins.
</Translate>
</p>
</section>
@@ -140,9 +130,10 @@ const PluginFeat: Feat = (props) => (
const Features: FC = () => (
<div className={styles.features}>
-
<section className={styles.head}>
- <h2><Translate id="features.component.why.title">Why APISIX Gateway?</Translate></h2>
+ <h2>
+ <Translate id="features.component.why.title">Why APISIX Gateway?</Translate>
+ </h2>
<h3>
<Translate id="features.component.why.subtitle">
Reduce time fighting bugs, focus on designing world-class systems with API Gateway
@@ -150,9 +141,8 @@ const Features: FC = () => (
</h3>
<p>
<Translate id="features.component.why.message">
- Apache APISIX is the first open-source API Gateway
- that includes a built-in low-code Dashboard,
- which offers a powerful and flexible UI for developers to use.
+ Apache APISIX is the first open-source API Gateway that includes a built-in low-code
+ Dashboard, which offers a powerful and flexible UI for developers to use.
</Translate>
</p>
</section>
diff --git a/website/src/components/sections/HeroSection.tsx b/website/src/components/sections/HeroSection.tsx
index 8abf97e1001..f43e1960323 100644
--- a/website/src/components/sections/HeroSection.tsx
+++ b/website/src/components/sections/HeroSection.tsx
@@ -7,6 +7,7 @@ import Translate from '@docusaurus/Translate';
import BrowserOnly from '@docusaurus/BrowserOnly';
import useWindowType from '@theme/hooks/useWindowSize';
import ArrowAnim from '../ArrowAnim';
+import '../../css/landing-sections/hero.scss';
const LazyLoadHeroCanvas = () => {
const windowType = useWindowType();
@@ -26,18 +27,22 @@ const LazyLoadHeroCanvas = () => {
const HeroSection: FC = () => (
<div className="hero-sec-wrap" style={{ width: '100%' }}>
<div className="hero-text">
- <h1 className="hero-title"><Translate id="hero.component.title.fragment1">Full Lifecycle API Management</Translate></h1>
+ <h1 className="hero-title">
+ <Translate id="hero.component.title.fragment1">Full Lifecycle API Management</Translate>
+ </h1>
<h2 className="hero-subtitle" style={{ color: '#E8433E', fontSize: 32, fontWeight: 700 }}>
- <Translate id="hero.component.title.fragment2">API Gateway, Ingress Controller, etc.</Translate>
+ <Translate id="hero.component.title.fragment2">
+ API Gateway, Ingress Controller, etc.
+ </Translate>
</h2>
<h3 className="hero-subtitle">
- <Translate id="hero.component.subtitle.content">Apache APISIX provides rich traffic management features like Load Balancing, Dynamic Upstream, Canary Release, Circuit Breaking, Authentication, Observability, etc.</Translate>
+ <Translate id="hero.component.subtitle.content">
+ Apache APISIX provides rich traffic management features like Load Balancing, Dynamic
+ Upstream, Canary Release, Circuit Breaking, Authentication, Observability, etc.
+ </Translate>
</h3>
<div className="hero-ctas">
- <Link
- to={useBaseUrl('downloads')}
- className="btn btn-download"
- >
+ <Link to={useBaseUrl('downloads')} className="btn btn-download">
<Translate id="hero.component.download.btn">Downloads</Translate>
</Link>
<ArrowAnim />
diff --git a/website/src/components/sections/HomeEventsSection.tsx b/website/src/components/sections/HomeEventsSection.tsx
index d3b3ec09026..086b508b229 100644
--- a/website/src/components/sections/HomeEventsSection.tsx
+++ b/website/src/components/sections/HomeEventsSection.tsx
@@ -4,43 +4,40 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Translate from '@docusaurus/Translate';
-import style from '../../css/home-events.module.scss';
+import style from '../../css/landing-sections/home-events.module.scss';
interface EventInfo {
title: string;
fileName: string;
}
-const Events:FC = () => {
+const Events: FC = () => {
const { siteConfig } = useDocusaurusContext();
- const events = (siteConfig.customFields.events as EventInfo[])
- .slice(0, 4)
- .map((event) => {
- const publishTime = event.fileName.slice(0, 10);
- const fileNameArr = event.fileName.split('-');
- const url = `/blog/${fileNameArr.slice(0, 3).join('/')}/${fileNameArr.slice(3).join('-')}`;
- return (
- <a className={style.eventCard} key={event.title} href={url} target="_blank" rel="noreferrer">
- <time dateTime={publishTime}>{publishTime}</time>
- <h4>{event.title}</h4>
- <div>
- Read More
- <div className={style.arrow}>
- <svg width="50%" height="100%" viewBox="0 0 256 256">
- <polygon fill="currentcolor" points="208,128 80,0 52.8,27.2 140.3,128 53,228.9 80,256" />
- <rect fill="currentcolor" x="-256" y="115" width="256" height="30" />
- </svg>
- </div>
+ const events = (siteConfig.customFields.events as EventInfo[]).slice(0, 4).map((event) => {
+ const publishTime = event.fileName.slice(0, 10);
+ const fileNameArr = event.fileName.split('-');
+ const url = `/blog/${fileNameArr.slice(0, 3).join('/')}/${fileNameArr.slice(3).join('-')}`;
+ return (
+ <a className={style.eventCard} key={event.title} href={url} target="_blank" rel="noreferrer">
+ <time dateTime={publishTime}>{publishTime}</time>
+ <h4>{event.title}</h4>
+ <div>
+ Read More
+ <div className={style.arrow}>
+ <svg width="50%" height="100%" viewBox="0 0 256 256">
+ <polygon
+ fill="currentcolor"
+ points="208,128 80,0 52.8,27.2 140.3,128 53,228.9 80,256"
+ />
+ <rect fill="currentcolor" x="-256" y="115" width="256" height="30" />
+ </svg>
</div>
- </a>
- );
- });
+ </div>
+ </a>
+ );
+ });
- return (
- <div className={style.events}>
- {events}
- </div>
- );
+ return <div className={style.events}>{events}</div>;
};
const HomeEventsSection: FC = () => (
@@ -56,18 +53,15 @@ const HomeEventsSection: FC = () => (
<p>
<Translate id="homeEventsSection.component.message.news">
Stay up to date about all Apache APISIX® News,
- </Translate>
- {' '}
+ </Translate>{' '}
<a href="/docs/general/join/">
<Translate id="homeEventsSection.component.link.newsletter">
subscribe to our newsletter.
</Translate>
</a>
</p>
- <a className="news-button" href="/docs/general/join">
- <Translate id="homeEventsSection.component.link.Subscribe">
- Subscribe Now
- </Translate>
+ <a className={style.newsButton} href="/docs/general/join">
+ <Translate id="homeEventsSection.component.link.Subscribe">Subscribe Now</Translate>
</a>
</div>
</div>
diff --git a/website/src/components/sections/OpensourcePromo.tsx b/website/src/components/sections/OpensourcePromo.tsx
index 8c3a120d762..85cae9e8def 100644
--- a/website/src/components/sections/OpensourcePromo.tsx
+++ b/website/src/components/sections/OpensourcePromo.tsx
@@ -8,24 +8,20 @@ import Translate from '@docusaurus/Translate';
import BrowserOnly from '@docusaurus/BrowserOnly';
import GitHub from '../../assets/icons/github-logo.svg';
import type { VideoProps } from '../Video';
-import style from '../../css/os-promo.module.scss';
+import style from '../../css/landing-sections/os-promo.module.scss';
const VideoChannel: FC = () => {
- const { i18n: { currentLocale } } = useDocusaurusContext();
+ const {
+ i18n: { currentLocale },
+ } = useDocusaurusContext();
if (currentLocale.startsWith('zh')) {
- return (
- <a href="https://space.bilibili.com/551921247">
- 哔哩哔哩官方账号
- </a>
- );
+ return <a href="https://space.bilibili.com/551921247">哔哩哔哩官方账号</a>;
}
return (
<a href="https://www.youtube.com/channel/UCgPD18cMhOg5rmPVnQhAC8g">
- <Translate id="openSourcePromo.component.link.Youtube">
- YouTube channel
- </Translate>
+ <Translate id="openSourcePromo.component.link.Youtube">YouTube channel</Translate>
</a>
);
};
@@ -34,10 +30,12 @@ const videoOptions: VideoProps['options'] = {
controls: true,
preload: 'none',
poster: 'https://static.apiseven.com/202202/apisix-video-poster.jpeg',
- sources: [{
- src: 'https://static.apiseven.com/apisix-website/videos/apisix-video/apisix-bobur.m3u8',
- type: 'application/x-mpegURL',
- }],
+ sources: [
+ {
+ src: 'https://static.apiseven.com/apisix-website/videos/apisix-video/apisix-bobur.m3u8',
+ type: 'application/x-mpegURL',
+ },
+ ],
width: 640,
height: 360,
};
@@ -74,9 +72,7 @@ const OpensourcePromo: FC = () => (
<div className={style.ossCta}>
<GitHub style={{ width: '20px', margin: '0 10px 0 0' }} />
<a href="https://github.com/apache/apisix">
- <Translate id="openSourcePromo.component.link.Github">
- Check us out
- </Translate>
+ <Translate id="openSourcePromo.component.link.Github">Check us out</Translate>
</a>
</div>
</div>
@@ -88,24 +84,18 @@ const OpensourcePromo: FC = () => (
<div className={style.docsPromoSubtitle}>
<p>
<Translate id="openSourcePromo.component.subtitle.fragment1">
- What are microservices? What is an API Gateway?
- Want to learn Apache APISIX usage, but don't know where to start?
- Check out our
- </Translate>
- {' '}
+ What are microservices? What is an API Gateway? Want to learn Apache APISIX usage, but
+ don't know where to start? Check out our
+ </Translate>{' '}
<Link style={{ color: '#e8433e' }} to={useBaseUrl('docs')}>
- <Translate id="openSourcePromo.component.link.docs">
- Docs.
- </Translate>
+ <Translate id="openSourcePromo.component.link.docs">Docs.</Translate>
</Link>
</p>
<p>
<Translate id="openSourcePromo.component.subtitle.fragment2">
Like visual information, check out our
- </Translate>
- {' '}
- <VideoChannel />
- {' '}
+ </Translate>{' '}
+ <VideoChannel />{' '}
<Translate id="openSourcePromo.component.subtitle.fragment3">
for detailed tutorials. Subscribe for more.
</Translate>
@@ -116,7 +106,6 @@ const OpensourcePromo: FC = () => (
<LazyLoadVideo />
</div>
</div>
-
</div>
);
diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
deleted file mode 100644
index c24abdaaa80..00000000000
--- a/website/src/css/customTheme.css
+++ /dev/null
@@ -1,2026 +0,0 @@
-:root {
- --ifm-color-primary-lightest: rgb(228 222 222);
- --ifm-color-primary-lighter: #d0312d;
- --ifm-color-primary-light: #f8f8fa;
- --ifm-color-primary: #e8433e;
- --ifm-color-dark: #000;
- --ifm-color-primary-dark: #a5a0a0;
- --ifm-color-primary-darker: #9a2521;
- /* stylelint-disable-next-line custom-property-pattern */
- --ifm-color-shadow--lw: #7f1e1b;
- --color-title: #101827;
- --color-github-button: #101827;
- --color-github-button-hover: #000;
- --color-primary: #e8433e;
- --color-subtitle: #000;
- --color-secondary: #4b5563;
- --color-secondary-bg: #f3f4f6;
- --color-secondary-text: #444952;
- --color-border: #eee;
- --color-downloads-subtitle: #374051;
- --color-downloads-leftsidelinks: #4b5563;
- --color-downloads-leftsidelink-hover: #111827;
- --color-downloads-rightside-versioninfo: #6b7280;
- --color-downloads-rightside-versioninfo-span: #374151;
- --color-team-repocard: #374151;
- --color-team-repocard-hover: #111827;
- --color-docs-subtitle: #374151;
- --color-docs-versioninfo: #4b5563;
- --color-help-subtitle: #6b7280;
- --color-downloads-dropdown: #fff;
- --color-downloads-dropdown-items: #f3f4f6;
-}
-
-html[data-theme="dark"] {
- --color-secondary-bg: #121212;
- --ifm-color-dark: #b0b0b0;
- --color-title: #f0f0f0;
- --color-subtitle: #f0f0f0;
- --color-github-button: #121212;
- --color-secondary-text: #b0b0b0;
- --color-border: #b0b0b0;
- --color-downloads-subtitle: #f0f0f0;
- --color-downloads-leftsidelinks: #909397;
- --color-downloads-leftsidelink-hover: #f0f0f0;
- --color-downloads-rightside-versioninfo: #f0f0f0;
- --color-downloads-rightside-versioninfo-span: #909397;
- --color-team-repocard: #f0f0f0;
- --color-team-repocard-hover: #909397;
- --color-docs-subtitle: #f0f0f0;
- --color-docs-versioninfo: #b0b0b0;
- --color-help-subtitle: #f0f0f0;
- --color-downloads-dropdown: #18191a;
- --color-downloads-dropdown-items: #4c4e50;
-}
-
-@font-face {
- font-family: MaisonNeue-Medium;
- src:
- local("MaisonNeue-Medium"),
- url("https://static.apiseven.com/202202/MaisonNeue-Medium.otf")
- format("opentype");
- font-display: optional;
-}
-
-@font-face {
- font-family: MaisonNeue-Bold;
- src:
- local("MaisonNeue-Bold"),
- url("https://static.apiseven.com/202202/MaisonNeue-Bold.otf")
- format("opentype");
- font-display: optional;
-}
-
-@font-face {
- font-family: MaisonNeue-Light;
- src:
- local("MaisonNeue-Light"),
- url("https://static.apiseven.com/202202/MaisonNeue-Light.otf")
- format("opentype");
- font-display: optional;
-}
-
-@font-face {
- font-family: MaisonNeue-Demi;
- src:
- local("MaisonNeue-Demi"),
- url("https://static.apiseven.com/202202/MaisonNeue-Demi.otf")
- format("opentype");
- font-display: optional;
-}
-
-@font-face {
- font-family: MaisonNeue-ExtraBold;
- src:
- local("MaisonNeue-ExtraBold"),
- url("https://static.apiseven.com/202202/MaisonNeue-ExtraBold.otf")
- format("opentype");
- font-display: optional;
-}
-
-::-webkit-scrollbar {
- width: 5px;
-}
-
-::-webkit-scrollbar-track {
- background: #f1f1f1;
-}
-
-::-webkit-scrollbar-thumb {
- background: #888;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: #555;
-}
-
-body,
-h1,
-h2,
-h3 {
- font-family: MaisonNeue-Medium, apple-system, system-ui, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizelegibility;
- text-size-adjust: 100%;
-}
-
-div.inner {
- color: var(--ifm-color-primary);
-}
-
-.image {
- padding: 75px 10px 75px 75px;
-}
-
-.more-users {
- padding-top: 75px;
-}
-
-.post-header {
- padding-top: 50px;
-}
-
-.header {
- padding-top: 50px;
-}
-
-.color-primary {
- color: var(--ifm-color-primary);
-}
-
-header h2 {
- color: var(--color-primary);
-}
-
-@media only screen and (max-width: 414px) {
- .hide-on-mobile {
- display: none;
- }
-}
-
-/* navbar */
-.navbar__link:hover,
-.navbar__link--active {
- color: var(--color-primary);
-}
-
-.navbar__title {
- font-size: 18px;
- height: 30px;
-}
-
-.showcase {
- padding-left: 0;
- padding-right: 0;
-}
-
-.showcase .container {
- padding-left: 0;
- padding-right: 0;
- margin-left: 0;
- margin-right: 0;
- max-width: unset;
-}
-
-.showcase .user-logos {
- margin-top: 48px;
-}
-
-.showcase .logo-row {
- display: flex;
- -webkit-box-align: center;
- align-items: center;
- height: 5rem;
- overflow: hidden;
- position: relative;
- width: 100%;
-}
-
-.showcase .user-logos-container {
- display: inline-block;
- white-space: nowrap;
- overflow: hidden;
- position: absolute;
-}
-
-.showcase .user-logos-container section {
- white-space: nowrap;
- overflow: hidden;
- display: flex;
- align-items: center;
-}
-
-.showcase .user-logos-container section span {
- animation: 36s linear 0s infinite reverse none running logo-animation;
- white-space: nowrap;
- overflow: hidden;
- display: flex;
- align-items: center;
-}
-
-.showcase .user-logos:hover span {
- animation-play-state: paused !important;
-}
-
-.showcase .user-logo {
- max-width: 128px;
- max-height: 50px;
- margin: 0 16px;
-}
-
-@keyframes logo-animation {
- from {
- transform: translateX(-100%);
- }
-
- to {
- transform: translateX(0%);
- }
-}
-
-/* button */
-.button {
- margin: 0 10px;
- padding: 12px 24px;
- font-size: 18px;
- font-weight: 600;
- border-radius: 10px;
- border: none;
- background: #fee2e2;
- color: #ef4444;
- transition: all 0.3s;
-}
-
-.button:hover {
- background: #fecaca;
- color: #ef4444;
-}
-
-.button.github {
- background: var(--color-github-button);
- color: white;
- display: inline-flex;
- align-items: center;
- margin-bottom: 15px;
-}
-
-.button.github .github-logo {
- height: 24px;
- margin: 0 12px 1px 0;
-}
-
-.button.github:hover {
- background: var(--color-github-button-hover);
-}
-
-.button-wrapper {
- margin: 0 -10px;
-}
-
-.button.secondary {
- background: #f3f4f6;
- color: #1f2937;
- border: 1px solid #d1d5db;
- box-sizing: border-box;
- margin-bottom: 15px;
-}
-
-.button.secondary:hover {
- background: #e5e7eb;
-}
-
-@media only screen and (max-width: 414px) {
- .button {
- margin: 0;
- }
-
- .button.secondary,
- .button.github {
- width: 100%;
- }
-
- .button-wrapper {
- margin: 0;
- }
-}
-
-a {
- color: var(--ifm-color-dark);
- cursor: pointer;
-}
-
-a:hover {
- color: var(--color-primary);
- text-decoration: none;
-}
-
-.markdown a {
- color: var(--color-primary);
-}
-
-.arrow-btn {
- stroke-dasharray: 1000;
- stroke-dashoffset: 1002;
-}
-
-/* Blogs section */
-.blogPostTitle_node_modules-\@docusaurus-theme-classic-lib-next-theme-BlogPostItem-styles-module {
- font-size: 2rem !important;
-}
-
-.sidebar_node_modules-\@docusaurus-theme-classic-lib-next-theme-BlogSidebar-styles-module {
- margin-left: -3px;
- text-align: left;
- margin-right: 10px;
- padding-right: 20px;
-}
-
-/* Hero section */
-@keyframes fade-in-up {
- from {
- opacity: 0;
- transform: translate3d(0, 50%, 0);
- }
-
- to {
- opacity: 1;
- transform: translate3d(0, 0, 0);
- }
-}
-
-.hero-title,
-.hero-subtitle,
-.hero-ctas {
- animation-name: fade-in-up;
- animation-fill-mode: both;
- animation-delay: 0s;
- animation-duration: 1s;
-}
-
-.hero-subtitle {
- z-index: 100;
- font-size: 1.1rem;
- font-family: MaisonNeue-Light, sans-serif;
- position: relative;
- color: #615d5d;
- line-height: 30px;
- letter-spacing: 0.2px;
- margin: 25px 0;
- padding-right: 20px;
- animation-delay: 0.25s;
-}
-
-.hero-ctas {
- display: flex;
- align-items: center;
- animation-delay: 0.5;
-}
-
-.hero-sec-wrap {
- display: flex;
- background: #f4f4f4ad;
- height: 100vh;
-}
-
-.homeCanvas-overlay {
- position: absolute;
- width: 50vw;
- height: 100vh;
- background: #fff;
- top: -1px;
- right: 0;
-}
-
-.homeCanvas {
- width: 50vw;
- height: 100vh;
-}
-
-.hero-text {
- height: 100%;
- display: flex;
- flex-wrap: wrap;
- align-content: center;
- width: 50%;
- padding: 0 0 0 6vw;
-}
-
-.hero-title {
- font-family: MaisonNeue-Bold, sans-serif;
- color: #121212;
- width: 42vw;
- font-size: 4.2rem;
- letter-spacing: 0.2px;
- margin: 0;
-}
-
-.btn {
- background: #030c16;
- border-style: solid;
- border-width: 1px;
- border: none;
- color: white;
- padding: 5px 20px;
- border-radius: 20px;
- font-size: 1rem;
- text-decoration: none;
- margin: 0 10px 0 0;
- transition: all 0.3s;
-}
-
-.btn:hover {
- background: #9b9b9b;
- color: white;
- text-decoration: none;
-}
-
-.btn-docs {
- display: flex;
- flex-direction: row;
- align-items: center;
-}
-
-.btn-docs:hover {
- text-decoration: none;
-}
-
-.btn-docs .goto {
- color: #000;
-}
-
-.btn-docs:hover .goto,
-.btn-docs:active .goto {
- opacity: 0.8;
-}
-
-.btn-docs .arrow {
- width: 30px;
- height: 30px;
- position: relative;
-}
-
-.btn-docs .arrow svg {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-
-.btn-docs .arrow polygon,
-.btn-docs .arrow rect {
- transition: all 250ms;
-}
-
-.btn-docs .arrow rect {
- opacity: 0;
-}
-
-.btn-docs:hover .arrow polygon {
- transform: translateX(100px);
-}
-
-.btn-docs:hover .arrow rect {
- transform: translateX(240px);
- opacity: 1;
-}
-
-/* Architecture section */
-.hldesign {
- height: 100%;
- display: flex;
- justify-content: center;
-}
-
-.hldesign-graphic {
- width: 60%;
- height: auto;
-}
-
-.Architecture_svg__architecture {
- font-family: MaisonNeue-Medium, sans-serif;
-}
-
-.arch {
- background: linear-gradient(180deg, #e2ecff 15%, #fff 90%);
- position: relative;
- z-index: 1;
- padding: 50px 0;
- overflow: hidden;
-}
-
-.arch-card-caption {
- height: 100%;
- display: flex;
- justify-content: center;
- color: #615d5d;
-}
-
-.arch-card-caption > p {
- width: 90%;
- letter-spacing: 0.2px;
- font-family: MaisonNeue-Light, sans-serif;
- font-weight: 700;
- text-align: center;
- position: relative;
- bottom: -15px;
- font-size: 1rem;
-}
-
-.arch-card-border {
- z-index: -10;
- position: absolute;
- width: 66%;
- height: 100%;
- border-style: solid;
- top: 15px;
- left: 17%;
- border-color: white;
- background: white;
- filter: drop-shadow(0 4px 10px rgb(0 0 0 / 25%));
-}
-
-.arch-head,
-.compare-head,
-.testimonials-head,
-.docs-promo-head {
- font-size: 2.4rem;
- position: relative;
- left: 16.8%;
- width: 83.2%;
-}
-
-.arch-subtitle,
-.compare-subtitle,
-.testimonials-subtitle,
-.docs-promo-subtitle {
- font-size: 1.13rem;
- position: relative;
- left: 16.8%;
- width: 70%;
- color: #615d5d;
- letter-spacing: 0.2px;
- font-family: MaisonNeue-Light, sans-serif;
- font-weight: 700;
-}
-
-.add-left-margin {
- position: relative;
- left: 16.8%;
-}
-
-/* Features section */
-.feat-head {
- font-size: 2.4rem;
- width: 75%;
-}
-
-.feat-container-d {
- width: 100%;
- height: 300vh;
- display: flex;
-}
-
-.feat-container-m {
- display: none;
-}
-
-.feat-head-desc {
- font-size: 1.4rem;
- color: #363130;
- opacity: 0.5;
- position: relative;
- left: 17%;
- margin: 0;
- line-height: 1.8;
- width: fit-content;
-}
-
-.feat-desc {
- margin: 10px 0;
- font-size: 1.13rem;
- color: #615d5d;
- font-weight: 700;
- font-family: MaisonNeue-Light, sans-serif;
- width: 65%;
- left: 17%;
-}
-
-.add-left-margin-feat {
- position: absolute;
- left: 34%;
-}
-
-.i-text {
- font-family: MaisonNeue-Demi, sans-serif;
- font-size: 2rem;
- padding: 0 0 200px;
-}
-
-.text-div {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.i-text-desc {
- font-size: 1.13rem;
- color: #615d5d;
- font-weight: 700;
- font-family: MaisonNeue-Light, sans-serif;
-}
-
-.i-image {
- opacity: 1;
- width: auto;
- height: 90%;
- border-radius: 10px;
- max-width: 200%;
- max-height: 100%;
- filter: drop-shadow(0 4px 10px rgb(0 0 0 / 25%));
-}
-
-.n-image {
- opacity: 0;
- width: auto;
- height: 90%;
- border-radius: 10px;
- max-height: 100%;
- max-width: 200%;
- filter: drop-shadow(0 4px 10px rgb(0 0 0 / 25%));
-}
-
-.i-image-col {
- opacity: 1;
- width: 100%;
- height: auto;
- max-height: 100%;
- max-width: 100%;
- margin: 0 0 20px;
- filter: drop-shadow(0 4px 10px rgb(0 0 0 / 25%));
-}
-
-.imagePosition {
- position: absolute;
- bottom: 10px;
- left: 30px;
- max-width: none;
-}
-
-.i-text-col {
- font-family: MaisonNeue-Demi, sans-serif;
- font-size: 2rem;
- top: 0;
-}
-
-.i-text-desc-col {
- font-size: 0.95rem;
- color: #615d5d;
- font-weight: 700;
- font-family: MaisonNeue-Light, sans-serif;
- width: 80%;
-}
-
-.hiddenDiv-col {
- opacity: 0;
-}
-
-.dashboard-playground-link {
- bottom: 14%;
- color: hsl(0deg 0% 80%);
-}
-
-.dashboard-playground-link:hover {
- color: hsl(0deg 0% 80%);
-}
-
-@media (min-width: 1600px) and (max-width: 2080px) {
- .dashboard-playground-link {
- bottom: 18%;
- }
-}
-
-.dashboard-playground {
- background-color: hsl(0deg 100% 0%);
- font-family: MaisonNeue-Bold, sans-serif;
-
- --height: 130px;
- --width: calc(var(--height) * 2.048);
- --radius: calc(var(--height) * 0.168);
-
- height: var(--height);
- width: var(--width);
- border-radius: var(--radius);
- padding: calc(var(--radius) - 6px);
- display: flex;
- flex-direction: column;
- position: relative;
- left: calc(var(--width) * -0.05);
- overflow: hidden;
- transform: scale3d(0.95, 0.95, 1);
- transition: all 200ms cubic-bezier(0.65, 0.05, 0.36, 1);
-}
-
-.dashboard-playground::before {
- content: "";
- width: calc(100% - 6px);
- height: calc(100% - 6px);
- border-radius: inherit;
- position: absolute;
- top: 3px;
- left: 3px;
- backdrop-filter: blur(2px);
- opacity: 0;
- transition: opacity 300ms ease-in-out;
-}
-
-.dashboard-playground::after {
- content: "APISIX";
- position: absolute;
- top: 5px;
- left: -35%;
- font-size: 8.5rem;
- font-weight: bolder;
- line-height: 1;
- color: #fff;
- opacity: 0.06;
-}
-
-.dashboard-playground:hover {
- transform: scale3d(1, 1, 1);
- box-shadow:
- 0 0 0 1px hsl(213deg 26% 28% / 2%),
- 0 3px 2px hsl(0deg 0% 0% / 14%),
- 0 7px 5px hsl(0deg 0% 0% / 12%),
- 0 13px 10px hsl(0deg 0% 0% / 5%),
- 0 22px 17px hsl(0deg 0% 0% / 8%);
-}
-
-.dashboard-playground:active {
- transform: scale3d(0.95, 0.95, 1);
-}
-
-.dashboard-title {
- font-size: 1.35rem;
- font-family: MaisonNeue-ExtraBold, sans-serif;
- white-space: nowrap;
- flex-grow: 1;
- background-image:
- linear-gradient(
- 135deg,
- hsl(0deg 73% 50%),
- hsl(227deg 90% 65%)
- );
- background-clip: text;
- /* stylelint-disable-next-line property-no-vendor-prefix */
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- width: fit-content;
- position: relative;
-}
-
-.dashboard-playground:hover .dashboard-title {
- animation: pulse 3s linear infinite;
-}
-
-@keyframes pulse {
- from {
- filter: hue-rotate(0);
- }
-
- to {
- filter: hue-rotate(360deg);
- }
-}
-
-.dashboard-account {
- font-variant: small-caps;
- line-height: normal;
- letter-spacing: 1px;
- position: relative;
- opacity: 0.8;
-}
-
-.dashboard-account::after {
- content: "↑";
- font-family: MaisonNeue-Light, sans-serif;
- font-size: 2.5rem;
- line-height: 2rem;
- position: absolute;
- top: 2px;
- right: 8px;
- opacity: 0;
- color: hsl(0deg 0% 70%);
- transform: rotate(90deg);
- transition: opacity 300ms ease-in-out;
-}
-
-.dashboard-playground:hover .dashboard-account {
- opacity: 0.9;
-}
-
-.dashboard-playground:hover .dashboard-account::after {
- opacity: 0.6;
- animation: bounce 1.8s ease-in-out infinite;
-}
-
-@keyframes bounce {
- from,
- 20%,
- 53%,
- to {
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- transform: rotate(90deg) translate3d(0, 0, 0);
- }
-
- 40%,
- 43% {
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
- transform: rotate(90deg) translate3d(0, 30px, 0) scaleY(1.1);
- }
-
- 70% {
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
- transform: rotate(90deg) translate3d(0, 15px, 0) scaleY(1.05);
- }
-
- 80% {
- transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
- transform: rotate(90deg) translate3d(0, 0, 0) scaleY(0.95);
- }
-
- 90% {
- transform: rotate(90deg) translate3d(0, 4px, 0) scaleY(1.02);
- }
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.dashboard-account span {
- font-family: MaisonNeue-Medium, sans-serif;
- font-variant: normal;
- letter-spacing: normal;
- font-size: 0.9rem;
-}
-
-.btn-try-demo {
- text-align: center;
- display: block;
- width: 100%;
- border-radius: 6px;
- background-color: #ebedf0;
- color: #615d5d;
- transition: all 300ms;
-}
-
-.btn-try-demo:hover {
- color: currentcolor;
- background-color: rgb(0 0 0 / 30%);
-}
-
-/* benefits section */
-.row-benefit {
- margin: 100px 5px;
- display: flex;
- justify-content: center;
- align-items: center;
- height: fit-content;
-}
-
-.benefit {
- background: #fff8f6;
- padding: 50px 0;
-}
-
-.benefit-infograph {
- width: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-/* Comparison table section */
-.compare {
- padding: 50px 0;
-}
-
-.table tbody td:nth-child(even) {
- background: rgb(14 30 37 / 2%);
-}
-
-.table tbody tr:nth-child(odd) {
- background: rgb(14 30 37 / 2%);
-}
-
-.table thead {
- font-size: 1.13rem;
-}
-
-.table {
- background: #fff;
- border-radius: 8px;
- box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 2px 4px 0 rgb(14 30 37 / 12%);
- color: rgb(14 30 37 / 87%);
- font-size: 1.13rem;
- margin: 1em auto;
- border-collapse: collapse;
- max-width: 100%;
- overflow-x: auto;
- table-layout: fixed;
- width: 66.4%;
- font-family: MaisonNeue-Light, sans-serif;
- display: table;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.table td,
-.table th {
- font-weight: 700;
- min-width: 11.089em;
- padding: 0.85rem 1rem;
- text-align: center;
-}
-
-.table-head {
- font-weight: 900;
- font-family: MaisonNeue-Demi, sans-serif;
- font-size: 1.25rem;
-}
-
-.table tbody th {
- font-weight: 700;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.table td:first-child,
-.table th:first-child {
- text-align: left;
-}
-
-/* opensource and docs promotion */
-.docs-promo {
- display: flex;
- padding: 100px 0;
- background: #fff8f6;
- justify-content: center;
-}
-
-.docs-promo-text {
- display: flex;
- justify-content: center;
- flex-flow: column;
-}
-
-.docs-promo-video {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 50%;
-}
-
-.docs-promo-video > iframe {
- width: 500px;
- height: 288px;
-}
-
-.docs-promo-video .vjs-has-started .vjs-big-play-button {
- display: none !important;
-}
-
-.oss-promo {
- display: flex;
- padding: 80px 0;
- justify-content: center;
- background: #121010;
- color: white;
-}
-
-.oss-promo-inwrapper {
- display: flex;
- flex-direction: column;
- text-align: left;
-}
-
-.oss-promo-head {
- font-size: 2.4rem;
-}
-
-.oss-promo-subtitle {
- font-size: 1.13rem;
- color: #615d5d;
- letter-spacing: 0.2px;
- font-family: MaisonNeue-Light, sans-serif;
- font-weight: 700;
- text-align: center;
-}
-
-.oss-promo-cta {
- margin: 0 auto;
- background: #080808;
- display: flex;
- width: fit-content;
- font-size: 0.95rem;
- border-style: solid;
- border-radius: 32px;
- border-width: 1.75px;
- padding: 5px 12px;
- transition: background 0.5s;
-}
-
-.oss-promo a {
- color: white;
-}
-
-.oss-promo-cta:hover {
- background: hsl(0deg 100% 100% / 80%);
- color: #080808;
-}
-
-.oss-promo-cta:hover > a {
- color: #080808;
-}
-
-/* Events and newsletter */
-.event-card-container {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
-}
-
-.event-card {
- border-style: solid;
- border-color: #fff;
- box-shadow: 0 4px 23px rgb(0 0 0 / 10%);
- font-size: 0.95rem;
- font-family: MaisonNeue-Light, sans-serif;
- font-weight: 700;
- padding: 20px;
- width: 230px;
- height: 200px;
- margin: 0 20px;
- border-radius: 10px;
- position: relative;
-}
-
-.event-card-title {
- position: absolute;
- top: 25px;
-}
-
-.event-card-time {
- position: absolute;
- top: 55%;
- color: #6a6a6a;
-}
-
-.event-card-read {
- position: absolute;
- bottom: 25px;
-}
-
-.newsletter {
- display: flex;
- font-weight: 700;
- font-family: MaisonNeue-Light, sans-serif;
- font-size: 0.95rem;
- color: #615d5d;
- letter-spacing: 0.2px;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- margin: 25px 0;
-}
-
-.news-button {
- border: none;
- padding: 5px 30px;
- border-style: solid;
- border-radius: 20px;
- background: #030c16;
- color: white;
- margin: 0;
- text-decoration: none;
- transition: all 0.3s;
-}
-
-.news-button:hover {
- background: #9b9b9b;
- color: white;
- text-decoration: none;
-}
-
-.endcta-text {
- text-align: center;
- font-size: 3.5rem;
- font-family: MaisonNeue-ExtraBold, sans-serif;
-}
-
-.endcta-btns {
- display: flex;
- justify-content: center;
- padding-bottom: 2rem;
-}
-
-.rocket {
- width: 6vw;
- height: auto;
- transform: rotate(45deg);
-}
-
-/* footer */
-.footer__title {
- font-family: MaisonNeue-Medium, sans-serif !important;
-}
-
-.footer__links .footer__title {
- font-weight: 700;
- font-size: 1.1rem;
-}
-
-.footer__links .footer__item a {
- opacity: 0.94;
-}
-
-.footer__links a:hover {
- opacity: 1;
- text-decoration: none;
-}
-
-.footer__bottom {
- margin-top: 36px;
-}
-
-.footer__bottom a[href^="https://www.apache.org/"] {
- opacity: 1;
-}
-
-.footer__bottom a[href^="https://www.apache.org/"]:hover {
- transform: scale(0.5);
-}
-
-.footer__bottom a[href^="https://www.apache.org/"] img {
- margin-top: 0;
- background: white;
- padding: 8px 20px 6px 19px;
- border-radius: 24px;
-}
-
-.footer__copyright {
- font-size: 12px;
- max-width: 680px;
- margin: 0 auto;
- opacity: 0.88;
-}
-
-/* help page */
-.help-page .cards {
- margin-top: 38px;
- margin-bottom: 56px;
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-gap: 36px;
-}
-
-.help-page .card {
- padding: 24px 28px 18px;
- border: 1px solid #eee;
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 3%);
-}
-
-.help-page .card .header {
- padding: 0;
-}
-
-.help-page .card h2 {
- display: flex;
- align-items: center;
-}
-
-.help-page .card h2 img {
- padding-bottom: 2px;
- height: 28px;
- margin-right: 14px;
-}
-
-.help-page #documents-icon {
- margin-right: 10px;
- margin-left: -6px;
-}
-
-.help-page .card p {
- color: var(--color-help-subtitle);
-}
-
-.help-page .card .buttons {
- margin-top: 18px;
- display: flex;
-}
-
-.help-page .card .buttons svg {
- height: 12px;
- margin-left: 4px;
- transition: transform 0.3s;
-}
-
-.help-page .card .buttons a {
- font-size: 18px;
- font-weight: 600;
- transition: all 0.3s;
- margin-right: 32px;
-}
-
-.help-page .card .buttons a:hover {
- text-decoration: none;
-}
-
-.help-page .card .buttons a:hover svg {
- transform: translateX(2px);
-}
-
-.team-githubLogo {
- height: 24px;
-}
-
-.downloads-subtitle {
- color: var(--color-downloads-subtitle);
-}
-
-.downloads-leftsidelinks {
- color: var(--color-downloads-leftsidelinks);
-}
-
-.downloads-leftsidelink:hover {
- color: var(--color-downloads-leftsidelink-hover);
-}
-
-.downloads-versioninfo {
- color: var(--color-downloads-rightside-versioninfo);
-}
-
-.downloads-versioninfo-span {
- color: var(--color-downloads-rightside-versioninfo-span);
-}
-
-.downloads-dropdown {
- background-color: var(--color-downloads-dropdown);
-}
-
-.download-dropdown-item:hover {
- background-color: var(--color-downloads-dropdown-items);
-}
-
-.team-repocard {
- color: var(--color-team-repocard);
-}
-
-.team-repocard:hover {
- color: var(--color-team-repocard-hover);
-}
-
-.docs-subtitle {
- color: var(--color-docs-subtitle);
-}
-
-.docs-versioninfo {
- color: var(--color-docs-versioninfo);
-}
-
-.pic-wrapper {
- width: 350px;
- position: fixed;
- display: flex;
- right: 0;
- bottom: 0;
- z-index: 999;
- outline: 0;
- overflow: auto;
- border: 0;
- box-shadow: 0 0 20px -12px #626365;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.pic-wrapper a {
- display: flex;
-}
-
-.pic-wrapper-close {
- position: absolute;
- z-index: 1000;
- top: 10px;
- right: 10px;
- padding: 5px;
- font-weight: 900;
- color: rgb(135 151 172);
- font-size: 16px;
- outline: none;
- border-radius: 100px;
- border: 1px solid transparent;
-}
-
-.pic-wrapper-close:hover {
- cursor: pointer;
-}
-
-/* stylelint-disable-next-line no-descending-specificity */
-.pic-wrapper-close svg {
- width: 10px;
- height: 10px;
- display: inherit;
-}
-
-@media only screen and (max-width: 440px) {
- .pic-wrapper {
- width: 70%;
- }
-}
-
-/* plugin hub section */
-.plugin-logo {
- margin-top: 10px;
- max-width: 250px;
- max-height: 180px;
- transform: scale(1);
- transition: transform 0.5s ease;
-}
-
-.plugin-logo.default {
- opacity: 0.2;
-}
-
-.overflow {
- overflow: hidden;
-}
-
-.plugin-logo:hover {
- transform: scale(1.2);
-}
-
-.read-more-link {
- color: #d0312d;
- font-size: 0.8rem;
- font-weight: 500;
- text-align: left;
- padding-bottom: 2px;
- display: flex;
-}
-
-.read-more-link:hover {
- color: var(--color-primary);
- text-decoration: var(--ifm-link-hover-decoration);
-}
-
-/* Sidebar Section */
-.sidebar-link {
- color: #d0312d;
-}
-
-.sidebar-link :hover {
- color: #ffb3b3;
-}
-
-/* Mobile-phones and tablet styles */
-@media only screen and (min-width: 300px) and (max-width: 1100px) {
- body {
- overflow-x: hidden !important;
- }
-
- .hero-sec-wrap {
- display: block;
- height: fit-content;
- }
-
- .homeCanvas-overlay {
- position: absolute;
- width: 100vw;
- height: 50vh;
- background: #ebe6dc;
- top: -1px;
- right: 0;
- }
-
- .hero-text {
- height: 50%;
- width: 100%;
- padding: 5rem 0 0 6vw;
- }
-
- .hero-title {
- width: 100vw;
- font-size: 3.4rem;
- }
-
- .hero-subtitle {
- font-size: 1.05rem;
- line-height: 28px;
- margin: 25px 0 24px;
- padding-right: 20px;
- }
-
- .add-margin {
- margin: 30px 0 0;
- }
-
- .homeCanvas {
- width: 100vw;
- height: 50vh;
- }
-
- .hero-infograph {
- overflow: hidden;
- }
-
- .hldesign-graphic {
- width: 100%;
- }
-
- .arch-scale-svg {
- display: none;
- }
-
- .arch-card-border {
- width: 100%;
- left: 0;
- top: 10px;
- }
-
- .arch-head,
- .compare-head,
- .testimonials-head,
- .docs-promo-head,
- .oss-promo-head {
- left: 7%;
- width: 83%;
- }
-
- .arch-subtitle,
- .compare-subtitle,
- .testimonials-subtitle,
- .docs-promo-subtitle,
- .oss-promo-subtitle {
- left: 7%;
- width: 85%;
- }
-
- .add-left-margin {
- position: relative;
- left: 7%;
- }
-
- .add-left-margin-feat {
- position: absolute;
- left: 7%;
- }
-
- .bottom-pos {
- bottom: 34%;
- }
-
- .feat-head {
- font-size: 2.13rem;
- width: 84%;
- }
-
- .feat-head-desc {
- left: 7%;
- }
-
- .feat-desc {
- width: 83%;
- left: 7%;
- }
-
- .feat-container-d {
- display: none;
- }
-
- .feat-container-m {
- display: block;
- }
-
- .benefit {
- background: #fff8f6;
- padding: 50px 0;
- height: 100vh;
- }
-
- .row-benefit {
- margin: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-flow: column-reverse;
- position: absolute;
- height: 100vh;
- width: 100vw;
- }
-
- .benefit-infograph {
- width: 100%;
- padding: 0 0 60px;
- }
-
- .row-reverse {
- flex-flow: column;
- }
-
- .row-hidden {
- opacity: 0;
- }
-
- .table {
- width: 100%;
- display: block;
- }
-
- .docs-promo {
- flex-flow: column-reverse;
- padding: 50px 0;
- }
-
- .docs-promo-video {
- width: 100%;
- }
-
- .docs-promo-video > video {
- padding: 0 26px 35px;
- width: 100%;
- height: auto;
- }
-
- .oss-promo {
- flex-flow: column;
- background: #121010;
- padding: 50px 0 0;
- }
-
- .oss-promo-text {
- width: 100%;
- }
-
- .oss-promo-infograph {
- width: 100%;
- margin-top: 30px;
- }
-
- .event-card {
- margin: 0 20px 20px;
- }
-
- .event-card-container {
- flex-flow: column;
- }
-
- .newsletter > p {
- text-align: center;
- }
-
- .endcta-text {
- font-size: 1.7rem;
- }
-
- .navbar {
- transform: none !important;
- }
-
- .rocket {
- width: 12vw;
- height: auto;
- transform: rotate(45deg);
- }
-}
-
-@media only screen and (min-height: 500px) and (max-height: 670px) {
- .benefit-infograph {
- width: 70%;
- padding: 0 0 60px;
- }
-}
-
-@media only screen and (min-width: 768px) {
- .react-toggle {
- display: none;
- }
-
- .arch-card-caption > p {
- width: 50%;
- }
-}
-
-.bottom-pos {
- bottom: 34%;
-}
-
-@media only screen and (min-device-width: 768px) and (max-device-width: 1100px) {
- .feat-container-d {
- display: none;
- }
-
- .feat-container-m {
- display: block;
- }
-}
-
-@media only screen and (min-device-width: 300px) and (max-device-width: 360px) {
- .hero-title {
- font-size: 2.95rem;
- }
-
- .hero-infograph {
- overflow: hidden;
- }
-
- .endcta-text {
- font-size: 1.6rem;
- }
-
- .arch-head,
- .compare-head,
- .testimonials-head,
- .docs-promo-head,
- .oss-promo-head {
- left: 7%;
- width: 93%;
- }
-
- .benefit .feat-desc {
- font-size: 0.85rem;
- }
-
- .oss-promo-infograph {
- overflow: hidden;
- }
-}
-
-@media (min-width: 1600px) and (max-width: 2080px) {
- .hero-title {
- width: 40vw;
- font-size: 5.2rem;
- }
-
- .hero-subtitle {
- width: 40vw;
- }
-
- .bottom-pos {
- bottom: 38%;
- }
-
- .arch-scale-svg {
- transform: scale(1.2);
- }
-}
-
-.rc-image {
- display: inline-flex;
- position: relative;
-}
-
-.rc-image-img {
- width: 100%;
- height: auto;
-}
-
-.rc-image-img-placeholder {
- background-color: #f3f3f3;
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjhweCIgaGVpZ2h0PSIyMnB4IiB2aWV3Qm94PSIwIDAgMjggMjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1LjIgKDc4MTgxKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5pbWFnZS1maWxs5aSH5Lu9PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgP [...]
-}
-
-.rc-image-placeholder {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
-}
-
-.rc-image-mask {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- background: rgb(0 0 0 / 30%);
- opacity: 0;
- pointer-events: none;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- transition: opacity 0.3s;
-}
-
-.rc-image:hover .rc-image-mask {
- opacity: 1;
-}
-
-.rc-image-preview {
- text-align: center;
- height: 100%;
- pointer-events: none;
-}
-
-.rc-image-preview-body {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
-}
-
-.rc-image-preview.zoom-enter,
-.rc-image-preview.zoom-appear {
- transform: none;
- opacity: 0;
- animation-duration: 0.3s;
-}
-
-.rc-image-preview-mask {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 1000;
- height: 100%;
- background-color: #000;
- opacity: 0.8;
-}
-
-.rc-image-preview-mask-hidden {
- display: none;
-}
-
-.rc-image-preview-img {
- cursor: grab;
- transform: scale3d(1, 1, 1);
- transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
- user-select: none;
- vertical-align: middle;
- max-width: 100%;
- max-height: 100%;
- pointer-events: auto;
-}
-
-.rc-image-preview-img-wrapper {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
-}
-
-.rc-image-preview-img-wrapper::before {
- content: "";
- display: inline-block;
- height: 50%;
- width: 1px;
- margin-right: -1px;
-}
-
-.rc-image-preview-moving .rc-image-preview-img {
- cursor: grabbing;
-}
-
-.rc-image-preview-moving .rc-image-preview-img-wrapper {
- transition-duration: 0s;
-}
-
-.rc-image-preview-wrap {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 1000;
- overflow: auto;
- outline: 0;
- -webkit-overflow-scrolling: touch;
-}
-
-.rc-image-preview-operations {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- pointer-events: auto;
- list-style: none;
- position: absolute;
- display: flex;
- top: 0;
- right: 0;
- width: 100%;
- align-items: center;
- flex-direction: row-reverse;
- z-index: 1;
- color: #bbb;
- background: rgb(0 0 0 / 45%);
-}
-
-.rc-image-preview-operations-progress {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
-}
-
-.rc-image-preview-operations-operation {
- padding: 10px;
- cursor: pointer;
- margin-left: 10px;
-}
-
-.rc-image-preview-operations-operation-disabled {
- pointer-events: none;
- color: #6f6f6f;
-}
-
-.rc-image-preview-operations-operation:last-of-type {
- margin-left: 0;
-}
-
-.rc-image-preview-operations-icon {
- font-size: 18px;
-}
-
-.rc-image-preview-switch-left {
- position: absolute;
- left: 10px;
- top: 50%;
- width: 44px;
- height: 44px;
- margin-top: -22px;
- background: rgb(187 187 187 / 45%);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1;
- pointer-events: auto;
- color: #bbb;
-}
-
-.rc-image-preview-switch-left-disabled {
- background: rgb(187 187 187 / 30%);
- color: #6f6f6f;
- cursor: not-allowed;
-}
-
-.rc-image-preview-switch-left-disabled > .anticon {
- cursor: not-allowed;
-}
-
-.rc-image-preview-switch-left > .anticon {
- font-size: 24px;
-}
-
-.rc-image-preview-switch-right {
- position: absolute;
- right: 10px;
- top: 50%;
- width: 44px;
- height: 44px;
- margin-top: -22px;
- background: rgb(187 187 187 / 45%);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1;
- pointer-events: auto;
- color: #bbb;
-}
-
-.rc-image-preview-switch-right-disabled {
- background: rgb(187 187 187 / 20%);
- color: #6f6f6f;
- cursor: not-allowed;
-}
-
-.rc-image-preview-switch-right-disabled > .anticon {
- cursor: not-allowed;
-}
-
-.rc-image-preview-switch-right > .anticon {
- font-size: 24px;
-}
-
-.fade-enter,
-.fade-appear {
- animation-duration: 0.2s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-
-.fade-leave {
- animation-duration: 0.2s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-
-.fade-enter.fade-enter-active,
-.fade-appear.fade-appear-active {
- animation-name: rc-image-fade-in;
- animation-play-state: running;
-}
-
-.fade-leave.fade-leave-active {
- animation-name: rc-image-fade-out;
- animation-play-state: running;
- pointer-events: none;
-}
-
-/* stylelint-disable-next-line no-duplicate-selectors */
-.fade-enter,
-.fade-appear {
- opacity: 0;
- animation-timing-function: linear;
-}
-
-/* stylelint-disable-next-line no-duplicate-selectors */
-.fade-leave {
- animation-timing-function: linear;
-}
-
-@keyframes rc-image-fade-in {
- 0% {
- opacity: 0;
- }
-
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes rc-image-fade-out {
- 0% {
- opacity: 1;
- }
-
- 100% {
- opacity: 0;
- }
-}
-
-.zoom-enter,
-.zoom-appear {
- animation-duration: 0.2s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-
-.zoom-leave {
- animation-duration: 0.2s;
- animation-fill-mode: both;
- animation-play-state: paused;
-}
-
-.zoom-enter.zoom-enter-active,
-.zoom-appear.zoom-appear-active {
- animation-name: rc-image-zoom-in;
- animation-play-state: running;
-}
-
-.zoom-leave.zoom-leave-active {
- animation-name: rc-image-zoom-out;
- animation-play-state: running;
- pointer-events: none;
-}
-
-/* stylelint-disable-next-line no-duplicate-selectors */
-.zoom-enter,
-.zoom-appear {
- transform: scale(0);
- opacity: 0;
- animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
-}
-
-/* stylelint-disable-next-line no-duplicate-selectors */
-.zoom-leave {
- animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
-}
-
-@keyframes rc-image-zoom-in {
- 0% {
- transform: scale(0.2);
- opacity: 0;
- }
-
- 100% {
- transform: scale(1);
- opacity: 1;
- }
-}
-
-@keyframes rc-image-zoom-out {
- 0% {
- transform: scale(1);
- }
-
- 100% {
- transform: scale(0.2);
- opacity: 0;
- }
-}
diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss
new file mode 100644
index 00000000000..a705253eb63
--- /dev/null
+++ b/website/src/css/customTheme.scss
@@ -0,0 +1,480 @@
+/* stylelint-disable custom-property-pattern */
+
+@import "./rc-image";
+
+:root {
+ --ifm-color-primary-lightest: rgb(228 222 222);
+ --ifm-color-primary-lighter: #d0312d;
+ --ifm-color-primary-light: #f8f8fa;
+ --ifm-color-primary: #e8433e;
+ --ifm-color-dark: #000;
+ --ifm-color-primary-dark: #a5a0a0;
+ --ifm-color-primary-darker: #9a2521;
+ --ifm-color-shadow--lw: #7f1e1b;
+ --color-title: #101827;
+ --color-github-button: #101827;
+ --color-github-button-hover: #000;
+ --color-primary: #e8433e;
+ --color-subtitle: #000;
+ --color-secondary: #4b5563;
+ --color-secondary-bg: #f3f4f6;
+ --color-secondary-text: #444952;
+ --color-border: #eee;
+ --color-downloads-subtitle: #374051;
+ --color-downloads-leftsidelinks: #4b5563;
+ --color-downloads-leftsidelink-hover: #111827;
+ --color-downloads-rightside-versioninfo: #6b7280;
+ --color-downloads-rightside-versioninfo-span: #374151;
+ --color-team-repocard: #374151;
+ --color-team-repocard-hover: #111827;
+ --color-docs-subtitle: #374151;
+ --color-docs-versioninfo: #4b5563;
+ --color-help-subtitle: #6b7280;
+ --color-downloads-dropdown: #fff;
+ --color-downloads-dropdown-items: #f3f4f6;
+}
+
+html[data-theme="dark"] {
+ --color-secondary-bg: #121212;
+ --ifm-color-dark: #b0b0b0;
+ --color-title: #f0f0f0;
+ --color-subtitle: #f0f0f0;
+ --color-github-button: #121212;
+ --color-secondary-text: #b0b0b0;
+ --color-border: #b0b0b0;
+ --color-downloads-subtitle: #f0f0f0;
+ --color-downloads-leftsidelinks: #909397;
+ --color-downloads-leftsidelink-hover: #f0f0f0;
+ --color-downloads-rightside-versioninfo: #f0f0f0;
+ --color-downloads-rightside-versioninfo-span: #909397;
+ --color-team-repocard: #f0f0f0;
+ --color-team-repocard-hover: #909397;
+ --color-docs-subtitle: #f0f0f0;
+ --color-docs-versioninfo: #b0b0b0;
+ --color-help-subtitle: #f0f0f0;
+ --color-downloads-dropdown: #18191a;
+ --color-downloads-dropdown-items: #4c4e50;
+}
+
+@font-face {
+ font-family: MaisonNeue-Medium;
+ src:
+ local("MaisonNeue-Medium"),
+ url("https://static.apiseven.com/202202/MaisonNeue-Medium.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+@font-face {
+ font-family: MaisonNeue-Bold;
+ src:
+ local("MaisonNeue-Bold"),
+ url("https://static.apiseven.com/202202/MaisonNeue-Bold.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+@font-face {
+ font-family: MaisonNeue-Light;
+ src:
+ local("MaisonNeue-Light"),
+ url("https://static.apiseven.com/202202/MaisonNeue-Light.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+@font-face {
+ font-family: MaisonNeue-Demi;
+ src:
+ local("MaisonNeue-Demi"),
+ url("https://static.apiseven.com/202202/MaisonNeue-Demi.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+@font-face {
+ font-family: MaisonNeue-ExtraBold;
+ src:
+ local("MaisonNeue-ExtraBold"),
+ url("https://static.apiseven.com/202202/MaisonNeue-ExtraBold.otf")
+ format("opentype");
+ font-display: optional;
+}
+
+body {
+ overflow-x: hidden;
+}
+
+body,
+h1,
+h2,
+h3 {
+ font-family: MaisonNeue-Medium, apple-system, system-ui, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizelegibility;
+ text-size-adjust: 100%;
+}
+
+div.inner {
+ color: var(--ifm-color-primary);
+}
+
+.image {
+ padding: 75px 10px 75px 75px;
+}
+
+.more-users {
+ padding-top: 75px;
+}
+
+.post-header {
+ padding-top: 50px;
+}
+
+.header {
+ padding-top: 50px;
+}
+
+.color-primary {
+ color: var(--ifm-color-primary);
+}
+
+header h2 {
+ color: var(--color-primary);
+}
+
+@media only screen and (max-width: 414px) {
+ .hide-on-mobile {
+ display: none;
+ }
+}
+
+/* navbar */
+.navbar__link:hover,
+.navbar__link--active {
+ color: var(--color-primary);
+}
+
+.navbar__title {
+ font-size: 18px;
+ height: 30px;
+}
+
+/* button */
+.button {
+ margin: 0 10px;
+ padding: 12px 24px;
+ font-size: 18px;
+ font-weight: 600;
+ border-radius: 10px;
+ border: none;
+ background: #fee2e2;
+ color: #ef4444;
+ transition: all 0.3s;
+}
+
+.button:hover {
+ background: #fecaca;
+ color: #ef4444;
+}
+
+.button.github {
+ background: var(--color-github-button);
+ color: white;
+ display: inline-flex;
+ align-items: center;
+ margin-bottom: 15px;
+}
+
+.button.github .github-logo {
+ height: 24px;
+ margin: 0 12px 1px 0;
+}
+
+.button.github:hover {
+ background: var(--color-github-button-hover);
+}
+
+.button-wrapper {
+ margin: 0 -10px;
+}
+
+.button.secondary {
+ background: #f3f4f6;
+ color: #1f2937;
+ border: 1px solid #d1d5db;
+ box-sizing: border-box;
+ margin-bottom: 15px;
+}
+
+.button.secondary:hover {
+ background: #e5e7eb;
+}
+
+@media only screen and (max-width: 414px) {
+ .button {
+ margin: 0;
+ }
+
+ .button.secondary,
+ .button.github {
+ width: 100%;
+ }
+
+ .button-wrapper {
+ margin: 0;
+ }
+}
+
+a {
+ color: var(--ifm-color-dark);
+ cursor: pointer;
+}
+
+a:hover {
+ color: var(--color-primary);
+ text-decoration: none;
+}
+
+.markdown a {
+ color: var(--color-primary);
+}
+
+.arrow-btn {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 1002;
+}
+
+/* Sidebar Section */
+.sidebar-link {
+ color: #d0312d;
+}
+
+.sidebar-link :hover {
+ color: #ffb3b3;
+}
+
+.arch-head,
+.compare-head,
+.testimonials-head,
+.docs-promo-head {
+ font-size: 2.4rem;
+ position: relative;
+ left: 16.8%;
+ width: 83.2%;
+}
+
+.arch-subtitle,
+.compare-subtitle,
+.testimonials-subtitle,
+.docs-promo-subtitle {
+ font-size: 1.13rem;
+ position: relative;
+ left: 16.8%;
+ width: 70%;
+ color: #615d5d;
+ letter-spacing: 0.2px;
+ font-family: MaisonNeue-Light, sans-serif;
+ font-weight: 700;
+}
+
+.add-left-margin {
+ position: relative;
+ left: 16.8%;
+}
+
+/* Mobile-phones and tablet styles */
+@media only screen and (min-width: 300px) and (max-width: 1100px) {
+ body {
+ overflow-x: hidden !important;
+ }
+
+ .hero-sec-wrap {
+ display: block;
+ height: fit-content;
+ }
+
+ .homeCanvas-overlay {
+ position: absolute;
+ width: 100vw;
+ height: 50vh;
+ background: #ebe6dc;
+ top: -1px;
+ right: 0;
+ }
+
+ .hero-text {
+ height: 50%;
+ width: 100%;
+ padding: 5rem 0 0 6vw;
+ }
+
+ .hero-title {
+ width: 100vw;
+ font-size: 3.4rem;
+ }
+
+ .hero-subtitle {
+ font-size: 1.05rem;
+ line-height: 28px;
+ margin: 25px 0 24px;
+ padding-right: 20px;
+ }
+
+ .add-margin {
+ margin: 30px 0 0;
+ }
+
+ .homeCanvas {
+ width: 100vw;
+ height: 50vh;
+ }
+
+ .hero-infograph {
+ overflow: hidden;
+ }
+
+ .add-left-margin {
+ position: relative;
+ left: 7%;
+ }
+
+ .add-left-margin-feat {
+ position: absolute;
+ left: 7%;
+ }
+
+ .bottom-pos {
+ bottom: 34%;
+ }
+
+ .feat-head {
+ font-size: 2.13rem;
+ width: 84%;
+ }
+
+ .feat-head-desc {
+ left: 7%;
+ }
+
+ .feat-desc {
+ width: 83%;
+ left: 7%;
+ }
+
+ .feat-container-d {
+ display: none;
+ }
+
+ .feat-container-m {
+ display: block;
+ }
+
+ .benefit {
+ background: #fff8f6;
+ padding: 50px 0;
+ height: 100vh;
+ }
+
+ .row-benefit {
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-flow: column-reverse;
+ position: absolute;
+ height: 100vh;
+ width: 100vw;
+ }
+
+ .benefit-infograph {
+ width: 100%;
+ padding: 0 0 60px;
+ }
+
+ .row-reverse {
+ flex-flow: column;
+ }
+
+ .row-hidden {
+ opacity: 0;
+ }
+
+ .table {
+ width: 100%;
+ display: block;
+ }
+}
+
+@media only screen and (min-height: 500px) and (max-height: 670px) {
+ .benefit-infograph {
+ width: 70%;
+ padding: 0 0 60px;
+ }
+}
+
+@media only screen and (min-width: 768px) {
+ .react-toggle {
+ display: none;
+ }
+
+ .arch-card-caption > p {
+ width: 50%;
+ }
+}
+
+.bottom-pos {
+ bottom: 34%;
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1100px) {
+ .feat-container-d {
+ display: none;
+ }
+
+ .feat-container-m {
+ display: block;
+ }
+}
+
+@media only screen and (min-device-width: 300px) and (max-device-width: 360px) {
+ .hero-title {
+ font-size: 2.95rem;
+ }
+
+ .hero-infograph {
+ overflow: hidden;
+ }
+
+ .endcta-text {
+ font-size: 1.6rem;
+ }
+
+ .arch-head,
+ .compare-head,
+ .testimonials-head,
+ .docs-promo-head,
+ .oss-promo-head {
+ left: 7%;
+ width: 93%;
+ }
+
+ .benefit .feat-desc {
+ font-size: 0.85rem;
+ }
+
+ .oss-promo-infograph {
+ overflow: hidden;
+ }
+}
+
+@media (min-width: 1600px) and (max-width: 2080px) {
+ .bottom-pos {
+ bottom: 38%;
+ }
+
+ .arch-scale-svg {
+ transform: scale(1.2);
+ }
+}
diff --git a/website/src/css/help.scss b/website/src/css/help.scss
new file mode 100644
index 00000000000..b1d260319de
--- /dev/null
+++ b/website/src/css/help.scss
@@ -0,0 +1,159 @@
+.help-page .cards {
+ margin-top: 38px;
+ margin-bottom: 56px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 36px;
+}
+
+.help-page .card {
+ padding: 24px 28px 18px;
+ border: 1px solid #eee;
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 3%);
+}
+
+.help-page .card .header {
+ padding: 0;
+}
+
+.help-page .card h2 {
+ display: flex;
+ align-items: center;
+}
+
+.help-page .card h2 img {
+ padding-bottom: 2px;
+ height: 28px;
+ margin-right: 14px;
+}
+
+.help-page #documents-icon {
+ margin-right: 10px;
+ margin-left: -6px;
+}
+
+.help-page .card p {
+ color: var(--color-help-subtitle);
+}
+
+.help-page .card .buttons {
+ margin-top: 18px;
+ display: flex;
+}
+
+.help-page .card .buttons svg {
+ height: 12px;
+ margin-left: 4px;
+ transition: transform 0.3s;
+}
+
+.help-page .card .buttons a {
+ font-size: 18px;
+ font-weight: 600;
+ transition: all 0.3s;
+ margin-right: 32px;
+}
+
+.help-page .card .buttons a:hover {
+ text-decoration: none;
+}
+
+.help-page .card .buttons a:hover svg {
+ transform: translateX(2px);
+}
+
+.team-githubLogo {
+ height: 24px;
+}
+
+.downloads-subtitle {
+ color: var(--color-downloads-subtitle);
+}
+
+.downloads-leftsidelinks {
+ color: var(--color-downloads-leftsidelinks);
+}
+
+.downloads-leftsidelink:hover {
+ color: var(--color-downloads-leftsidelink-hover);
+}
+
+.downloads-versioninfo {
+ color: var(--color-downloads-rightside-versioninfo);
+}
+
+.downloads-versioninfo-span {
+ color: var(--color-downloads-rightside-versioninfo-span);
+}
+
+.downloads-dropdown {
+ background-color: var(--color-downloads-dropdown);
+}
+
+.download-dropdown-item:hover {
+ background-color: var(--color-downloads-dropdown-items);
+}
+
+.team-repocard {
+ color: var(--color-team-repocard);
+}
+
+.team-repocard:hover {
+ color: var(--color-team-repocard-hover);
+}
+
+.docs-subtitle {
+ color: var(--color-docs-subtitle);
+}
+
+.docs-versioninfo {
+ color: var(--color-docs-versioninfo);
+}
+
+.pic-wrapper {
+ width: 350px;
+ position: fixed;
+ display: flex;
+ right: 0;
+ bottom: 0;
+ z-index: 999;
+ outline: 0;
+ overflow: auto;
+ border: 0;
+ box-shadow: 0 0 20px -12px #626365;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.pic-wrapper a {
+ display: flex;
+}
+
+.pic-wrapper-close {
+ position: absolute;
+ z-index: 1000;
+ top: 10px;
+ right: 10px;
+ padding: 5px;
+ font-weight: 900;
+ color: rgb(135 151 172);
+ font-size: 16px;
+ outline: none;
+ border-radius: 100px;
+ border: 1px solid transparent;
+}
+
+.pic-wrapper-close:hover {
+ cursor: pointer;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.pic-wrapper-close svg {
+ width: 10px;
+ height: 10px;
+ display: inherit;
+}
+@media only screen and (max-width: 440px) {
+ .pic-wrapper {
+ width: 70%;
+ }
+}
diff --git a/website/src/css/landing-sections/architecture.scss b/website/src/css/landing-sections/architecture.scss
new file mode 100644
index 00000000000..b860c54ca76
--- /dev/null
+++ b/website/src/css/landing-sections/architecture.scss
@@ -0,0 +1,118 @@
+@import '../util';
+
+.hldesign {
+ height: 100%;
+ display: flex;
+ justify-content: center;
+}
+
+.hldesign-graphic {
+ width: 60%;
+ height: auto;
+}
+
+.Architecture_svg__architecture {
+ font-family: MaisonNeue-Medium, sans-serif;
+}
+
+.arch {
+ background: linear-gradient(180deg, #e2ecff 15%, #fff 90%);
+ position: relative;
+ z-index: 1;
+ padding: 50px 0;
+ overflow: hidden;
+}
+
+.arch-card-caption {
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ color: #615d5d;
+}
+
+.arch-card-caption > p {
+ width: 90%;
+ letter-spacing: 0.2px;
+ font-family: MaisonNeue-Light, sans-serif;
+ font-weight: 700;
+ text-align: center;
+ position: relative;
+ bottom: -15px;
+ font-size: 1rem;
+}
+
+.arch-card-border {
+ z-index: -10;
+ position: absolute;
+ width: 66%;
+ height: 100%;
+ border-style: solid;
+ top: 15px;
+ left: 17%;
+ border-color: white;
+ background: white;
+ filter: drop-shadow(0 4px 10px rgb(0 0 0 / 25%));
+}
+
+.arch-head,
+.compare-head,
+.testimonials-head,
+.docs-promo-head {
+ font-size: 2.4rem;
+ position: relative;
+ left: 16.8%;
+ width: 83.2%;
+}
+
+.arch-subtitle,
+.compare-subtitle,
+.testimonials-subtitle,
+.docs-promo-subtitle {
+ font-size: 1.13rem;
+ position: relative;
+ left: 16.8%;
+ width: 70%;
+ color: #615d5d;
+ letter-spacing: 0.2px;
+ font-family: MaisonNeue-Light, sans-serif;
+ font-weight: 700;
+}
+
+.add-left-margin {
+ position: relative;
+ left: 16.8%;
+}
+
+@include respond-between(sm, md) {
+ .hldesign-graphic {
+ width: 100%;
+ }
+
+ .arch-scale-svg {
+ display: none;
+ }
+
+ .arch-card-border {
+ width: 100%;
+ left: 0;
+ top: 10px;
+ }
+
+ .arch-head,
+ .compare-head,
+ .testimonials-head,
+ .docs-promo-head,
+ .oss-promo-head {
+ left: 7%;
+ width: 83%;
+ }
+
+ .arch-subtitle,
+ .compare-subtitle,
+ .testimonials-subtitle,
+ .docs-promo-subtitle,
+ .oss-promo-subtitle {
+ left: 7%;
+ width: 85%;
+ }
+}
diff --git a/website/src/css/landing-sections/benefits.scss b/website/src/css/landing-sections/benefits.scss
new file mode 100644
index 00000000000..8e51831be71
--- /dev/null
+++ b/website/src/css/landing-sections/benefits.scss
@@ -0,0 +1,39 @@
+.row-benefit {
+ margin: 100px 5px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: fit-content;
+}
+
+.benefit {
+ background: #fff8f6;
+ padding: 50px 0;
+}
+
+.benefit-infograph {
+ width: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.feat-head-desc {
+ font-size: 1.4rem;
+ color: #363130;
+ opacity: 0.5;
+ position: relative;
+ left: 17%;
+ margin: 0;
+ line-height: 1.8;
+ width: fit-content;
+}
+
+.feat-desc {
+ margin: 10px 0;
+ font-size: 1.13rem;
+ color: #615d5d;
+ font-family: MaisonNeue-Light, sans-serif;
+ width: 65%;
+ left: 17%;
+}
diff --git a/website/src/css/landing-sections/comparison.scss b/website/src/css/landing-sections/comparison.scss
new file mode 100644
index 00000000000..e619344ecb5
--- /dev/null
+++ b/website/src/css/landing-sections/comparison.scss
@@ -0,0 +1,56 @@
+.compare {
+ padding: 50px 0;
+}
+
+.table tbody td:nth-child(even) {
+ background: rgb(14 30 37 / 2%);
+}
+
+.table tbody tr:nth-child(odd) {
+ background: rgb(14 30 37 / 2%);
+}
+
+.table thead {
+ font-size: 1.13rem;
+}
+
+.table {
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 2px 4px 0 rgb(14 30 37 / 12%);
+ color: rgb(14 30 37 / 87%);
+ font-size: 1.13rem;
+ margin: 1em auto;
+ border-collapse: collapse;
+ max-width: 100%;
+ overflow-x: auto;
+ table-layout: fixed;
+ width: 66.4%;
+ font-family: MaisonNeue-Light, sans-serif;
+ display: table;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.table td,
+.table th {
+ font-weight: 700;
+ min-width: 11.089em;
+ padding: 0.85rem 1rem;
+ text-align: center;
+}
+
+.table-head {
+ font-weight: 900;
+ font-family: MaisonNeue-Demi, sans-serif;
+ font-size: 1.25rem;
+}
+
+.table tbody th {
+ font-weight: 700;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.table td:first-child,
+.table th:first-child {
+ text-align: left;
+}
diff --git a/website/src/css/endcta.module.scss b/website/src/css/landing-sections/endcta.module.scss
similarity index 98%
rename from website/src/css/endcta.module.scss
rename to website/src/css/landing-sections/endcta.module.scss
index afda2110d79..3f377b077c6 100644
--- a/website/src/css/endcta.module.scss
+++ b/website/src/css/landing-sections/endcta.module.scss
@@ -1,4 +1,4 @@
-@import "./util";
+@import "../util";
$apisix-color: #e8433e;
diff --git a/website/src/css/features.module.scss b/website/src/css/landing-sections/features.module.scss
similarity index 99%
rename from website/src/css/features.module.scss
rename to website/src/css/landing-sections/features.module.scss
index db28d522389..e2cd0e5da2c 100644
--- a/website/src/css/features.module.scss
+++ b/website/src/css/landing-sections/features.module.scss
@@ -1,4 +1,4 @@
-@import "./util";
+@import "../util";
.dashboardLink {
color: hsl(0deg 0% 80%);
diff --git a/website/src/css/landing-sections/hero.scss b/website/src/css/landing-sections/hero.scss
new file mode 100644
index 00000000000..ac00c56029e
--- /dev/null
+++ b/website/src/css/landing-sections/hero.scss
@@ -0,0 +1,160 @@
+@import "../util";
+
+@keyframes fade-in-up {
+ from {
+ opacity: 0;
+ transform: translate3d(0, 50%, 0);
+ }
+
+ to {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.hero-title,
+.hero-subtitle,
+.hero-ctas {
+ animation-name: fade-in-up;
+ animation-fill-mode: both;
+ animation-delay: 0s;
+ animation-duration: 1s;
+}
+
+.hero-subtitle {
+ z-index: 100;
+ font-size: 1.1rem;
+ font-family: MaisonNeue-Light, sans-serif;
+ position: relative;
+ color: #615d5d;
+ line-height: 30px;
+ letter-spacing: 0.2px;
+ margin: 25px 0;
+ padding-right: 20px;
+ animation-delay: 0.25s;
+}
+
+.hero-ctas {
+ display: flex;
+ align-items: center;
+ animation-delay: 0.5;
+}
+
+.hero-sec-wrap {
+ display: flex;
+ background: #f4f4f4ad;
+ height: 100vh;
+}
+
+.homeCanvas-overlay {
+ position: absolute;
+ width: 50vw;
+ height: 100vh;
+ background: #fff;
+ top: -1px;
+ right: 0;
+}
+
+.homeCanvas {
+ width: 50vw;
+ height: 100vh;
+}
+
+.hero-text {
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: center;
+ width: 50%;
+ padding: 0 0 0 6vw;
+}
+
+.hero-title {
+ font-family: MaisonNeue-Bold, sans-serif;
+ color: #121212;
+ width: 42vw;
+ font-size: 4.2rem;
+ letter-spacing: 0.2px;
+ margin: 0;
+}
+
+.btn {
+ background: #030c16;
+ border-style: solid;
+ border-width: 1px;
+ border: none;
+ color: white;
+ padding: 5px 20px;
+ border-radius: 20px;
+ font-size: 1rem;
+ text-decoration: none;
+ margin: 0 10px 0 0;
+ transition: all 0.3s;
+}
+
+.btn:hover {
+ background: #9b9b9b;
+ color: white;
+ text-decoration: none;
+}
+
+.btn-docs {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.btn-docs:hover {
+ text-decoration: none;
+}
+
+.btn-docs .goto {
+ color: #000;
+}
+
+.btn-docs:hover .goto,
+.btn-docs:active .goto {
+ opacity: 0.8;
+}
+
+.btn-docs .arrow {
+ width: 30px;
+ height: 30px;
+ position: relative;
+}
+
+.btn-docs .arrow svg {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.btn-docs .arrow polygon,
+.btn-docs .arrow rect {
+ transition: all 250ms;
+}
+
+.btn-docs .arrow rect {
+ opacity: 0;
+}
+
+.btn-docs:hover .arrow polygon {
+ transform: translateX(100px);
+}
+
+.btn-docs:hover .arrow rect {
+ transform: translateX(240px);
+ opacity: 1;
+}
+
+@include respond-between(md, lg) {
+ .hero-title {
+ width: 40vw;
+ font-size: 5.2rem;
+ }
+
+ .hero-subtitle {
+ width: 40vw;
+ }
+}
diff --git a/website/src/css/home-events.module.scss b/website/src/css/landing-sections/home-events.module.scss
similarity index 79%
rename from website/src/css/home-events.module.scss
rename to website/src/css/landing-sections/home-events.module.scss
index c502ccb1990..f4cc5bb66ce 100644
--- a/website/src/css/home-events.module.scss
+++ b/website/src/css/landing-sections/home-events.module.scss
@@ -1,4 +1,4 @@
-@import "./util";
+@import '../util';
$transition-duration: 200ms;
@@ -95,14 +95,38 @@ $transition-duration: 200ms;
.newsletter {
display: flex;
+ font-family: MaisonNeue-Light, sans-serif;
+ font-size: 0.95rem;
+ color: #615d5d;
+ letter-spacing: 0.2px;
align-items: center;
+ justify-content: center;
flex-direction: column;
+ margin: 25px 0;
p {
margin: 2rem 0 1rem;
}
}
+ .newsButton {
+ border: none;
+ padding: 5px 30px;
+ border-style: solid;
+ border-radius: 20px;
+ background: #030c16;
+ color: white;
+ margin: 0;
+ text-decoration: none;
+ transition: all 0.3s;
+
+ &:hover {
+ background: #9b9b9b;
+ color: white;
+ text-decoration: none;
+ }
+ }
+
@include respond-below(sm) {
margin: 4rem 1rem;
align-items: flex-start;
diff --git a/website/src/css/os-promo.module.scss b/website/src/css/landing-sections/os-promo.module.scss
similarity index 97%
rename from website/src/css/os-promo.module.scss
rename to website/src/css/landing-sections/os-promo.module.scss
index 7e916c3d62f..21212cd3891 100644
--- a/website/src/css/os-promo.module.scss
+++ b/website/src/css/landing-sections/os-promo.module.scss
@@ -1,4 +1,4 @@
-@import "./util";
+@import '../util';
.osPromotion {
display: flex;
@@ -25,7 +25,6 @@
& .ossPromoSubtitle {
color: hsl(0deg 0% 78%);
font-size: 1.13rem;
- font-weight: 700;
letter-spacing: 0.2px;
font-family: MaisonNeue-Light, sans-serif;
}
diff --git a/website/src/css/plugins.scss b/website/src/css/plugins.scss
new file mode 100644
index 00000000000..30bce5a28e1
--- /dev/null
+++ b/website/src/css/plugins.scss
@@ -0,0 +1,33 @@
+.plugin-logo {
+ margin-top: 10px;
+ max-width: 250px;
+ max-height: 180px;
+ transform: scale(1);
+ transition: transform 0.5s ease;
+
+ &.default {
+ opacity: 0.2;
+ }
+}
+
+.overflow {
+ overflow: hidden;
+}
+
+.plugin-logo:hover {
+ transform: scale(1.2);
+}
+
+.read-more-link {
+ color: #d0312d;
+ font-size: 0.8rem;
+ font-weight: 500;
+ text-align: left;
+ padding-bottom: 2px;
+ display: flex;
+}
+
+.read-more-link:hover {
+ color: var(--color-primary);
+ text-decoration: var(--ifm-link-hover-decoration);
+}
diff --git a/website/src/css/rc-image.scss b/website/src/css/rc-image.scss
new file mode 100644
index 00000000000..1ddce092669
--- /dev/null
+++ b/website/src/css/rc-image.scss
@@ -0,0 +1,353 @@
+.rc-image {
+ display: inline-flex;
+ position: relative;
+}
+
+.rc-image-img {
+ width: 100%;
+ height: auto;
+}
+
+.rc-image-img-placeholder {
+ background-color: #f3f3f3;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjhweCIgaGVpZ2h0PSIyMnB4IiB2aWV3Qm94PSIwIDAgMjggMjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1LjIgKDc4MTgxKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5pbWFnZS1maWxs5aSH5Lu9PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgP [...]
+}
+
+.rc-image-placeholder {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+.rc-image-mask {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background: rgb(0 0 0 / 30%);
+ opacity: 0;
+ pointer-events: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ transition: opacity 0.3s;
+}
+
+.rc-image:hover .rc-image-mask {
+ opacity: 1;
+}
+
+.rc-image-preview {
+ text-align: center;
+ height: 100%;
+ pointer-events: none;
+}
+
+.rc-image-preview-body {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+}
+
+.rc-image-preview.zoom-enter,
+.rc-image-preview.zoom-appear {
+ transform: none;
+ opacity: 0;
+ animation-duration: 0.3s;
+}
+
+.rc-image-preview-mask {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ height: 100%;
+ background-color: #000;
+ opacity: 0.8;
+}
+
+.rc-image-preview-mask-hidden {
+ display: none;
+}
+
+.rc-image-preview-img {
+ cursor: grab;
+ transform: scale3d(1, 1, 1);
+ transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+ user-select: none;
+ vertical-align: middle;
+ max-width: 100%;
+ max-height: 100%;
+ pointer-events: auto;
+}
+
+.rc-image-preview-img-wrapper {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+
+.rc-image-preview-img-wrapper::before {
+ content: '';
+ display: inline-block;
+ height: 50%;
+ width: 1px;
+ margin-right: -1px;
+}
+
+.rc-image-preview-moving .rc-image-preview-img {
+ cursor: grabbing;
+}
+
+.rc-image-preview-moving .rc-image-preview-img-wrapper {
+ transition-duration: 0s;
+}
+
+.rc-image-preview-wrap {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ overflow: auto;
+ outline: 0;
+ -webkit-overflow-scrolling: touch;
+}
+
+.rc-image-preview-operations {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ pointer-events: auto;
+ list-style: none;
+ position: absolute;
+ display: flex;
+ top: 0;
+ right: 0;
+ width: 100%;
+ align-items: center;
+ flex-direction: row-reverse;
+ z-index: 1;
+ color: #bbb;
+ background: rgb(0 0 0 / 45%);
+}
+
+.rc-image-preview-operations-progress {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.rc-image-preview-operations-operation {
+ padding: 10px;
+ cursor: pointer;
+ margin-left: 10px;
+}
+
+.rc-image-preview-operations-operation-disabled {
+ pointer-events: none;
+ color: #6f6f6f;
+}
+
+.rc-image-preview-operations-operation:last-of-type {
+ margin-left: 0;
+}
+
+.rc-image-preview-operations-icon {
+ font-size: 18px;
+}
+
+.rc-image-preview-switch-left {
+ position: absolute;
+ left: 10px;
+ top: 50%;
+ width: 44px;
+ height: 44px;
+ margin-top: -22px;
+ background: rgb(187 187 187 / 45%);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ pointer-events: auto;
+ color: #bbb;
+}
+
+.rc-image-preview-switch-left-disabled {
+ background: rgb(187 187 187 / 30%);
+ color: #6f6f6f;
+ cursor: not-allowed;
+}
+
+.rc-image-preview-switch-left-disabled > .anticon {
+ cursor: not-allowed;
+}
+
+.rc-image-preview-switch-left > .anticon {
+ font-size: 24px;
+}
... 370 lines suppressed ...