diff --git a/docusaurus.config.ts b/docusaurus.config.ts index f644abe4c87..e9d1b4bb1d4 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -359,8 +359,9 @@ const config: Config = { ], }, prism: { - theme: prismThemes.nightOwl, - darkTheme: prismThemes.okaidia, + theme: prismThemes.github, + darkTheme: prismThemes.oneDark, + additionalLanguages: ["bash", "sql", "python", "yaml", "json"], }, // Change website analytics from Google Analytics to Matomo matomo: { diff --git a/src/components/bootcamp/Card/styles.module.scss b/src/components/bootcamp/Card/styles.module.scss index 7fcbdce8ad7..527828b10bc 100644 --- a/src/components/bootcamp/Card/styles.module.scss +++ b/src/components/bootcamp/Card/styles.module.scss @@ -1,37 +1,46 @@ .card { - border: 1px solid var(--box-border-color); - border-radius: var(--normal-box-radius); - padding: 0 21px; - padding-top: 14px; + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + background-color: var(--color-surface); + padding: 24px; cursor: pointer; + box-shadow: var(--shadow-xs); + transition: border-color var(--motion-fast), + box-shadow var(--motion-fast), + transform var(--motion-fast); + &:hover { - background-color: var(--active-color); - color: var(--hover-full-bg-text-color); - .link, - a { - color: var(--hover-full-bg-text-color); - } - .content { - color: var(--sub-text-color-3); - } - svg { - fill: var(--hover-full-bg-text-color) !important; + border-color: var(--color-accent); + box-shadow: var(--shadow-md); + transform: translateY(-2px); + .link { + color: var(--color-accent); + svg { + fill: var(--color-accent); + transform: translateX(2px); + } } } + .content { - line-height: 26px; - padding-bottom: 22px; + line-height: 1.7; + color: var(--color-text-muted); + padding-bottom: 16px; + font-size: 0.9375rem; } .link { - padding-bottom: 25px; - font-size: 14px; - color: var(--active-color); + font-size: 0.875rem; + font-weight: 600; + color: var(--color-accent); + display: inline-flex; + align-items: center; + gap: 6px; svg { - fill: var(--active-color); + fill: var(--color-accent); vertical-align: middle; + transition: transform var(--motion-fast); + width: 12px; + height: 12px; } } - @media screen and (max-width: 1440px) { - width: auto !important; - } } diff --git a/src/components/bootcamp/MainContent/styles.module.scss b/src/components/bootcamp/MainContent/styles.module.scss index 7cd91bf1f86..6b7ac61233e 100644 --- a/src/components/bootcamp/MainContent/styles.module.scss +++ b/src/components/bootcamp/MainContent/styles.module.scss @@ -1,14 +1,8 @@ .mainContent { .cardLine { - display: flex; - justify-content: space-between; - } - @media screen and (max-width: 1440px) { - .cardLine { - display: grid; - gap: 32px; - } - + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 20px; } @media screen and (max-width: 768px) { .cardLine { diff --git a/src/components/common/Breadcrumbs/styles.module.scss b/src/components/common/Breadcrumbs/styles.module.scss index e98301daf60..d518749b6b7 100644 --- a/src/components/common/Breadcrumbs/styles.module.scss +++ b/src/components/common/Breadcrumbs/styles.module.scss @@ -1,58 +1,83 @@ .breadcrumbs { display: flex; - align-items: self-start; - height: 21px; - font-size: 13px; - color: var(--sub-text-color-2); - &.mdxPage { - .backPath { - color: #fff !important; - } - } + align-items: center; + font-size: 0.8125rem; + color: var(--color-text-muted); + gap: 4px; .backLogoA { - position: relative; - top: 1px; + display: inline-flex; + align-items: center; + width: 16px; + height: 16px; + color: var(--color-text-muted); + transition: color var(--motion-fast); + &:hover { + color: var(--color-text); + } .backLogoSvg { display: inline-block; - fill: var(--back-home-logo-color); + fill: var(--color-text-muted); } .backLogoLightSvg { display: none; + fill: currentColor; } } + .line { - fill: #4c4c4c; + fill: var(--color-border-strong); vertical-align: middle; + width: 12px; + height: 12px; + opacity: 0.6; } .path { - span.leafPath { - color: var(--active-color); - vertical-align: middle; - } + display: inline-flex; + align-items: center; + gap: 4px; + .backPath { text-decoration: none; + color: var(--color-text-muted); + padding: 4px 6px; + border-radius: var(--radius-sm); + transition: background-color var(--motion-fast), + color var(--motion-fast); + &:hover { + background-color: var(--color-bg-muted); + color: var(--color-text); + } + } + span.leafPath { + color: var(--color-accent); + vertical-align: middle; + padding: 4px 6px; + font-weight: 600; } } } html[data-theme="light"] { - .breadcrumbs:not(.mdxPage) { - color: #000; - } - .breadcrumbs:not(.mdxPage) svg { - fill: #000; - } - .breadcrumbs:not(.mdxPage) .line { - opacity: 1; - } - .breadcrumbs:not(.mdxPage) { + .breadcrumbs { + color: var(--color-text-muted); + .backLogoSvg { + display: none !important; + } .backLogoLightSvg { display: inline-block !important; } + } +} + +html[data-theme="dark"] { + .breadcrumbs { .backLogoSvg { - display: none !important; + display: inline-block; + } + .backLogoLightSvg { + display: none; } } } diff --git a/src/components/common/ColorCard/styles.module.scss b/src/components/common/ColorCard/styles.module.scss index 614ac989032..6bd54dad26d 100644 --- a/src/components/common/ColorCard/styles.module.scss +++ b/src/components/common/ColorCard/styles.module.scss @@ -1,37 +1,40 @@ +.main { + width: 100%; + max-width: var(--global-main-width); + margin: 0 auto; + position: relative; + + .content { + max-width: 880px; + .bigText { + font-family: var(--font-family-display); + font-weight: 800; + font-size: clamp(2rem, 4vw, 2.75rem); + line-height: 1.1; + letter-spacing: -0.02em; + color: var(--color-text); + margin-top: 16px; + } + .smallText { + font-size: 1.0625rem; + line-height: 1.65; + color: var(--color-text-muted); + margin-top: 16px; + } + } +} + html[data-theme="light"] { .main { &.mdxCard { .content { .bigText { - color: #fff; + color: var(--color-text); } .smallText { - color: rgba(255, 255, 255, 0.6); + color: var(--color-text-muted); } } } } } -.main { - width: var(--global-main-width); - margin: 0 auto; - position: relative; - - .content { - max-width: 949px; - .bigText { - max-width: 847px; - font-weight: 700; - margin-top: 12px; - font-size: 32px; - line-height: 40px; - color: var(--title-text-color); - } - .smallText { - font-size: 16px; - line-height: 24px; - color: var(--sub-text-color-2); - margin-top: 20px; - } - } -} diff --git a/src/components/common/ColorHeader/styles.module.scss b/src/components/common/ColorHeader/styles.module.scss index 1e84283bcf3..795ecd02d47 100644 --- a/src/components/common/ColorHeader/styles.module.scss +++ b/src/components/common/ColorHeader/styles.module.scss @@ -1,330 +1,45 @@ -@keyframes light { - 0% { - transform: translate(0) scale(1); - } - - 33% { - transform: translate(30px, -20px) scale(1); - } - - 66% { - transform: translate(-20px, 20px) scale(0.9); - } - - to { - transform: translate(0, 0) scale(1); - } -} -@keyframes light2 { - 0% { - transform: translate(0) scale(1) rotate(45deg); - } - - 33% { - transform: translate(-20px, 20px) scale(1.1) rotate(45deg); - } - - 66% { - transform: translate(20px, -20px) scale(0.9) rotate(45deg); - } - - to { - transform: translate(0, 0) scale(1) rotate(45deg); - } -} -@keyframes light3 { - 0% { - transform: translate(0) scale(1); - } - - 33% { - transform: translate(0, 100px) scale(1.1); - } - - 66% { - transform: translate(0, -100px) scale(0.9); - } - - to { - transform: translate(0, 0) scale(1); - } -} -@keyframes light4 { - 0% { - transform: translate(0) scale(1); - } - - 33% { - transform: translate(0, 10px) scale(1); - } - - 66% { - transform: translate(0, -10px) scale(1); - } - - to { - transform: translate(0, 0) scale(1); - } -} -@keyframes smallTYKeyframe { - 0% { - transform: translate(0) scale(1); - } - - 33% { - transform: translate(0, 10px) scale(1.1); - } - - 66% { - transform: translate(0, -10px) scale(0.9); - } - - to { - transform: translate(0, 0) scale(1); - } -} -@keyframes scaleKeyframe { - 0% { - transform: scale(0.8); - } - - 50% { - transform: scale(1.2); - } - - to { - transform: scale(0.8); - } -} - -.leftBox { - position: absolute; - left: -180px; - bottom: -180px; - width: 200px; - height: 200px; - border-radius: 30% 70% 0% 33% / 64% 70% 0% 36%; - background-color: #ef9364; - animation: 5s infinite light linear; - box-shadow: 90px 90px 50px 90px #ef9364, 90px -90px 190px 90px #ef9364, - -90px 90px 90px 190px #ef9364, -90px -90px 90px 100px #ef9364; -} - -.rightBox { - position: absolute; - right: -220px; - top: 100px; - width: 200px; - height: 200px; - background-color: #8b7bcf; - border-radius: 30% 70% 67% 13% / 47% 30% 70% 66%; - animation: 5s infinite light2 linear; - box-shadow: 0 0px 1150px 250px #8b7bcf, -100px 40px 180px 200px #8b7bcf; -} +/** + * Page header band — clean, soft brand-tinted background. + */ .wrap { position: relative; overflow: hidden; - padding-bottom: 158px; - background-color: var(--ifm-navbar-background-color); - background-image: url("/img/rectangle.png"); - background-size: 72.6px 66.6px; - .darkModeBox { - display: block; - } - .lightModeBox { - display: none; - } + padding: 32px 0 64px; + background: + radial-gradient(800px 320px at 12% 0%, rgba(255, 89, 0, 0.10), transparent 65%), + radial-gradient(700px 320px at 95% 10%, rgba(254, 163, 21, 0.10), transparent 65%), + var(--color-bg); + border-bottom: 1px solid var(--color-border); + .content { - margin-top: 38px; + margin-top: 24px; } - .back { - display: flex; - align-items: center; - height: 21px; - line-height: 21px; - width: var(--global-main-width); - margin: 0 auto; - position: relative; - .main { - position: absolute; - top: 14px; - display: flex; - justify-content: center; - a { - height: 18px; - width: 18px; - overflow: hidden; - } - - .backLogo { - height: 18px; - cursor: pointer; - position: relative; - top: 1px; - } - - .line { - display: inline-block; - margin: 0 6px; - opacity: 0.4; - width: 12px; - height: 12px; - line-height: 21px; - position: relative; - top: 4px; - } - .curText { - color: var(--active-color); - font-size: 13px; - } - } + /* Hide legacy decorative blobs */ + .darkModeBox, + .lightModeBox, + .leftBox, + .rightBox, + .lbBox, + .rbBox, + .sBox, + .xBox { + display: none !important; } } -html[data-theme="light"] { - .wrap { - // left box - background: #fffafa; - .lbBox { - position: absolute; - width: 150px; - height: 150px; - background-color: #ffa800; - opacity: 0.3; - bottom: 8%; - left: 5%; - border-radius: 50%; - animation: scaleKeyframe 5s infinite linear; - } - .rbBox { - position: absolute; - right: 500px; - - .sBox { - position: absolute; - width: 250px; - height: 250px; - background-color: #ffa800; - opacity: 0.3; - border-radius: 50%; - z-index: 2; - left: -350px; - bottom: -300px; - animation: 5s infinite light4 linear; - } - .xBox { - position: absolute; - width: 100px; - height: 300px; - background-color: rgb(255, 209, 126); - border-radius: 50%; - bottom: -500px; - z-index: 1; - box-shadow: 50px 40px 120px 250px rgb(255, 209, 126); - animation: 5s infinite light3 linear; - } - } - @media screen and (max-width: 1200px) { - .lbBox { - width: 100px; - height: 100px; - } - .rbBox { - .sBox { - width: 180px; - height: 180px; - bottom: -270px; - left: -300px; - } - .xBox { - width: 60px; - height: 300px; - } - } - } - @media screen and (max-width: 996px) { - .lbBox { - width: 50px; - height: 50px; - left: 160px; - bottom: 100px; - } - .rbBox { - bottom: 42px; - right: 200px; - .sBox { - width: 100px; - height: 100px; - left: -150px; - bottom: -110px; - } - .xBox { - width: 50px; - height: 50px; - bottom: -100px; - box-shadow: 10px 10px 50px 100px rgb(255, 209, 126); - animation-name: smallTYKeyframe; - } - } - } - @media screen and (max-width: 768px) { - .lbBox { - width: 50px; - height: 50px; - left: 30px; - bottom: 100px; - } - .rbBox { - bottom: 42px; - right: 200px; - .sBox { - width: 100px; - height: 100px; - left: -150px; - bottom: -110px; - } - .xBox { - width: 50px; - height: 50px; - bottom: -100px; - box-shadow: 10px 10px 50px 100px rgb(255, 209, 126); - animation-name: smallTYKeyframe; - } - } - } - } - .darkModeBox { - display: none; - } - .lightModeBox { - display: block; - } -} -@media screen and (max-width: 1440px) { - .leftBox { - width: 100px; - height: 100px; - } - .rightBox { - width: 80px; - height: 80px; - top: 0; - right: -250px; +[data-theme="dark"] { + .wrap { + background: + radial-gradient(800px 320px at 12% 0%, rgba(255, 89, 0, 0.18), transparent 65%), + radial-gradient(700px 320px at 95% 10%, rgba(254, 163, 21, 0.14), transparent 65%), + var(--color-bg); } } + @media screen and (max-width: 768px) { - .leftBox { - width: 60px; - height: 60px; - box-shadow: 90px -90px 190px 90px #ef9364; - left: -150px; - bottom: -150px; - } - .rightBox { - width: 60px; - height: 60px; - box-shadow: -100px 60px 80px 180px #8b7bcf; + .wrap { + padding: 24px 0 48px; } } diff --git a/src/components/common/LinkNav/styles.module.scss b/src/components/common/LinkNav/styles.module.scss index 86dc6d72dd6..0eea2841658 100644 --- a/src/components/common/LinkNav/styles.module.scss +++ b/src/components/common/LinkNav/styles.module.scss @@ -1,56 +1,31 @@ .nav { list-style: none; + margin: 0; + padding: 0; + border-left: 1px solid var(--color-border); + .item { - font-size: 12px; - line-height: 16px; - margin-top: 19px; - position: relative; - margin-top: 0px; - height: 40px; + font-size: 0.875rem; + line-height: 1.4; + color: var(--color-text-muted); + margin-left: -1px; + border-left: 2px solid transparent; + padding: 8px 0 8px 16px; + transition: color var(--motion-fast), + border-color var(--motion-fast); + &.active { - color: var(--right-sidebar-active-color); - a { - &::after { - background-color: var(--right-sidebar-active-color); - } - } + color: var(--color-accent); + border-left-color: var(--color-accent); + font-weight: 600; } - &:hover { - color: var(--ifm-color-primary); - // a { - // &::after { - // background-color: var(--active-color); - // } - // } + color: var(--color-text); } + a { text-decoration: none; color: inherit; - &::after { - content: ""; - width: 8px; - height: 8px; - display: inline-block; - position: absolute; - background-color: var(--right-sidebar-circle-bg-color); - border-radius: 50%; - left: -19px; - top: 6px; - } - } - &:not(:last-child) { - a { - &::before { - content: ""; - background-color: var(--right-sidebar-circle-bg-color); - width: 2px; - height: 32px; - position: absolute; - left: -16px; - top: 14px; - } - } } } } diff --git a/src/components/common/Table/index.tsx b/src/components/common/Table/index.tsx index 84e32419445..8cbed580b2e 100644 --- a/src/components/common/Table/index.tsx +++ b/src/components/common/Table/index.tsx @@ -1,34 +1,39 @@ interface IProps { tableColumns: { label: string; prop: string; width?: string | number }[]; - data: any[]; + data: Record[]; className?: string; style?: React.CSSProperties; bodyStyle?: React.CSSProperties; headerStyle?: React.CSSProperties; } + +/** + * Lightweight, semantic table. Renders a real with no wrapper + *
so it inherits the shared markdown table styling (fit-content + * width, centered, brand-aligned headers) from design-style.scss when + * rendered inside
. + */ export default function Table(props: IProps) { return ( -
-
- - +
+ + + {props.tableColumns.map((column) => ( + + ))} + + + + {props.data.map((row, i) => ( + {props.tableColumns.map((column) => ( - + ))} - - - {props.data.map((row, i) => ( - - {props.tableColumns.map((column) => ( - - ))} - - ))} - -
+ {column.label} +
- {column.label} - {row[column.prop]}
{row[column.prop]}
- + ))} + + ); } diff --git a/src/components/community/Card/styles.module.scss b/src/components/community/Card/styles.module.scss index a97ef82fe85..1c6c8d2c623 100644 --- a/src/components/community/Card/styles.module.scss +++ b/src/components/community/Card/styles.module.scss @@ -1,65 +1,56 @@ -html[data-theme="light"] { - .card { - .icon { - svg { - fill: #000 !important; - } - } - } -} .card { - width: 305px; - border: 1px solid var(--box-border-color); - min-height: 100px; - border-radius: var(--normal-box-radius); - padding: 0 22px; display: flex; flex-direction: column; justify-content: space-between; + background-color: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: 24px; cursor: pointer; - @media screen and (max-width: 1440px) { - width: auto !important; - } - &:hover { - border: 1px solid var(--box-hover-border-color); - background: var(--active-color); - .header { - .title { - color: var(--normal-text-color-1); - } - svg { - fill: var(--normal-text-color-1); - } - } + text-decoration: none; + box-shadow: var(--shadow-xs); + transition: border-color var(--motion-fast), + box-shadow var(--motion-fast), + transform var(--motion-fast); + min-height: 168px; - .content { - color: var(--sub-text-color-3); + &:hover { + border-color: var(--color-accent); + box-shadow: var(--shadow-md); + transform: translateY(-2px); + .header .title { + color: var(--color-accent); } .link { - color: var(--normal-text-color-1); + color: var(--color-accent); svg { - fill: var(--normal-text-color-1); + fill: var(--color-accent); + transform: translateX(2px); } } } + .header { display: flex; align-items: center; - margin-top: 19px; - // margin-bottom: 7px; + gap: 10px; + margin-bottom: 8px; .title { - font-size: 20px; - line-height: 20px; - color: var(--title-text-color); + font-family: var(--font-family-display); + font-size: 1.0625rem; font-weight: 700; + line-height: 1.3; + color: var(--color-text); + transition: color var(--motion-fast); } .icon { - margin-right: 9px; - display: inline-block; - width: 30px; - height: 30px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; flex-shrink: 0; svg { width: 100%; @@ -67,16 +58,37 @@ html[data-theme="light"] { } } } + .content { - line-height: 20px; - font-size: 14px; - color: var(--sub-text-color-2); - letter-spacing: -0.55px; + flex: 1; + line-height: 1.55; + font-size: 0.9375rem; + color: var(--color-text-muted); + margin-bottom: 16px; } + .link { - color: var(--active-color); - margin-bottom: 26px; - display: flex; + display: inline-flex; align-items: center; + gap: 6px; + color: var(--color-accent); + font-size: 0.875rem; + font-weight: 600; + transition: color var(--motion-fast); + svg { + transition: transform var(--motion-fast); + width: 12px; + height: 12px; + } + } +} + +html[data-theme="light"] { + .card { + .icon { + svg { + fill: var(--color-text) !important; + } + } } } diff --git a/src/components/community/CardWrap/styles.module.scss b/src/components/community/CardWrap/styles.module.scss index 61cbe15b232..e7bc11ee58c 100644 --- a/src/components/community/CardWrap/styles.module.scss +++ b/src/components/community/CardWrap/styles.module.scss @@ -1,15 +1,14 @@ .cardWrap { - width: 980px; - @media screen and (max-width: 1440px) { - width: auto; - } + width: 100%; + padding-bottom: 56px; + .title { - font-size: 30px; + font-family: var(--font-family-display); + font-size: 1.625rem; font-weight: 700; - line-height: 56px; - // margin-top: 69px; - margin-bottom: 32px; + line-height: 1.25; + letter-spacing: -0.01em; + color: var(--color-text); + margin-bottom: 24px; } - // padding-bottom: 90px; - padding-bottom: 129px; } diff --git a/src/components/contribute/Card/styles.module.scss b/src/components/contribute/Card/styles.module.scss index a1dd6270323..3e9bfc7c8c7 100644 --- a/src/components/contribute/Card/styles.module.scss +++ b/src/components/contribute/Card/styles.module.scss @@ -1,78 +1,81 @@ -html[data-theme="light"] { - .wrap { - &:nth-of-type(1) { - .tIcon { - background-image: url(/img/home/feature/mef-light.svg); - } - &:hover { - .tIcon { - background-image: url(/img/home/feature/mef-light-hover.svg); - } - } - } - &:nth-of-type(2) { - .tIcon { - background-image: url(/img/home/feature/muc-light.svg); - } - &:hover { - .tIcon { - background-image: url(/img/home/feature/muc-light-hover.svg); - } - } - } - } -} .wrap { - border: 1px solid var(--box-border-color); - padding: 20px; - width: 474px; + border: 1px solid var(--color-border); + background-color: var(--color-surface); + border-radius: var(--radius-lg); + padding: 24px; + width: 100%; cursor: pointer; + display: flex; + flex-direction: column; + gap: 12px; + box-shadow: var(--shadow-xs); + transition: border-color var(--motion-fast), + box-shadow var(--motion-fast), + transform var(--motion-fast); + &:nth-of-type(1) { .tIcon { - background-image: url(/img/home/feature/mef.svg); + background-image: url(/img/home/feature/mef-light.svg); } } &:nth-of-type(2) { .tIcon { - background-image: url(/img/home/feature/muc.svg); + background-image: url(/img/home/feature/muc-light.svg); } } - .content { - margin: 10px 0; - } + .tIcon { display: inline-block; - width: 48px; - height: 48px; + width: 44px; + height: 44px; + background-repeat: no-repeat; + background-size: contain; } + + .content { + color: var(--color-text-muted); + line-height: 1.6; + font-size: 0.9375rem; + } + .link { - color: var(--active-color); - display: flex; + display: inline-flex; align-items: center; + gap: 6px; + color: var(--color-accent); + font-weight: 600; + font-size: 0.875rem; .icon { - fill: var(--active-color); + fill: var(--color-accent); + transition: transform var(--motion-fast); + width: 12px; + height: 12px; } a { color: inherit; - display: flex; + display: inline-flex; align-items: center; - cursor: pointer; + gap: 6px; } } + &:hover { - background-color: var(--active-color); - .content { - color: var(--sub-text-color-3); + border-color: var(--color-accent); + box-shadow: var(--shadow-md); + transform: translateY(-2px); + .link .icon { + transform: translateX(2px); } - .link { - color: var(--normal-text-color-1); + } +} - .icon { - fill: var(--normal-text-color-1); - } +html[data-theme="dark"] { + .wrap { + &:nth-of-type(1) .tIcon { + background-image: url(/img/home/feature/mef.svg); + } + &:nth-of-type(2) .tIcon { + background-image: url(/img/home/feature/muc.svg); } - } - @media screen and (max-width: 768px) { - width: 100%; } } diff --git a/src/components/contribute/TextListItem/styles.module.scss b/src/components/contribute/TextListItem/styles.module.scss index 51550bad29a..4d116bec448 100644 --- a/src/components/contribute/TextListItem/styles.module.scss +++ b/src/components/contribute/TextListItem/styles.module.scss @@ -1,26 +1,58 @@ .wrap { - padding: 68px 0 57px 0; + padding: 48px 0 32px; box-sizing: border-box; + border-bottom: 1px solid var(--color-border); + + &:first-of-type { + padding-top: 32px; + } + &:last-of-type { + border-bottom: none; + } + .title { - font-size: 30px; + font-family: var(--font-family-display); + font-size: 1.625rem; font-weight: 700; - line-height: 56px; + line-height: 1.25; + letter-spacing: -0.01em; + color: var(--color-text); + margin-bottom: 16px; } + .content { - color: var(--sub-text-color-2); - line-height: 24px; - margin: 15px 0; + color: var(--color-text-muted); + line-height: 1.7; + font-size: 1rem; + margin-bottom: 16px; + + p { + margin: 0 0 12px 0; + &:last-child { + margin-bottom: 0; + } + } } + .link { - color: var(--active-color); + color: var(--color-accent); + font-weight: 600; + font-size: 0.9375rem; .icon { - fill: var(--active-color); + fill: var(--color-accent); + transition: transform var(--motion-fast); + width: 12px; + height: 12px; } a { color: inherit; - display: flex; + display: inline-flex; align-items: center; + gap: 6px; cursor: pointer; + &:hover .icon { + transform: translateX(2px); + } } } } diff --git a/src/components/home/FrequentlyAskedQuestions/index.module.scss b/src/components/home/FrequentlyAskedQuestions/index.module.scss index 8b4d7f98b3b..856788e022f 100644 --- a/src/components/home/FrequentlyAskedQuestions/index.module.scss +++ b/src/components/home/FrequentlyAskedQuestions/index.module.scss @@ -1,41 +1,47 @@ .frequentlyAskedQuestions { - width: 832px; - margin: auto; + max-width: 880px; + margin: 0 auto; + padding: 64px var(--mobile-padding-width) 96px; + .highTitle { - margin-top: 86px; - margin-bottom: 61px; - font-size: 64px; - background-image: linear-gradient( - to left, - #9ee8ee 1%, - #f78013 55%, - #9f8ced 97% - ); - background-clip: text; - -webkit-text-fill-color: transparent; - font-weight: 700; - line-height: 66px; + font-family: var(--font-family-display); + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 800; + line-height: 1.15; + letter-spacing: -0.02em; + color: var(--color-text); + margin-bottom: 32px; + text-align: left; } + .contentList { - color: #fff; + display: flex; + flex-direction: column; + gap: 0; + border-top: 1px solid var(--color-border); + .item { - margin-top: 35px; + padding: 24px 0; + border-bottom: 1px solid var(--color-border); + .title { - font-size: 20px; + font-family: var(--font-family-display); + font-size: 1.125rem; + font-weight: 600; + color: var(--color-text); + line-height: 1.4; + margin-bottom: 8px; } + .content { - margin-top: 3px; - color: #728095; + font-size: 0.9375rem; + line-height: 1.7; + color: var(--color-text-muted); } + .bottomLine { - margin-top: 12px; - height: 2px; - background-color: rgb(48, 54, 61); + display: none; } } } - @media screen and (max-width: 1024px) { - width: 100%; - padding: 0 var(--mobile-padding-width); - } } diff --git a/src/components/home/HCard/styles.module.scss b/src/components/home/HCard/styles.module.scss index fd1683d1ffd..88e085a2366 100644 --- a/src/components/home/HCard/styles.module.scss +++ b/src/components/home/HCard/styles.module.scss @@ -1,332 +1,222 @@ -.leftBox { - position: absolute; - left: -100px; - bottom: -100px; - width: 200px; - height: 200px; - border-radius: 30% 70% 0% 33% / 64% 70% 0% 36%; - background-color: #ef9364; - animation: 5s infinite light linear; - box-shadow: 90px 90px 90px 90px #ef9364, 90px -90px 190px 90px #ef9364, - -90px 90px 90px 190px #ef9364, -90px -90px 90px 100px #ef9364; +/** + * Home hero — clean, modern, brand-driven (Mintlify-inspired). + * - Soft gradient background with subtle dotted texture + * - Large display typeface (Montserrat) + * - Pill primary CTA + ghost CTAs + */ + +.bannerContainer { + position: relative; + overflow: hidden; + margin-top: calc(var(--ifm-navbar-height) * -1); + padding-top: calc(var(--ifm-navbar-height) + 96px); + padding-bottom: 96px; + color: #fff; + background: + radial-gradient(1100px 520px at 80% -10%, rgba(255, 89, 0, 0.45), transparent 60%), + radial-gradient(900px 480px at 0% 0%, rgba(254, 163, 21, 0.32), transparent 60%), + linear-gradient(180deg, #000000 0%, #0a0a0a 100%); } -.rightBox { - @keyframes light { - 0% { - transform: translate(0) scale(1); - } +.bannerContainer::before { + content: ""; + position: absolute; + inset: 0; + background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px); + background-size: 24px 24px; + pointer-events: none; + mask-image: radial-gradient(ellipse at 50% 35%, #000 50%, transparent 90%); + -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 50%, transparent 90%); +} - 33% { - transform: translate(30px, -20px) scale(1); - } +.content { + max-width: var(--global-main-width); + margin: 0 auto; + width: 100%; + position: relative; + z-index: 1; + padding: 0 var(--mobile-padding-width); - 66% { - transform: translate(-20px, 20px) scale(0.9); - } + .left { + position: relative; + z-index: 2; + width: 100%; + text-align: center; + } - to { - transform: translate(0, 0) scale(1); - } + .right { + display: none; } - @keyframes light2 { - 0% { - transform: translate(0) scale(1); - } - 33% { - transform: translate(-20px, 20px) scale(1.1); - } + .bline { + display: none; + } +} - 66% { - transform: translate(20px, -20px) scale(0.9); - } +.textWrap { + text-align: center; + padding-top: 24px; + + .highText, + h1 { + font-family: var(--font-family-display); + font-size: clamp(2.25rem, 5vw, 3.75rem); + font-weight: 800; + line-height: 1.08; + letter-spacing: -0.02em; + color: #ffffff; + margin: 0; + max-width: 920px; + margin-left: auto; + margin-right: auto; + } - to { - transform: translate(0, 0) scale(1); + .description { + max-width: 760px; + margin: 24px auto 0; + font-size: 1.0625rem; + line-height: 1.7; + color: rgba(255, 255, 255, 0.78); + + @media screen and (max-width: 768px) { + font-size: 1rem; + padding: 0 4px; + margin-top: 18px; } } - position: absolute; - right: -120px; - top: -150px; - width: 200px; - height: 200px; - background-color: #8b7bcf; - border-radius: 30% 70% 67% 13% / 44% 30% 70% 66%; - animation: 5s infinite light2 linear; - box-shadow: 90px 90px 90px 90px #8b7bcf, 90px -90px 90px 190px #8b7bcf, - -90px 90px 90px 90px #8b7bcf, -90px -90px 90px 190px #8b7bcf; } -.bannerContainer { - position: relative; - overflow: hidden; - height: 867px; - margin-top: -98px; - background-color: black; - position: relative; - background-image: url("/img/rectangle.png"); - background-size: 66.6px; - color: #fff; - - .bottomTips { - position: absolute; - bottom: 0; - left: 0; - right: 0; - z-index: 5; - .tipsContent { - background: linear-gradient(90deg, #000000 0%, #292929 35.48%); - height: 37px; - text-align: center; - line-height: 37px; - font-size: 14px; - .text { - .blogTextIcon { - margin-right: 10px; - position: relative; - top: 5px; - } - } - } +.btnWrap { + margin-top: 36px; + font-size: 0.9375rem; + display: flex; + justify-content: center; + gap: 12px; + flex-wrap: wrap; + + a { + text-decoration: none; + display: inline-flex; } - .content { - max-width: var(--global-main-width); - margin: 0 auto; - width: 100%; - position: relative; - display: flex; - position: relative; - .left { - position: relative; - z-index: 2; - width: 100%; - - .centerContent { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-top: 400px; - } - - .textWrap { - text-align: center; - padding-top: 240px; - h1 { - font-size: 55px; - font-weight: bold; - color: #fff; - margin: 0; - line-height: 1.2; - - @media screen and (max-width: 768px) { - font-size: 32px; - } - } - - .description { - max-width: 900px; - margin: 20px auto 0; - font-size: 16px; - line-height: 1.6; - color: #fff; - opacity: 0.9; - - @media screen and (max-width: 768px) { - font-size: 14px; - padding: 0 20px; - margin-top: 15px; - } - } - } - - .btnWrap { - margin-top: 31px; - font-size: 14px; - color: #fff; - display: flex; - justify-content: center; - gap: 20px; - span { - border-radius: 36px; - padding: 10px; - height: 44px; - line-height: 24px; - font-weight: 700; - color: #fff; - cursor: pointer; + span { + display: inline-flex; + align-items: center; + justify-content: center; + height: 44px; + padding: 0 22px; + border-radius: var(--radius-pill); + font-weight: 600; + cursor: pointer; + transition: transform var(--motion-fast), + box-shadow var(--motion-fast), + background-color var(--motion-fast), + border-color var(--motion-fast), + color var(--motion-fast); + line-height: 1; + } - &.more, &.hub { - background-color: var(--home-btn-bg); - } - } - a { - text-decoration: none; - } - } + /* primary — uses brand "Berry Orange" deep tone for max contrast on dark hero */ + .more { + background-color: var(--brand-orange-deep); + color: #ffffff; + border: 1px solid var(--brand-orange-deep); + box-shadow: 0 8px 20px rgba(255, 89, 0, 0.32); + &:hover { + transform: translateY(-1px); + background-color: #d94a00; + border-color: #d94a00; } - .right { - .loopRun { - @keyframes jump { - 0% { - transform: translate(-50%, -50%) scale(1); - } - 40% { - transform: translate(-50%, -60%) scale(1); - } - 80% { - transform: translate(-50%, -40%) scale(1); - } - 100% { - transform: translate(-50%, -50%) scale(1); - } - } - - @keyframes animX { - 0% { - left: -4%; - } - - 100% { - left: 96%; - } - } - - @keyframes animY { - 0% { - top: -4%; - } - - 100% { - top: 96%; - } - } - @keyframes scale { - 0% { - transform: scale(0.5); - } - - 50% { - transform: scale(1); - } - - 100% { - transform: scale(0.5); - } - } + } - width: 400px; - height: 300px; - position: absolute; - border-radius: 50%; - top: 200px; - right: 100px; - .circle { - border-radius: 50%; - position: absolute; - text-align: center; - z-index: 2; - color: #fff; - &.circle1 { - width: 94px; - height: 94px; - background: linear-gradient(180deg, #dbfdff 0%, #52d1d9 100%); - line-height: 94px; - animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -3.1s infinite alternate, - animY 6s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate, - scale 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate; - } - &.circle3 { - width: 88px; - height: 88px; - background: linear-gradient(180deg, #ffca80 0%, #f18433 100%); + /* ghost */ + .hub { + background-color: rgba(255, 255, 255, 0.06); + color: #fff; + border: 1px solid rgba(255, 255, 255, 0.18); + &:hover { + background-color: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.32); + } + } - line-height: 88px; - animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -7.8s infinite alternate, - animY 6s cubic-bezier(0.36, 0, 0.64, 1) -4.8s infinite alternate, - scale 12s cubic-bezier(0.36, 0, 0.64, 1) -4.8s infinite alternate; - } - &.circle5 { - width: 80px; - height: 80px; - background: linear-gradient(180deg, #dfd8ff 0%, #8c7cd0 100%); - line-height: 80px; - animation: animX 6s cubic-bezier(0.36, 0, 0.64, 1) -12.6s infinite alternate, - animY 6s cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate, - scale 12s cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate; - } - } + /* For each subsequent button (Slack, Docs), make them ghost too. */ + a:not(:first-child):not(:last-child) span { + background-color: rgba(255, 255, 255, 0.06); + color: #fff; + border: 1px solid rgba(255, 255, 255, 0.18); + box-shadow: none; + &:hover { + background-color: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.32); + } + } +} - .centerCircle { - width: 185px; - height: 185px; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - z-index: 3; - animation: jump 10s ease infinite alternate; +/* Bottom thin tip (latest blog) */ +.bottomTips { + position: absolute; + bottom: 0; + left: 0; + right: 0; + z-index: 5; + + .tipsContent { + background: linear-gradient( + 90deg, + rgba(0, 0, 0, 0.9) 0%, + rgba(255, 89, 0, 0.18) 100% + ); + border-top: 1px solid rgba(255, 89, 0, 0.25); + height: 40px; + text-align: center; + line-height: 40px; + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.92); + + .text { + display: inline-flex; + align-items: center; + gap: 10px; + .blogTextIcon { + position: relative; + } + a { + color: inherit; + &:hover { + color: var(--color-accent); + text-decoration: none; } } } - .bline { - width: 1323px; - height: 399px; - position: absolute; - top: 257px; - right: -160px; - background-image: url("/img/home/hcard/bline.png"); - z-index: 1; - } } } +/* Hide legacy decorative blobs */ +.leftBox, +.rightBox { + display: none; +} + @media screen and (max-width: 1024px) { - .leftBox { - left: -150px; - bottom: -150px; - width: 80px; - height: 80px; - box-shadow: 90px -90px 120px 90px #ef9364, -90px 90px 120px 90px #ef9364; - } - .rightBox { - right: -120px; - top: -150px; - width: 80px; - height: 80px; - background-color: #8b7bcf; - border-radius: 30% 70% 67% 13% / 44% 30% 70% 66%; - animation: 5s infinite light2 linear; - box-shadow: -90px 90px 90px 90px #8b7bcf, -90px -90px 90px 190px #8b7bcf; - } .bannerContainer { - min-width: 100vw; - height: auto; - padding-bottom: 170px; - .content { - .left { - .highText, .btnWrap { - margin-left: 0; - } - } - } + padding-top: calc(var(--ifm-navbar-height) + 64px); + padding-bottom: 80px; } } @media screen and (max-width: 768px) { .bannerContainer { - .content { - .left { - .highText, .btnWrap { - margin-left: 0; - } - } - } - .bline { - width: 100% !important; - right: 0 !important; + padding-top: calc(var(--ifm-navbar-height) + 48px); + padding-bottom: 72px; + } + .btnWrap { + margin-top: 28px; + gap: 8px; + span { + height: 40px; + padding: 0 18px; + font-size: 0.875rem; } } } diff --git a/src/components/home/MeetTheCommunity/index.module.scss b/src/components/home/MeetTheCommunity/index.module.scss index f56db7ff976..c1c95fa8904 100644 --- a/src/components/home/MeetTheCommunity/index.module.scss +++ b/src/components/home/MeetTheCommunity/index.module.scss @@ -1,106 +1,24 @@ .meetTheCommunity { position: relative; - height: 309px; - padding-top: 70px; - margin-bottom: -62px; - background-color: rgb(17, 15, 15); + padding: 96px 0 24px; + background-color: var(--color-bg); + .highTitle { - position: absolute; - top: 150px; - left: 50%; text-align: center; - transform: translateX(-50%); - font-size: 64px; - font-weight: 700; - line-height: 66px; - background-image: linear-gradient( - to left, - #9ee8ee 1%, - #f78013 55%, - #9f8ced 97% - ); - background-clip: text; - -webkit-text-fill-color: transparent; - } - - /* Progressive responsive adjustments for better spacing */ - @media screen and (max-width: 1600px) { - height: 280px; - padding-top: 60px; - .highTitle { - top: 130px; - font-size: 60px; - } - } - - @media screen and (max-width: 1440px) { - padding-inline: var(--mobile-padding-width); - height: 350px; - padding-top: 50px; - margin-bottom: -40px; - .highTitle { - top: 140px; - font-size: 56px; - } - .contributorList { - gap: 15px; - width: auto; - } - .bgImg { - height: 350px; - } - } - - @media screen and (max-width: 1200px) { - height: 320px; - padding-top: 40px; - margin-bottom: -30px; - .highTitle { - top: 120px; - font-size: 52px; - } - } - - @media screen and (max-width: 1024px) { - height: 280px; - padding-top: 30px; - margin-bottom: -20px; - .highTitle { - top: 100px; - font-size: 48px; - line-height: 52px; - } - .bgImg { - height: 280px; - width: 100%; - background-size: contain; - } - .contributorList { - width: auto; - grid-template-columns: repeat(12, 1fr); - gap: 15px; - } - } - - @media screen and (max-width: 768px) { - height: 240px; - padding-top: 20px; - margin-bottom: -10px; - .highTitle { - top: 80px; - font-size: 40px; - line-height: 44px; - } + font-family: var(--font-family-display); + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 800; + line-height: 1.15; + letter-spacing: -0.02em; + color: var(--color-text); + max-width: var(--global-main-width); + margin: 0 auto; + padding: 0 var(--mobile-padding-width); } +} - @media screen and (max-width: 480px) { - height: 200px; - padding-top: 15px; - margin-bottom: 0; - .highTitle { - top: 60px; - font-size: 32px; - line-height: 36px; - } +@media screen and (max-width: 768px) { + .meetTheCommunity { + padding: 64px 0 16px; } } diff --git a/src/components/home/SlackWechatTwitterYoutube/index.module.scss b/src/components/home/SlackWechatTwitterYoutube/index.module.scss index 37e2216ca4c..60ddd5b4651 100644 --- a/src/components/home/SlackWechatTwitterYoutube/index.module.scss +++ b/src/components/home/SlackWechatTwitterYoutube/index.module.scss @@ -1,92 +1,79 @@ -.title { - font-size: 28px; - width: 895px; - text-align: center; - margin: 80px auto 100px; - - /* Progressive responsive margin adjustments */ - @media screen and (max-width: 1440px) { - margin: 60px auto 80px; - width: auto; - max-width: 895px; - padding: 0 var(--mobile-padding-width); - } - - @media screen and (max-width: 1200px) { - margin: 50px auto 70px; - font-size: 26px; - } - - @media screen and (max-width: 1024px) { - margin: 40px auto 60px; - font-size: 24px; - } - - @media screen and (max-width: 768px) { - margin: 30px auto 50px; - font-size: 22px; - } - - @media screen and (max-width: 480px) { - margin: 25px auto 40px; - font-size: 20px; - } -} .content { position: relative; - height: 508px; - color: #fff; - background-color: rgb(17, 15, 15); + background-color: var(--color-bg); + padding: 24px 0 96px; + .listWrap { - width: 1070px; - margin: auto; - display: flex; - justify-content: space-between; - position: absolute; - z-index: 2; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + max-width: var(--global-main-width); + margin: 0 auto; + padding: 0 var(--mobile-padding-width); + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; .item { - width: 188px; - text-align: center; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; + padding: 24px; + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + background-color: var(--color-surface); + box-shadow: var(--shadow-xs); + transition: border-color var(--motion-fast), + box-shadow var(--motion-fast), + transform var(--motion-fast); + text-decoration: none; + cursor: pointer; + + img { + width: 44px; + height: 44px; + border-radius: var(--radius-md); + } .itemTitle { - font-size: 24px; - color: #fff; + font-family: var(--font-family-display); + font-size: 1.125rem; + font-weight: 700; + color: var(--color-text); + line-height: 1.3; } .itemDesc { - font-size: 14px; - color: rgba(114, 128, 149, 1); + font-size: 0.9375rem; + line-height: 1.55; + color: var(--color-text-muted); + } + + &:hover { + border-color: var(--color-accent); + box-shadow: var(--shadow-md); + transform: translateY(-2px); + .itemTitle { + color: var(--color-accent); + } } } } + .bg { - background-image: url("/img/home/grid-left-bottom.svg"); - background-repeat: no-repeat; - height: 100%; - position: absolute; - width: 925px; - top: 0; - left: 0; - } - @media screen and (max-width: 1440px) { + display: none; } + @media screen and (max-width: 1024px) { .listWrap { - width: 100%; - padding: 0 var(--mobile-padding-width); - } - .bg { - width: 800px; - background-size: contain; - background-position: left bottom; + grid-template-columns: repeat(2, 1fr); } } - @media screen and (max-width: 768px) { - .bg { - width: 90%; + @media screen and (max-width: 600px) { + padding: 24px 0 64px; + .listWrap { + grid-template-columns: 1fr; } } } + +.title { + display: none; +} diff --git a/src/components/home/TipsBar/styles.module.scss b/src/components/home/TipsBar/styles.module.scss index 9c272deb176..e53795fcf30 100644 --- a/src/components/home/TipsBar/styles.module.scss +++ b/src/components/home/TipsBar/styles.module.scss @@ -1,30 +1,53 @@ .tipsWrap { - margin: 0 auto; - color: #fff; width: 100%; z-index: 10; + background: linear-gradient( + 90deg, + var(--brand-orange-deep) 0%, + var(--brand-orange) 100% + ); + color: var(--brand-black); + .tipsContent { - background: linear-gradient(90deg, #ffa800 0%, #fb750b 35.48%); - // height: 37px; + max-width: var(--global-main-width); + margin: 0 auto; width: 100%; - // line-height: 37px; - padding-block: 5px; + padding: 8px var(--mobile-padding-width); position: relative; text-align: center; - .text { - padding-right: 20px; + font-size: 0.875rem; + font-weight: 500; + display: flex; + align-items: center; + justify-content: center; + .text { + padding-right: 32px; + a { + color: var(--brand-black); + text-decoration: none; + &:hover { + text-decoration: underline; + color: var(--brand-black); + } + } img { position: relative; top: 3px; + margin-left: 6px; } } .close { position: absolute; - right: 10px; + right: var(--mobile-padding-width); top: 50%; - transform: translateY(-47%); + transform: translateY(-50%); cursor: pointer; + opacity: 0.7; + transition: opacity var(--motion-fast); + &:hover { + opacity: 1; + } } } } diff --git a/src/components/home/WantToContribute/index.module.scss b/src/components/home/WantToContribute/index.module.scss index 2c4db0b6eb9..85da01f1301 100644 --- a/src/components/home/WantToContribute/index.module.scss +++ b/src/components/home/WantToContribute/index.module.scss @@ -1,20 +1,73 @@ .WantToContribute { - display: flex; - justify-content: center; - padding: 128px 0; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; + padding: 64px var(--mobile-padding-width); + max-width: var(--global-main-width); + margin: 0 auto; + .item { - width: 550px; - background-color: #1a1a1a; - padding: 58px; - color: #fff; + border-radius: var(--radius-xl); + padding: 40px; + color: var(--color-text); + background-color: var(--color-surface); + border: 1px solid var(--color-border); + box-shadow: var(--shadow-xs); + transition: box-shadow var(--motion-fast), + transform var(--motion-fast), + border-color var(--motion-fast); + + &:hover { + box-shadow: var(--shadow-md); + transform: translateY(-2px); + } + + /* First card uses brand orange as filled CTA card */ &:first-of-type { - background-color: #ffb219; + background: linear-gradient(135deg, var(--brand-orange-deep) 0%, var(--brand-orange) 100%); + border-color: transparent; + color: var(--brand-black); + .title { + color: var(--brand-black); + } + .content { + color: rgba(0, 0, 0, 0.78); + } + :global(.light-active-color) { + color: var(--brand-black); + text-decoration: underline; + } } + .title { - font-size: 35px; + font-family: var(--font-family-display); + font-size: 1.75rem; + font-weight: 700; + letter-spacing: -0.01em; + line-height: 1.25; + color: var(--color-text); + margin-bottom: 12px; + } + + .content { + font-size: 1rem; + line-height: 1.7; + color: var(--color-text-muted); + + a { + font-weight: 600; + } } } - @media (max-width: 1024px) { - padding: 128px var(--mobile-padding-width); + + @media (max-width: 768px) { + grid-template-columns: 1fr; + padding: 48px var(--mobile-padding-width); + .item { + padding: 32px; + .title { + font-size: 1.5rem; + } + } } } diff --git a/src/css/custom.scss b/src/css/custom.scss index 3bc4a344e81..4cfde9c99f3 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -1,161 +1,348 @@ /** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. + * Apache Cloudberry — Global design system + * + * Inspired by Mintlify for a clean, modern, unified feel. + * Brand palette per Apache Cloudberry Brand Guidelines: + * - #FF5900 Berry Orange (deep) + * - #FEA315 Berry Orange (light / amber) + * - #000000 Black + * - #FFFFFF White + * + * Typography note: per ASF policy we do NOT load fonts from third-party + * CDNs (e.g. Google Fonts) at runtime. The font-family stack lists + * "Montserrat" first so users who have it installed locally (or any + * future self-hosted bundle) see the brand typeface; otherwise the + * system stack is used as a graceful fallback. */ -/* You can override the default Infima variables here. */ :root { - font-family: -apple-system, BlinkMacSystemFont, "Noto Sans", "Open Sans", - "Source Sans", Helvetica, Arial, Inter, Ubuntu, Roboto, sans-serif; - font-size: 16px; - --ifm-color-primary: #2e8555; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; - --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(17, 15, 15); - - // background color - --normal-bg-1: rgba(17, 15, 15); - --navbar-bg-color: rgb(7, 7, 7); - --active-color: rgba(255, 168, 0, 1); - --hover-fill-color: rgba(255, 61, 0, 1); - --docs-detail-bg: rgba(22, 27, 34, 1); - --ordered-list-bg-color: rgb(51, 34, 0); - --ordered-list-text-color: #fff; - --tags-bg-color: rgba(255, 168, 0, 0.15); - --menu-bg-color: rgb(76, 50, 0); - --hover-full-bg-text-color: rgb(0, 0, 0); - --code-bg-color: rgb(51, 51, 51); - --right-sidebar-circle-bg-color: rgba(48, 54, 61, 1); - --right-sidebar-active-color: var(--active-color); - --portrait-border-hover-color: rgb(254, 177, 25); - - // text color - --normal-text-color: rgba(12, 14, 20, 1); - --normal-text-color-1: rgb(0, 0, 0); - --sub-text-color: rgba(161, 174, 191); - --sub-text-color-1: rgba(114, 128, 149); - --sub-text-color-2: rgba(255, 255, 255, 0.6); - --sub-text-color-3: rgba(0, 0, 0, 0.6); - --sub-text-color-4: rgba(0, 194, 255, 1); - --sub-text-color-5: rgba(242, 242, 242); - --sub-text-color-6: #212529; - --blog-border-color: rgba(48, 54, 61, 1); - --back-home-logo-color: rgba(76, 76, 76); - --title-text-color: rgb(255, 255, 255); + /* === Typography ============================================ */ + /* GitHub-style body stack */ + --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + /* Montserrat for headings & display */ + --font-family-display: "Montserrat", -apple-system, BlinkMacSystemFont, + "Segoe UI", Helvetica, Arial, sans-serif; + --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, + Consolas, "Liberation Mono", monospace; + + /* === Brand palette ========================================== + * Apache Cloudberry Brand Guidelines — Primary palette: + * - #FF5900 Berry Orange (deep) + * - #FEA315 Berry Orange (light / amber) + * - #000000 Black + * - #FFFFFF White + * + * Contrast (WCAG 2.1): + * #FF5900 on #fff ≈ 3.16:1 (AA Large / 1.4.11 UI ✓) + * #FEA315 on #fff ≈ 2.27:1 (decorative only) + * #FF5900 on #000 ≈ 6.65:1 (AAA ✓) + * #FEA315 on #000 ≈ 9.27:1 (AAA ✓) + * #000 on #fff = 21:1 (AAA ✓) + * + * To satisfy WCAG 1.4.1 (color is not the sole signal), inline body + * links using --color-accent are always underlined. + */ + --brand-orange-deep: #ff5900; + --brand-orange: #fea315; + --brand-orange-soft: rgba(254, 163, 21, 0.16); + --brand-black: #000000; + --brand-white: #ffffff; + + /* Legacy aliases (kept so existing rules keep working) */ + --brand-orange-dark: var(--brand-orange-deep); + --brand-orange-accent: var(--brand-orange-deep); + --brand-yellow: var(--brand-orange); + --brand-yellow-soft: var(--brand-orange-soft); + + /* === Neutral scale (derived from brand black/white) ========= */ + --color-bg: #ffffff; + --color-bg-subtle: #fafafa; + --color-bg-muted: #f5f6f8; + --color-surface: #ffffff; + --color-border: #e6e8ec; + --color-border-strong: #d0d4dc; + --color-text: #18181b; /* near-black for body text, AAA on white */ + --color-text-muted: #4a5160; /* secondary text, ~7.8:1 on white */ + --color-text-soft: #6b7280; + + /* === Radii, shadows, motion ================================ */ + --radius-sm: 6px; + --radius-md: 10px; + --radius-lg: 14px; + --radius-xl: 20px; + --radius-pill: 999px; + --shadow-xs: 0 1px 2px rgba(15, 17, 22, 0.04); + --shadow-sm: 0 1px 3px rgba(15, 17, 22, 0.06), + 0 1px 2px rgba(15, 17, 22, 0.04); + --shadow-md: 0 6px 16px rgba(15, 17, 22, 0.06), + 0 2px 4px rgba(15, 17, 22, 0.04); + --shadow-lg: 0 18px 40px rgba(15, 17, 22, 0.08), + 0 4px 12px rgba(15, 17, 22, 0.04); + --motion-fast: 150ms ease; + --motion-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); + + /* === Layout tokens ========================================= */ + --global-main-width: 1200px; + --mobile-padding-width: 32px; + --normal-box-radius: 10px; + --doc-sidebar-width: 280px; + --docs-nav-margin: 60px; + + /* === Docusaurus / Infima overrides ========================== */ + --ifm-color-primary: var(--brand-orange-deep); + --ifm-color-primary-dark: #e54e00; + --ifm-color-primary-darker: #cc4600; + --ifm-color-primary-darkest: #a83a00; + --ifm-color-primary-light: var(--brand-orange); + --ifm-color-primary-lighter: #fec246; + --ifm-color-primary-lightest: #fed276; + + --ifm-font-family-base: var(--font-family-base); + --ifm-heading-font-family: var(--font-family-display); + --ifm-font-family-monospace: var(--font-family-mono); + --ifm-font-size-base: 16px; + --ifm-line-height-base: 1.65; + + --ifm-h1-font-size: 2.25rem; + --ifm-h2-font-size: 1.625rem; + --ifm-h3-font-size: 1.25rem; + --ifm-heading-font-weight: 700; + --ifm-heading-line-height: 1.25; + + --ifm-code-font-size: 92%; + --ifm-code-background: #f5f6f8; + --ifm-code-border-radius: 4px; + --ifm-pre-background: #f6f8fa; + + --ifm-navbar-height: 68px; + --ifm-navbar-padding-vertical: 0; + --ifm-navbar-padding-horizontal: 0; + --ifm-menu-link-padding-horizontal: 16px; + --ifm-menu-link-padding-vertical: 8px; + --ifm-breadcrumb-spacing: 0; --ifm-breadcrumb-item-background-active: transparent; --ifm-breadcrumb-separator: url("/img/line.svg"); - // shape - --ifm-menu-link-padding-horizontal: 21px !important; - --ifm-h1-font-size: 32px !important; - --ifm-font-family-base: -apple-system, Montserrat, BlinkMacSystemFont, "Noto Sans", - "Open Sans", "Source Sans", Helvetica, Arial, Inter, Ubuntu, Roboto, - sans-serif; - --ifm-alert-foreground-color: red; --ifm-container-width-xl: var(--global-main-width); - --ifm-global-spacing: 10px; - --ifm-navbar-height: 98px; - --ifm-menu-link-padding-horizontal: 25px; - --ifm-breadcrumb-spacing: 0; + --ifm-global-spacing: 12px; + --ifm-tabs-padding-vertical: 8px; + --ifm-tabs-padding-horizontal: 16px; - --global-main-width: 1440px; - --normal-box-radius: 4px; - --doc-sidebar-width: 301px; - --home-btn-bg: rgba(255, 168, 0, 1); - --home-btn-color: rgb(0, 0, 0); - --footer-bg-color: #212529; - --mobile-padding-width: 70px; - --docs-nav-margin: 60px; - --ifm-tabs-padding-vertical: 5px; - --ifm-tabs-padding-horizontal: 14px; + --docusaurus-highlighted-code-line-bg: rgba(254, 163, 21, 0.14); + + /* === Semantic accent === */ + /* Used for inline links / accent text. Defaults to brand "Berry Orange" + * deep tone on light backgrounds; dark mode uses the lighter brand + * orange (#FEA315) for AAA contrast. */ + --color-accent: var(--brand-orange-deep); + --color-accent-hover: #d94a00; + + /* === Legacy compat aliases (kept so existing components still work) === */ + --normal-bg-1: var(--color-bg); + --navbar-bg-color: var(--color-bg); + --active-color: var(--color-accent); + --hover-fill-color: var(--brand-orange-dark); + --docs-detail-bg: #fff8e6; + --ordered-list-bg-color: var(--brand-orange-soft); + --ordered-list-text-color: var(--color-text); + --tags-bg-color: rgba(254, 163, 21, 0.14); + --menu-bg-color: var(--brand-orange-soft); + --hover-full-bg-text-color: var(--color-text); + --code-bg-color: var(--ifm-code-background); + --right-sidebar-circle-bg-color: #e6e8ec; + --right-sidebar-active-color: var(--color-accent); + --portrait-border-hover-color: var(--color-accent); + + --normal-text-color: var(--color-text); + --normal-text-color-1: var(--color-text); + --sub-text-color: var(--color-text-muted); + --sub-text-color-1: var(--color-text-muted); + --sub-text-color-2: var(--color-text-muted); + --sub-text-color-3: rgba(0, 0, 0, 0.7); + --sub-text-color-4: #2563eb; + --sub-text-color-5: var(--color-text); + --sub-text-color-6: var(--brand-white); + --blog-border-color: var(--color-border); + --back-home-logo-color: var(--color-text-muted); + --title-text-color: var(--color-text); + + --home-btn-bg: var(--brand-orange); + --home-btn-color: var(--color-text); + --footer-bg-color: var(--brand-black); + + --box-border-color: var(--color-border); + --box-hover-border-color: var(--color-accent); + --code-border-color: transparent; + --portrait-border-color: var(--color-border); + --nav-link-line-normal-color: var(--color-border); + --popper-bg-color: var(--brand-black); + --popper-text-color: var(--brand-white); } -@media screen and (max-width: 1024px) { +/* Responsive layout tokens */ +@media screen and (max-width: 1280px) { :root { --global-main-width: 100%; } } -@media screen and (max-width: 768px) { +@media screen and (max-width: 1024px) { :root { - --mobile-padding-width: 37px; + --mobile-padding-width: 24px; } } - -/* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme="dark"] { - --ifm-color-primary: #25c2a0; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; - --ifm-background-color: #212529 !important; - --ifm-breadcrumb-color-active: rgba(255, 168, 0, 1); - --ifm-hover-overlay: rgba(255, 168, 0, 0.3) !important; - --ifm-menu-color-active: rgba(255, 168, 0, 1) !important; - --ifm-menu-color: rgb(153, 153, 153) !important; - --ifm-navbar-link-hover-color: var(--active-color); - --ifm-color-primary: var(--active-color); - --ifm-navbar-background-color: rgba(15, 15, 15, 0.4); - --ifm-font-weight-semibold: 400; - --ifm-code-background: rgb(51, 51, 51) !important; - - --code-border-color: rgb(153, 109, 26); - --portrait-border-color: rgb(37, 38, 39); - --box-border-color: var(--sub-text-color); - --box-hover-border-color: var(--title-text-color); - --sub-text-color-2: rgba(255, 255, 255, 0.6); - --nav-link-line-normal-color: rgba(48, 54, 61, 1); - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); - --popper-bg-color: rgb(255, 168, 0); - --popper-text-color: #3a3f63; +@media screen and (max-width: 768px) { + :root { + --mobile-padding-width: 20px; + --ifm-navbar-height: 56px; + --ifm-h1-font-size: 1.875rem; + --ifm-h2-font-size: 1.5rem; + } } +/* Light mode (default) */ [data-theme="light"] { - --ifm-font-color-base: #212529; - --normal-bg-1: #fff; - --title-text-color: #212529; - --sub-text-color-2: #546e7a; - --sub-text-color: #525665; - --sub-text-color-1: #525665; - --sub-text-color-6: #fff; - - --home-btn-bg: #212529; - --home-btn-color: #212529; - - --box-border-color: #e0e0e0; - --box-hover-border-color: #e0e0e0; - - --right-sidebar-circle-bg-color: #f2f2f2; - --sub-text-color-5: #212529; - --blog-border-color: #e0e0e0; - --docs-detail-bg: #eef9fd; - --ordered-list-bg-color: #ffeecc; - --ordered-list-text-color: #212529; - --ifm-menu-color-background-active: #ffe5b3; - --right-sidebar-active-color: #212529; - - --ifm-menu-color-active: #212529; - --ifm-menu-color: #212529; - --ifm-breadcrumb-color-active: var(--active-color); - --ifm-pagination-nav-color-hover: #e0e0e0; - --portrait-border-color: #eef9fd; - --ifm-navbar-link-hover-color: var(--active-color); - --popper-bg-color: #212529; - --popper-text-color: #ffffff; - --ifm-color-primary: #212529; - --navbar-bg-color: rgb(255, 255, 255); + --ifm-background-color: var(--color-bg); + --ifm-font-color-base: var(--color-text); + --ifm-color-content: var(--color-text); + --ifm-color-content-secondary: var(--color-text-muted); + + --ifm-navbar-background-color: rgba(255, 255, 255, 0.85); + --ifm-navbar-link-color: var(--color-text); + --ifm-navbar-link-hover-color: var(--color-accent); + + --ifm-menu-color: var(--color-text-muted); + --ifm-menu-color-active: var(--color-text); + --ifm-menu-color-background-active: var(--brand-orange-soft); + --ifm-menu-color-background-hover: var(--color-bg-muted); + --ifm-breadcrumb-color-active: var(--color-accent); + + --ifm-pagination-nav-color-hover: var(--color-border); + + --normal-bg-1: var(--color-bg); + --navbar-bg-color: var(--color-bg); + --title-text-color: var(--color-text); + --sub-text-color-2: var(--color-text-muted); + --sub-text-color-5: var(--color-text); + --sub-text-color-6: var(--brand-white); + --blog-border-color: var(--color-border); + --right-sidebar-circle-bg-color: #e6e8ec; + --right-sidebar-active-color: var(--color-accent); + --docs-detail-bg: #fff8e6; + --portrait-border-color: var(--color-border); + --popper-bg-color: var(--brand-black); + --popper-text-color: var(--brand-white); + + --code-border-color: transparent; + --box-border-color: var(--color-border); + --box-hover-border-color: var(--color-accent); + + /* Special darkened navbar over the home hero */ .navbar-home-lighting { - --ifm-navbar-background-color: rgba(15, 15, 15, 0.4) !important; + --ifm-navbar-background-color: rgba(0, 0, 0, 0.55); --ifm-navbar-link-color: #fff; - --home-btn-bg: rgba(255, 168, 0, 1) !important; - --navbar-bg-color: rgb(7, 7, 7); + --home-btn-bg: var(--brand-orange-deep); + --navbar-bg-color: rgba(0, 0, 0, 0.55); } } + +/* Dark mode */ +[data-theme="dark"] { + --color-bg: #000000; /* brand black */ + --color-bg-subtle: #0a0a0a; + --color-bg-muted: #141414; + --color-surface: #0d0d0d; + --color-border: #232323; + --color-border-strong: #2e2e2e; + --color-text: #f5f5f5; + --color-text-muted: #a8a8a8; + --color-text-soft: #6b7280; + + --ifm-background-color: var(--color-bg) !important; + --ifm-font-color-base: var(--color-text); + --ifm-color-content: var(--color-text); + --ifm-color-content-secondary: var(--color-text-muted); + + --ifm-navbar-background-color: rgba(0, 0, 0, 0.85); + --ifm-navbar-link-color: var(--color-text); + --ifm-navbar-link-hover-color: var(--color-accent); + + --ifm-menu-color: var(--color-text-muted) !important; + --ifm-menu-color-active: var(--color-accent) !important; + --ifm-menu-color-background-active: rgba(254, 163, 21, 0.16); + --ifm-menu-color-background-hover: var(--color-bg-muted); + --ifm-breadcrumb-color-active: var(--color-accent); + --ifm-hover-overlay: rgba(254, 163, 21, 0.18) !important; + + --ifm-code-background: #141414 !important; + --ifm-pre-background: #0a0a0a; + --docusaurus-highlighted-code-line-bg: rgba(254, 163, 21, 0.18); + + --normal-bg-1: var(--color-bg); + --navbar-bg-color: var(--color-bg); + --title-text-color: var(--color-text); + --sub-text-color: var(--color-text-muted); + --sub-text-color-1: var(--color-text-muted); + --sub-text-color-2: var(--color-text-muted); + --sub-text-color-3: rgba(255, 255, 255, 0.7); + --sub-text-color-5: var(--color-text); + --sub-text-color-6: var(--brand-white); + + --blog-border-color: var(--color-border); + --right-sidebar-circle-bg-color: var(--color-border); + --right-sidebar-active-color: var(--color-accent); + --docs-detail-bg: #141414; + --ordered-list-bg-color: rgba(254, 163, 21, 0.18); + --ordered-list-text-color: var(--color-text); + --portrait-border-color: var(--color-border); + --popper-bg-color: var(--color-accent); + --popper-text-color: var(--brand-black); + + --box-border-color: var(--color-border); + --box-hover-border-color: var(--color-accent); + --code-border-color: transparent; + --nav-link-line-normal-color: var(--color-border); + + --footer-bg-color: #000000; + + /* AA-compliant link color on dark background. + * #FEA315 (brand light orange) on #000 ≈ 9.27:1 (AAA). */ + --color-accent: var(--brand-orange); + --color-accent-hover: #ffba47; + + --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), + 0 1px 2px rgba(0, 0, 0, 0.35); + --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5), + 0 2px 4px rgba(0, 0, 0, 0.3); + --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.6), + 0 4px 12px rgba(0, 0, 0, 0.3); +} + +/* Base body */ +html, +body { + font-family: var(--font-family-base); + background-color: var(--color-bg); + color: var(--color-text); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Headings always use Montserrat */ +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--font-family-display); + letter-spacing: -0.01em; +} + +code, +kbd, +pre, +samp { + font-family: var(--font-family-mono); +} diff --git a/src/css/design-class.scss b/src/css/design-class.scss index 4ce8f6c5d7d..2c24612bbf8 100644 --- a/src/css/design-class.scss +++ b/src/css/design-class.scss @@ -1,20 +1,29 @@ +/** + * Atomic utility classes used by page components. + */ + .sub-text { - line-height: 24px; - letter-spacing: 0.02em; + line-height: 1.6; + letter-spacing: 0.01em; text-align: left; - color: var(--sub-text-color-2); + color: var(--color-text-muted); } .main-title { - font-size: 30px; + font-family: var(--font-family-display); + font-size: 1.875rem; font-weight: 700; - line-height: 56px; + line-height: 1.25; + letter-spacing: -0.01em; + color: var(--color-text); } + .sub-title { - font-size: 24px; - font-weight: 700; - line-height: 20px; - color: var(--sub-text-color-5); + font-family: var(--font-family-display); + font-size: 1.25rem; + font-weight: 600; + line-height: 1.4; + color: var(--color-text); } .flex { @@ -25,13 +34,16 @@ } .active-color { - color: var(--active-color); + color: var(--color-accent); cursor: pointer; + &:hover { + text-decoration: underline; + } } .light-active-color { color: #fff; cursor: pointer; - font-weight: 700; + font-weight: 600; &:hover { text-decoration: underline; color: inherit; @@ -41,10 +53,11 @@ .two-lines-ellipsis { display: -webkit-box; line-clamp: 2; + -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; - font-size: 14px; + font-size: 0.875rem; } .single-line-overflow { white-space: nowrap; @@ -70,7 +83,6 @@ } } -// set up an external container and remove the underline of other labels in label a .link-wrap { &:hover { * { @@ -80,6 +92,9 @@ } .code-block { - background-color: rgba(217, 217, 217, 0.2); - padding: 3px 5px; -} \ No newline at end of file + background-color: var(--color-bg-muted); + padding: 0.125em 0.375em; + border-radius: 4px; + font-family: var(--font-family-mono); + font-size: 0.875em; +} diff --git a/src/css/design-style.scss b/src/css/design-style.scss index 628ff3eaf02..e1ef1a8a50c 100644 --- a/src/css/design-style.scss +++ b/src/css/design-style.scss @@ -1,36 +1,56 @@ +/** + * Global element/atomic style overrides. + * Designed to feel like Mintlify: clean, airy, generous whitespace, + * subtle borders + shadows, and Berry Orange accents. + */ + a { text-decoration: none; color: inherit; + transition: color var(--motion-fast); &:hover { - color: var(--active-color); + color: var(--color-accent); text-decoration: underline; } } -// navbar header +/* ------------------------------------------------------------------ */ +/* Navbar */ +/* ------------------------------------------------------------------ */ .navbar { - background-color: var(--navbar-bg-color); + background-color: var(--ifm-navbar-background-color); + backdrop-filter: saturate(180%) blur(12px); + -webkit-backdrop-filter: saturate(180%) blur(12px); + border-bottom: 1px solid var(--color-border); padding: 0; + box-shadow: none; + .navbar__inner { + max-width: var(--global-main-width); + margin: 0 auto; box-sizing: border-box; - padding: 0 70px; + padding: 0 var(--mobile-padding-width); display: flex; justify-content: space-between; align-items: center; + height: var(--ifm-navbar-height); - // mobile hide right menu .navbar__item { display: inline-block; + padding: 8px 12px; + font-size: 0.9375rem; + font-weight: 500; } } + .navbar__items { display: flex; align-items: center; - + gap: 4px; + &:not(.navbar__items--right) { flex: 0 0 auto; } - &.navbar__items--right { margin-left: auto; flex-shrink: 0; @@ -38,130 +58,208 @@ a { } .navbar__items--right { a { - font-weight: 700; + font-weight: 500; } } - .navbar__link--active { - color: var(--active-color); - // specify the active link color + .navbar__link { + font-weight: 500; + transition: color var(--motion-fast); + &:hover { + color: var(--color-accent); + } + } + .navbar__link--active { + color: var(--color-accent); &[href="/releases"] { color: var(--ifm-navbar-link-color); } } + + .dropdown__menu { + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + box-shadow: var(--shadow-md); + padding: 6px; + background-color: var(--color-surface); + .dropdown__link { + border-radius: var(--radius-sm); + font-size: 0.9375rem; + padding: 8px 12px; + &:hover { + background-color: var(--brand-orange-soft); + color: var(--color-text); + } + } + } + .navbar-sidebar { - background-color: var(--normal-bg-1); + background-color: var(--color-bg); } + @media screen and (max-width: 1024px) { & { width: 100%; min-width: 100%; } - --ifm-navbar-background-color: rgba(15, 15, 15); - --ifm-navbar-height: 47px; - + --ifm-navbar-height: 56px; .navbar__items--right { display: none; } .navbar__logo { - width: 107px; + width: 132px; } } @media screen and (max-width: 768px) { .navbar__inner { - padding: 0 35px; + padding: 0 var(--mobile-padding-width); } } } -[data-theme="light"] { - .navbar { - --ifm-navbar-background-color: #fff; + +/* Pinned to home hero — translucent on dark hero */ +.navbar-home-lighting { + background: transparent; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + .clean-btn { + color: #fff; + } + .navbar__toggle, + .navbar__toggle:hover { + color: #fff; } } -// markdown style +/* When the mobile sidebar is open, ensure it always has a solid surface + * background and readable text — even on the home page where the navbar + * itself is translucent over the dark hero. + * + * The home navbar has .navbar-home-lighting which sets text/logo to + * white (looks great over the dark hero). Inside the sidebar we revert + * those to the regular theme tokens so menu items don't render + * white-on-white. */ +.navbar-sidebar { + background-color: var(--color-bg) !important; + color: var(--color-text); + box-shadow: var(--shadow-lg); + + /* Reset any white-on-white inheritance from .navbar-home-lighting */ + --ifm-navbar-link-color: var(--color-text); + --ifm-navbar-background-color: var(--color-bg); + + .navbar__brand, + .navbar__title, + .menu__link, + .clean-btn { + color: var(--color-text); + } + .menu__link:hover { + background-color: var(--color-bg-muted); + color: var(--color-text); + } + .menu__link--active, + .menu__link--active:hover { + color: var(--color-text); + background-color: var(--brand-orange-soft); + } + .navbar-sidebar__brand { + background-color: var(--color-bg); + border-bottom: 1px solid var(--color-border); + box-shadow: none; + } + .navbar-sidebar__back { + background: var(--color-bg-muted); + color: var(--color-text); + border-radius: var(--radius-sm); + } + .navbar-sidebar__close svg { + fill: var(--color-text); + } +} +.navbar-sidebar__backdrop { + background-color: rgba(0, 0, 0, 0.55) !important; +} + +@media (max-width: 1024px) { + .navbar__toggle { + display: inherit; + } +} + +.nav-left-logo { + display: flex; + align-items: center; + flex-shrink: 0; + margin-right: 16px; +} + +/* ------------------------------------------------------------------ */ +/* Markdown article */ +/* ------------------------------------------------------------------ */ article { code { - border: 1px solid var(--code-border-color); - font-size: 14px; - } - .anchor { - color: var(--active-color); + border: 1px solid var(--color-border); + background-color: var(--ifm-code-background); + color: var(--color-text); + padding: 0.125em 0.375em; + font-size: 0.875em; + border-radius: 4px; } - .hash-link { - &::before { - color: var(--active-color); - } + .anchor, + .hash-link::before { + color: var(--color-accent); } + a { - color: var(--active-color); + color: var(--color-accent); + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 2px; &:hover { - text-decoration: underline; + color: var(--color-accent-hover); + text-decoration-thickness: 2px; } } + li::marker { - color: var(--active-color); + color: var(--color-accent); } li > ul { list-style: disc; > li::marker { - color: rgb(201, 209, 217); + color: var(--color-text-soft); font-size: 12px; } } - // ul, ol style -.markdown ul { - list-style-type: square; /* Options: circle, square */ -} - -.markdown ul, .markdown ol { - font-size: 15px; -} - -.markdown blockquote { - border-left: 4px solid rgba(255, 168, 0, 1); - background-color: rgba(255, 168, 0, 0.1); - font-style: italic; -} - -.markdown img { - max-width: 100%; - height: auto; - border-radius: 8px; - box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); - display: block; - margin: 16px auto; -} - - // 1,2,3 + /* Numbered lists with subtle pill counters */ ol { counter-reset: list; list-style: none; + padding-left: 1.75rem; > li { position: relative; &::before { counter-increment: list; content: counter(list); - background-color: var(--ordered-list-bg-color); + background-color: var(--brand-orange-soft); + color: var(--color-text); display: inline-block; position: absolute; width: 22px; height: 22px; line-height: 22px; text-align: center; - left: -30px; + left: -28px; top: 1px; border-radius: 50%; - font-size: 14px; - color: var(--ordered-list-text-color); + font-size: 12px; + font-weight: 600; } } } - - // a,b,c li > ol { list-style: lower-alpha; > li { @@ -171,122 +269,281 @@ article { } } - // icon + /* Admonitions */ .theme-admonition { + border-radius: var(--radius-md); + border: 1px solid var(--color-border); a { - text-decoration-color: var(--active-color); + text-decoration-color: var(--color-accent); + } + &.alert--warning, + &.alert--danger, + &.alert--success, + &.alert--secondary, + &.alert--info { + font-size: 0.9375rem; } &.alert--warning { - font-size: 14px; span::before { content: ""; display: inline-block; - width: 23px; - height: 23px; - font-size: 14px; + width: 22px; + height: 22px; background-image: url("/img/docs/warning.svg"); background-size: contain; + background-repeat: no-repeat; + margin-right: 6px; + vertical-align: middle; } svg { display: none; } } &.alert--danger { - font-size: 14px; span::before { content: ""; display: inline-block; - width: 24px; - height: 24px; + width: 22px; + height: 22px; background-image: url("/img/docs/danger.svg"); background-size: contain; + background-repeat: no-repeat; + margin-right: 6px; + vertical-align: middle; } svg { display: none; } } - &.alert--success { - font-size: 14px; + } +} + +pre code .token { + font-size: 0.8125rem; +} + +/* ------------------------------------------------------------------ */ +/* Shared markdown content typography */ +/* Applies identically to Docs, Blog and MDX sub-pages */ +/* (Community / Contribute / Team / Resources / Download). */ +/* The .markdown class is present on all three: */ +/* - Docs:
*/ +/* - Blog:
*/ +/* - MDX :
*/ +/* ------------------------------------------------------------------ */ +.markdown { + ul { + list-style-type: disc; + } + ul, + ol { + font-size: 0.9375rem; /* 15px — one notch smaller than 16px body for clear hierarchy */ + line-height: 1.65; + margin: 12px 0 16px; + } + ul { + padding-left: 1.5rem; + } + ol { + padding-left: 1.75rem; + } + li { + margin: 4px 0; + } + li > p { + margin: 0; + } + /* Nested lists step down once more for visual depth */ + li ul, + li ol { + font-size: 0.875rem; /* 14px */ + margin: 4px 0; + } + + blockquote { + border-left: 3px solid var(--brand-orange); + background-color: rgba(255, 89, 0, 0.06); + border-radius: 0 var(--radius-sm) var(--radius-sm) 0; + color: var(--color-text-muted); + font-style: normal; + padding: 12px 18px; + margin: 16px 0; + } + + img { + max-width: 100%; + height: auto; + border-radius: var(--radius-md); + box-shadow: var(--shadow-sm); + display: block; + margin: 20px auto; + border: 1px solid var(--color-border); + } +} + +/* ------------------------------------------------------------------ */ +/* Tables — tighten typography and improve hierarchy */ +/* ------------------------------------------------------------------ */ +.markdown table, +article table { + font-size: 0.875rem; /* 14px — clearly smaller than 16px body */ + line-height: 1.55; + border-collapse: separate; + border-spacing: 0; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + overflow: hidden; + margin: 16px auto 24px; + /* Block + fit-content so narrow tables don't stretch full-width + * (no trailing empty border) while wide ones still get + * horizontal scrolling. Auto margins center the table. */ + display: block; + width: fit-content; + max-width: 100%; + overflow-x: auto; + + thead { + background-color: var(--color-bg-muted); + th { + font-family: var(--font-family-display); + font-size: 0.75rem; /* 12px — uppercase column labels */ + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--color-text-muted); + border-bottom: 1px solid var(--color-border); + padding: 10px 14px; + text-align: left; + } + } + + tbody { + tr { + border-bottom: 1px solid var(--color-border); + &:last-child { + border-bottom: none; + } + &:nth-child(2n) { + background-color: var(--color-bg-subtle); + } } - &.alert--secondary { - font-size: 14px; + td { + padding: 10px 14px; + color: var(--color-text); + vertical-align: top; + border: none; } } + + /* Inline code inside tables stays slightly smaller than table text */ + code { + font-size: 0.8125rem; + } } -pre code .token { - font-size: 12px; +/* Code blocks */ +[class*="codeBlockContainer"] { + border: 1px solid var(--color-border); + border-radius: var(--radius-md) !important; + box-shadow: var(--shadow-xs) !important; +} +[class*="codeBlockTitle"] { + background-color: var(--color-bg-muted); + border-bottom: 1px solid var(--color-border); + color: var(--color-text); + font-family: var(--font-family-mono); + font-weight: 500; +} +[class*="codeBlockContent"], +.prism-code, +pre[class*="language-"] { + background-color: var(--ifm-pre-background) !important; + color: var(--color-text); +} +.theme-code-block { + --prism-background-color: var(--ifm-pre-background) !important; } +/* ------------------------------------------------------------------ */ +/* Main content layout */ +/* ------------------------------------------------------------------ */ .main-wrapper { - // docs left menu released .container { a { text-decoration: none; } article { - --ifm-color-primary: var(--active-color); + --ifm-color-primary: var(--brand-orange); } } - @media screen and (min-width: 1440px) { + + @media screen and (min-width: 1280px) { > div { width: var(--global-main-width); } } - // docs layout > div { max-width: var(--global-main-width); margin: 0 auto; } + h1:first-child { - font-size: 30px; + font-size: 2.25rem; + font-weight: 700; + letter-spacing: -0.02em; } h2 { - font-size: 24px; + font-size: 1.625rem; + font-weight: 700; + margin-top: 2rem; } - h3 { - font-size: 20px; + font-size: 1.25rem; + font-weight: 600; + margin-top: 1.5rem; + } + p { + color: var(--color-text); + line-height: 1.75; } - p, li { - color: var(--sub-text-color-2); + color: var(--color-text); + line-height: 1.65; } strong { - color: var(--title-text-color); + color: var(--color-text); + font-weight: 600; } .alert--info { - border: none; - font-size: 14px; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); background-color: var(--docs-detail-bg); &[open] summary { &::after { transform: rotate(90deg); - transition: transform 0.3s ease-in-out; + transition: transform var(--motion-base); } } summary { padding-left: 0; - color: var(--active-color); - + color: var(--color-accent); &::before { display: none; } &::after { - // content: "▶"; content: ""; position: relative; - left: 10px; - top: 5px; - width: 20px; - height: 20px; + left: 8px; + top: 4px; + width: 18px; + height: 18px; display: inline-block; background-image: url(@site/static/img/greater_than.png); background-repeat: no-repeat; - transition: transform 0.3s ease-in-out; + background-size: contain; + transition: transform var(--motion-base); } - // click to see detail inner line & + div { > div { border-top: none; @@ -297,82 +554,69 @@ pre code .token { } } -// md right sidebar +/* ------------------------------------------------------------------ */ +/* Right TOC sidebar */ +/* ------------------------------------------------------------------ */ .table-of-contents { - border-left: none; + border-left: 1px solid var(--color-border); + padding-left: 1rem; + font-size: 0.875rem; + + .table-of-contents__link { + transition: color var(--motion-fast); + &:hover { + color: var(--color-accent); + } + } .table-of-contents__link--active { - color: var(--right-sidebar-active-color); + color: var(--color-accent); + font-weight: 600; } li { position: relative; - margin-top: 19px; - height: 21px; - line-height: 16px; + margin-top: 8px; + line-height: 1.4; &:not(:last-child) { &::after { - content: ""; - display: inline-block; - position: absolute; - width: 2px; - background-color: var(--right-sidebar-circle-bg-color); - height: 33px; - left: -17px; - top: 14px; - } - } - a { - &.table-of-contents__link--active { - &::before { - background-color: var(--right-sidebar-active-color); - } - } - &::before { - content: ""; - display: inline-block; - position: absolute; - width: 8px; - height: 8px; - background-color: var(--right-sidebar-circle-bg-color); - border-radius: 50%; - left: -20px; - top: 6px; + display: none; } } - } - li > ul { a { &::before { - // left: -36px; display: none; } } } - @media screen and (max-width: 996px) { - li { - &::after { - display: none !important; - } - a { - &::before { - display: none !important; - } - } - } - } } +.theme-doc-toc-desktop { + overflow-y: visible !important; +} + +/* ------------------------------------------------------------------ */ +/* Breadcrumbs */ +/* ------------------------------------------------------------------ */ .theme-doc-breadcrumbs { .breadcrumbs { display: flex; align-items: center; + font-size: 0.8125rem; + color: var(--color-text-muted); .breadcrumbs__item { display: inline-flex; align-items: center; .breadcrumbs__link { - padding: 0 6px; + padding: 4px 8px; + border-radius: var(--radius-sm); + transition: background-color var(--motion-fast), + color var(--motion-fast); + &:hover { + background-color: var(--color-bg-muted); + color: var(--color-text); + } } a.breadcrumbs__link { width: 18px; @@ -381,16 +625,16 @@ pre code .token { background-image: url("/img/back_home.svg"); background-repeat: no-repeat; background-size: cover; - margin-right: 4px; - margin-bottom: 3px; - + margin-right: 6px; + margin-bottom: 2px; + padding: 0; svg { display: none; } } &:not(:last-child) { &::after { - opacity: 1; + opacity: 0.6; width: 12px; height: 12px; background-repeat: no-repeat; @@ -401,184 +645,137 @@ pre code .token { } .breadcrumbs__item--active { .breadcrumbs__link { - font-size: 13px; + font-size: 0.8125rem; background-color: transparent; + color: var(--color-accent); } } } } -// docs right nav -.theme-doc-toc-desktop { - overflow-y: visible !important; -} - -// docs left nav ul > li > div > a/ul +/* ------------------------------------------------------------------ */ +/* Doc left sidebar */ +/* ------------------------------------------------------------------ */ .theme-doc-sidebar-container { - border-right: none !important; - margin-right: 60px; - font-size: 14px; + border-right: 1px solid var(--color-border) !important; + margin-right: 40px; + font-size: 0.9375rem; + + .menu { + padding: 1rem 0.5rem; + } + + .menu__link { + border-radius: var(--radius-sm); + padding: 6px 12px; + font-size: 0.9375rem; + font-weight: 400; + transition: background-color var(--motion-fast), + color var(--motion-fast); + &:hover { + background-color: var(--color-bg-muted); + } + &.menu__link--active { + font-weight: 600; + background-color: var(--brand-orange-soft); + color: var(--color-text); + } + } + + .menu__list-item-collapsible { + border-radius: var(--radius-sm); + .menu__link { + flex: 1; + } + &:hover { + background-color: var(--color-bg-muted); + } + } + .theme-doc-sidebar-menu { - margin-right: 0px; - // li - .theme-doc-sidebar-item-category { - position: relative; - a { + /* level-1 categories: section labels */ + .theme-doc-sidebar-item-category-level-1 { + > .menu__list-item-collapsible > .menu__link { + font-weight: 700; + text-transform: none; + font-family: var(--font-family-display); + letter-spacing: -0.01em; + color: var(--color-text); + } + > ul.menu__list { + padding-left: 8px; position: relative; - &::after { - display: none; - } &::before { content: ""; - position: absolute; - left: -1.5px; display: inline-block; - width: 16px; - height: 16px; - background-image: url("/img/docs/sub-no-active.svg"); - top: 8px; - transition: all 0.1s; - } - } - // button { - // display: none !important; - // } - - // no active add (div) - &.menu__list-item--collapsed { - a { - &::before { - transition: all 0.1s; - background-image: url("/img/docs/add-no-active.svg"); - } - } - } - // first level(li) - &.theme-doc-sidebar-item-category-level-1 { - position: relative; - > ul.menu__list { - padding-left: 0; - &::before { - content: ""; - display: inline-block; - width: 1px; - height: calc(100% - 34px); - position: absolute; - background-color: var(--ifm-hover-overlay); - left: 4px; - } - } - &.menu__list-item { - > .menu__list-item-collapsible { - background: transparent; - a { - color: var(--title-text-color); - &::before { - background-image: url("/img/docs/sub.svg"); - } - } - &:hover { - a { - color: var(--active-color); - &::before { - background-image: url("/img/docs/hover-sub-active.svg"); - } - } - } - } - } - &.menu__list-item--collapsed { - > .menu__list-item-collapsible { - &:hover { - a { - &::before { - background-image: url("/img/docs/hover-add-active.svg") !important; - } - } - } - } - a { - &::before { - background-image: url("/img/docs/add.svg") !important; - } - } - } - } - - // li - &:not(.theme-doc-sidebar-item-category-level-1) { - // foldable (div) - .menu__list-item-collapsible { - padding-left: var(--ifm-menu-link-padding-horizontal); - } - &.menu__list-item { - .menu__link--active { - &::before { - background-image: url("/img/docs/hover-sub-active.svg"); - } - } - } - } - // leaf node (li) - .theme-doc-sidebar-item-link { - &.theme-doc-sidebar-item-link-level-3 { - a { - &::after { - left: -14px; - } - } - } - a { - &::before { - display: none !important; - } + width: 1px; + height: calc(100% - 8px); + position: absolute; + background-color: var(--color-border); + left: 4px; + top: 4px; } } } } } -// download +/* Disable old icon-based menu indicators */ +.theme-doc-sidebar-menu .theme-doc-sidebar-item-category a::before { + display: none !important; +} + .thin-scrollbar { overflow-y: visible !important; } -// blog detail bottom +/* ------------------------------------------------------------------ */ +/* Pagination at bottom of docs/blog */ +/* ------------------------------------------------------------------ */ .pagination-nav { - margin-top: 25px; - display: flex; - justify-content: space-between; + margin-top: 2rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; .pagination-nav__link { - width: 298px; - height: 60px; - font-size: 14px; - @media screen and (max-width: 768px) { - width: 150px; - } + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: 14px 16px; + height: auto; + width: auto; + transition: border-color var(--motion-fast), + box-shadow var(--motion-fast), transform var(--motion-fast); .pagination-nav__label { - font-size: 14px; - color: var(--active-color); - font-weight: 400; + font-size: 0.8125rem; + color: var(--color-accent); + font-weight: 600; } .pagination-nav__sublabel { - color: var(--sub-text-color-2); + color: var(--color-text-muted); + font-size: 0.75rem; + margin-bottom: 4px; } &:hover { - background-color: var(--active-color); + border-color: var(--color-accent); + box-shadow: var(--shadow-sm); + background-color: transparent; .pagination-nav__sublabel { - color: var(--hover-full-bg-text-color); + color: var(--color-text-muted); } .pagination-nav__label { - color: var(--hover-full-bg-text-color); + color: var(--color-accent); } } } + @media screen and (max-width: 768px) { + grid-template-columns: 1fr; + } } -// hide table of content -@media screen and (max-width: 1440px) { +/* Hide TOC on smaller screens */ +@media screen and (max-width: 1280px) { .container { .row { > .col--3 { @@ -588,191 +785,119 @@ pre code .token { } } +/* Tabs */ ul[role="tablist"] { - border-bottom: 1px solid #383b3f; + border-bottom: 1px solid var(--color-border); .tabs__item { border-bottom-left-radius: 0; border-bottom-right-radius: 0; + font-weight: 500; } .tabs__item--active { - background-color: #333333; - color: #fff; - border-bottom: none; + background-color: transparent; + color: var(--color-accent); + border-bottom: 2px solid var(--color-accent); + } +} + +/* ------------------------------------------------------------------ */ +/* DocCard / DocCardList — used on docs index pages via */ +/* . Default Docusaurus styling renders the title as */ +/*

, which inherits our large heading sizing. Override to a */ +/* compact, scannable card list (similar to Mintlify's card grid). */ +/* ------------------------------------------------------------------ */ +article a[class*="cardContainer"] { + /* Override the inline-link underline that we set on article a's */ + text-decoration: none; + display: block; + border-radius: var(--radius-lg); + border: 1px solid var(--color-border); + background-color: var(--color-surface); + box-shadow: var(--shadow-xs); + padding: 1.125rem 1.25rem; + transition: border-color var(--motion-fast), + box-shadow var(--motion-fast), + transform var(--motion-fast); + + /* Title: tame to body-sized text, not heading-scale */ + > h2, + > [class*="cardTitle"] { + font-family: var(--font-family-display); + font-size: 0.9375rem !important; + font-weight: 600 !important; + line-height: 1.4 !important; + color: var(--color-text) !important; + letter-spacing: 0; + margin: 0 0 0.25rem 0 !important; + /* No hash-link / anchor link decorations on cards */ + &::before, + .hash-link { + display: none; + } + } + + /* Description */ + > p, + > [class*="cardDescription"] { + font-size: 0.8125rem !important; + line-height: 1.5 !important; + color: var(--color-text-muted) !important; + margin: 0 !important; + } + + &:hover { + border-color: var(--color-accent); + box-shadow: var(--shadow-sm); + transform: translateY(-1px); + text-decoration: none; } } +/* Light-mode specific overrides */ html[data-theme="light"] { .theme-doc-breadcrumbs { a.breadcrumbs__link { background-image: url("/img/back_home-light.svg") !important; - color: auto !important; } } .theme-admonition { - &.alert--warning { - span::before { - background-image: url("/img/docs/warning-light.svg"); - } + &.alert--warning span::before { + background-image: url("/img/docs/warning-light.svg"); } - &.alert--danger { - span::before { - background-image: url("/img/docs/danger-light.svg"); - } - } - } - ul[role="tablist"] { - border-bottom: 1px solid #d6d9dd; - .tabs__item--active { - background-color: #ffeecc; - color: #000; - } - } - - // docs left nav - .theme-doc-sidebar-container { - .theme-doc-sidebar-menu { - // li - .theme-doc-sidebar-item-category { - a { - &::before { - background-image: url("/img/docs/sub-light.svg"); - } - } - - // no active add (div) - &.menu__list-item--collapsed { - a { - &::before { - // inner - background-image: url("/img/docs/add-light.svg"); - } - } - } - // first level(li) - &.theme-doc-sidebar-item-category-level-1 { - > ul.menu__list { - &::before { - background-color: #ffe5b3; - } - } - &.menu__list-item { - > .menu__list-item-collapsible { - a { - &::before { - background-image: url("/img/docs/sub-light.svg"); - } - } - &:hover { - a { - color: var(--active-color); - &::before { - background-image: url("/img/docs/hover-sub-active.svg"); - } - } - } - } - } - &.menu__list-item--collapsed { - > .menu__list-item-collapsible { - &:hover { - a { - &::before { - background-image: url("/img/docs/hover-add-active.svg") !important; - } - } - } - } - a { - &::before { - background-image: url("/img/docs/add-light.svg") !important; - } - } - } - } - - // li - &:not(.theme-doc-sidebar-item-category-level-1) { - &.menu__list-item { - .menu__link--active { - &::before { - background-image: url("/img/docs/sub-light.svg"); - } - } - } - } - } + &.alert--danger span::before { + background-image: url("/img/docs/danger-light.svg"); } } } -.navbar-home-lighting { - background: #000; - .clean-btn { - color: #fff; - } - .check-theme-switch { - display: none !important; - } -} - -@media (max-width: 1024px) { - .navbar__toggle { - display: inherit; - } -} - -.nav-left-logo { - display: flex; - align-items: center; - flex-shrink: 0; - margin-right: 20px; -} - -/* Progressive responsive adjustments for navbar spacing */ +/* Progressive responsive nav */ @media (max-width: 1200px) { - .navbar { - .navbar__inner { - padding: 0 40px; - } - } .nav-left-logo { - margin-right: 15px; + margin-right: 12px; } } - @media (max-width: 1100px) { - .navbar { - .navbar__inner { - padding: 0 30px; - } - } .nav-left-logo { - margin-right: 10px; + margin-right: 8px; } .navbar__logo { max-width: 140px; height: auto; } } - @media (max-width: 1050px) { .navbar__items { - gap: 10px; - } - .nav-left-logo { - margin-right: 8px; + gap: 6px; } .navbar__logo { - max-width: 120px; + max-width: 130px; } } - @media (max-width: 997px) { - /* Docusaurus mobile breakpoint */ .navbar__items { - gap: 5px; + gap: 4px; } .nav-left-logo { - margin-right: 5px; + margin-right: 4px; } } diff --git a/src/css/pages/community.module.scss b/src/css/pages/community.module.scss index ae2cf52ebb1..f18f8e7ad49 100644 --- a/src/css/pages/community.module.scss +++ b/src/css/pages/community.module.scss @@ -3,59 +3,48 @@ margin: 0 auto; padding: 0 var(--mobile-padding-width); display: flex; + gap: 56px; width: 100%; .leftContent { - padding-top: 68px; + flex: 1; + min-width: 0; + padding-top: 48px; + .cardLine { display: grid; - grid-template-columns: 1fr 1fr 1fr; - justify-content: space-between; - gap: 40px; + grid-template-columns: repeat(3, 1fr); + gap: 20px; } } + .rightContent { - // flex: 1; - width: 80%; + width: 220px; + flex-shrink: 0; position: relative; + .navLinkWrap { position: sticky; - width: 196px; - height: 203px; - margin-left: 108px; - margin-top: 51px; - top: 130px; + top: 96px; + width: 100%; } } - @media screen and (max-width: 1440px) { - .leftContent { - .cardLine { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-gap: 32px; - height: auto !important; - } - } - - .rightContent { - .navLinkWrap { - margin-left: 40px; - } + @media screen and (max-width: 1280px) { + .leftContent .cardLine { + grid-template-columns: repeat(2, 1fr); + gap: 16px; } } @media screen and (max-width: 1024px) { + gap: 0; .rightContent { display: none; } } @media screen and (max-width: 768px) { - .leftContent { - .cardLine { - &.getInvolved { - grid-template-columns: 1fr !important; - } - } + .leftContent .cardLine { + grid-template-columns: 1fr !important; } } } diff --git a/src/css/pages/contribute.module.scss b/src/css/pages/contribute.module.scss index 3f2ea78d956..842809f69a5 100644 --- a/src/css/pages/contribute.module.scss +++ b/src/css/pages/contribute.module.scss @@ -2,63 +2,57 @@ max-width: var(--global-main-width); margin: 0 auto; padding: 0 var(--mobile-padding-width); + .mainContent { display: flex; + gap: 56px; + .leftContent { - max-width: 1050px; - flex-basis: 1050px; + flex: 1; + min-width: 0; } .rightContent { - flex: 1; + width: 220px; + flex-shrink: 0; position: relative; .navLinkWrap { position: sticky; - width: 196px; - height: 203px; - margin-left: 108px; - margin-top: 51px; - top: 130px; + top: 96px; + width: 100%; + margin-top: 64px; } } } - @media screen and (max-width: 1440px) { + + @media screen and (max-width: 1024px) { .mainContent { - .leftContent { - width: 70%; - } + gap: 0; .rightContent { - .navLinkWrap { - margin-left: 40px; - } + display: none; } } } - @media screen and (max-width: 1024px) { - .rightContent { - display: none; - } - @media screen and (max-width: 768px) { - .leftContent { - .codeContribution { - display: grid; - grid-template-columns: 1fr; - gap: 32px; - } + @media screen and (max-width: 768px) { + .mainContent { + .leftContent .codeContribution { + display: grid; + grid-template-columns: 1fr; + gap: 20px; } } } } .codeContribution { - display: flex; - margin-top: 32px; - .firstPosition { - margin-right: 20px; - } + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + margin-top: 16px; + margin-bottom: 24px; } .highLight { - color: var(--active-color); + color: var(--color-accent); a { color: inherit; } diff --git a/src/css/pages/home.module.scss b/src/css/pages/home.module.scss index e9238a16aed..533a080e1ef 100644 --- a/src/css/pages/home.module.scss +++ b/src/css/pages/home.module.scss @@ -1,5 +1,4 @@ .homeContentContainer { - max-width: var(--global-main-width); - margin: auto; - padding-bottom: 127px; + background-color: var(--color-bg); + padding-bottom: 64px; } diff --git a/src/css/pages/support.module.scss b/src/css/pages/support.module.scss index 47f7db78879..28ce0a97f60 100644 --- a/src/css/pages/support.module.scss +++ b/src/css/pages/support.module.scss @@ -1,49 +1,11 @@ +/** + * Support page — uses
for body content, + * so all element styling (tables, h2, p, lists) comes from the + * shared markdown rules in design-style.scss. We only own the + * outer page width / padding here. + */ .mainContent { max-width: var(--global-main-width); margin: 0 auto; - position: relative; - min-height: 1365px; - .content { - position: absolute; - left: 50%; - transform: translateX(-50%); - top: 33px; - - .title { - font-size: 30px; - line-height: 40px; - } - .subText { - line-height: 25px; - color: var(--sub-text-color-2); - margin-top: 17px; - } - .typeDesc { - margin-top: 46px; - } - } - @media screen and (max-width: 1024px) { - padding-bottom: 100px; - .content { - width: 100%; - padding: 0 var(--mobile-padding-width); - position: static; - transform: translateX(0); - - .table { - width: 100% !important; - } - } - } - @media screen and (max-width: 768px) { - .table { - width: auto !important; - } - } -} - -.subTitleText { - line-height: 50px; - font-size: 20px; - font-weight: bold; + padding: 32px var(--mobile-padding-width) 96px; } diff --git a/src/pages/support.tsx b/src/pages/support.tsx index 2649f0a4d39..6ae00c42c1d 100644 --- a/src/pages/support.tsx +++ b/src/pages/support.tsx @@ -1,4 +1,3 @@ -import clsx from "clsx"; import ColorCard from "../components/common/ColorCard"; import CommonLayout from "../components/common/Layout"; import Table from "../components/common/Table"; @@ -14,30 +13,32 @@ const { commercialDesc, commercialSupportText, } = configData; + export default function Support() { return (
-
-
{contentTextDesc}
-
-
{communitySupportText}
- - -
{commercialSupportText}
-
{commercialDesc}
- + {/* + * Use the shared "markdown" article shell so the table, lists, + * blockquotes etc. inherit the exact same styling as Docs and + * MDX sub-pages (Community / Contribute / Team). + */} +
+

{contentTextDesc}

+ +

{communitySupportText}

+
+ +

{commercialSupportText}

+

{commercialDesc}

+ ); diff --git a/src/theme/BlogLayout/styles.module.scss b/src/theme/BlogLayout/styles.module.scss index 04e559c70a7..b4e6877476d 100644 --- a/src/theme/BlogLayout/styles.module.scss +++ b/src/theme/BlogLayout/styles.module.scss @@ -1,52 +1,36 @@ .contentLayout { - padding: 0 var(--mobile-padding-width); + max-width: var(--global-main-width); + margin: 0 auto; + padding: 24px var(--mobile-padding-width) 48px; } + .main { - // max-width: 896px; width: 100%; + &.blogList { - max-width: 1056px; margin: 0 auto; - } - &.blogDetail { - max-width: 650px; - } - &.blogList { - .breadcrumbs { - margin-bottom: 10px; - margin-top: 10px; - } .listWrap { display: grid; grid-template-columns: repeat(3, 1fr); - grid-column-gap: 2rem; - grid-row-gap: 3rem; + gap: 24px; } } + &.blogDetail { + max-width: 760px; margin: 0 auto; - .breadcrumbs { - margin-top: 20px; - display: flex; - align-items: self-start; - } - } - @media screen and (max-width: 1056px) { - &.blogList { - .listWrap { - gap: 15px; - } - } } + @media screen and (max-width: 1024px) { &.blogList { .listWrap { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(2, 1fr); + gap: 20px; } } } - @media screen and (max-width: 768px) { + @media screen and (max-width: 640px) { &.blogList { .listWrap { grid-template-columns: 1fr; @@ -54,8 +38,3 @@ } } } -@media screen and (max-width: 1440px) { - .contentLayout { - width: calc(100vw); - } -} diff --git a/src/theme/BlogPostItem/components/Authors/index.tsx b/src/theme/BlogPostItem/components/Authors/index.tsx index 894cb89b994..b21a31c7123 100644 --- a/src/theme/BlogPostItem/components/Authors/index.tsx +++ b/src/theme/BlogPostItem/components/Authors/index.tsx @@ -6,64 +6,51 @@ export default function BlogPostItemHeaderAuthors({ }): JSX.Element { const { metadata: { authors, formattedDate }, - assets, } = useBlogPost(); const authorsCount = authors.length; if (authorsCount === 0) { return null; } - // const authorsDom = authors.map((author) => { - // return ( - // - // {/* - // - // */} - // {author.name} - // - // ); - // }); return (
{authors.map((author, index) => { - return {author.name}; + return ( + + {author.name} + {index < authors.length - 1 ? ", " : ""} + + ); })} + {formattedDate}
); diff --git a/src/theme/BlogPostItem/components/Cover/index.tsx b/src/theme/BlogPostItem/components/Cover/index.tsx index 7259a2ca8de..4960735764d 100644 --- a/src/theme/BlogPostItem/components/Cover/index.tsx +++ b/src/theme/BlogPostItem/components/Cover/index.tsx @@ -1,21 +1,43 @@ import { useBlogPost } from "@docusaurus/theme-common/internal"; import useBaseUrl from "@docusaurus/useBaseUrl"; + interface IProps { style?: React.CSSProperties; onClick?: () => void; } + export default function Cover(props: IProps) { const { metadata } = useBlogPost(); + const imgUrl = useBaseUrl(metadata.frontMatter.image); + + if (!metadata.frontMatter.image) { + // Render a soft brand-tinted placeholder for posts without a cover + return ( +
+ ); + } return ( ); diff --git a/src/theme/BlogPostItem/components/Desc/index.tsx b/src/theme/BlogPostItem/components/Desc/index.tsx index 0bb0fe4135d..8020921135c 100644 --- a/src/theme/BlogPostItem/components/Desc/index.tsx +++ b/src/theme/BlogPostItem/components/Desc/index.tsx @@ -4,7 +4,12 @@ export default function Desc({ style }: { style?: React.CSSProperties }) { return (
{metadata.description}
diff --git a/src/theme/BlogPostItem/components/Tags/index.tsx b/src/theme/BlogPostItem/components/Tags/index.tsx index 249366b02c6..eba884656e6 100644 --- a/src/theme/BlogPostItem/components/Tags/index.tsx +++ b/src/theme/BlogPostItem/components/Tags/index.tsx @@ -9,13 +9,16 @@ export default function Tags({ style }: { style?: React.CSSProperties }) { {text.toString()} diff --git a/src/theme/BlogPostItem/components/Title/styles.module.scss b/src/theme/BlogPostItem/components/Title/styles.module.scss index 4e8f700384e..fc918bd09c2 100644 --- a/src/theme/BlogPostItem/components/Title/styles.module.scss +++ b/src/theme/BlogPostItem/components/Title/styles.module.scss @@ -1,20 +1,23 @@ .title { - font-size: 20px; - font-weight: 500; - line-height: 1.4; - color: var(--title-text-color); + font-family: var(--font-family-display); + font-size: 1.125rem; + font-weight: 700; + line-height: 1.35; + color: var(--color-text); + .detailTitle { - font-size: 30px; - font-weight: 600; - line-height: 1.2; - margin-top: 55px; + font-size: clamp(1.875rem, 3.5vw, 2.5rem); + font-weight: 800; + line-height: 1.15; + letter-spacing: -0.02em; + margin-top: 32px; display: inline-block; } a { color: inherit; text-decoration: none; &:hover { - color: var(--active-color); + color: var(--color-accent); } } } diff --git a/src/theme/BlogPostItem/index.tsx b/src/theme/BlogPostItem/index.tsx index 53fc16e661d..b0a2e1dd225 100644 --- a/src/theme/BlogPostItem/index.tsx +++ b/src/theme/BlogPostItem/index.tsx @@ -22,9 +22,9 @@ const BlogListItem = () => {
-
+
- +
diff --git a/src/theme/BlogPostItem/styles.module.scss b/src/theme/BlogPostItem/styles.module.scss index 40c18762511..6a242161403 100644 --- a/src/theme/BlogPostItem/styles.module.scss +++ b/src/theme/BlogPostItem/styles.module.scss @@ -1,10 +1,36 @@ .blogList { - border: 1px solid var(--blog-border-color); position: relative; + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + background-color: var(--color-surface); + box-shadow: var(--shadow-xs); + transition: border-color var(--motion-fast), + box-shadow var(--motion-fast), + transform var(--motion-fast); + &:hover { - border: 1px solid var(--active-color); + border-color: var(--color-accent); + box-shadow: var(--shadow-md); + transform: translateY(-2px); + } + + header { + a { + text-decoration: none; + color: inherit; + } + } + + /* Cover image fits header without rounded corners overlap */ + img { + border-radius: 0; + border: none; + margin: 0; + box-shadow: none; } } + .blogDetail { header { margin-bottom: 32px; @@ -12,19 +38,17 @@ .tags { display: flex; align-items: center; - margin-top: 35px; + margin-top: 24px; .text { - margin-right: 15px; - color: var(--sub-text-color-2); + margin-right: 12px; + color: var(--color-text-muted); } } } + article[itemProp="blogPost"] { - border-radius: 6px; - // last column no margin - &:nth-last-of-type(1) { - margin-bottom: 0; - } + border-radius: var(--radius-lg); + &:nth-last-of-type(1), &:nth-last-of-type(2) { margin-bottom: 0; } diff --git a/src/theme/BlogSidebar/Desktop/styles.module.scss b/src/theme/BlogSidebar/Desktop/styles.module.scss index 2d45a40cb58..f87605589f5 100644 --- a/src/theme/BlogSidebar/Desktop/styles.module.scss +++ b/src/theme/BlogSidebar/Desktop/styles.module.scss @@ -2,67 +2,88 @@ display: flex; justify-content: space-between; align-items: center; - margin-bottom: 10px; + margin: 16px 0 24px; + flex-wrap: wrap; + gap: 16px; + .rightSearch { position: relative; .searchIcon { position: absolute; left: 12px; - top: 60px; + top: 10px; } input { - width: 312px; - height: 37px; - margin-top: 55px; - border-radius: 500px; - border: 1px solid rgba(222, 226, 230, 1); - padding-left: 52px; - font-size: .875rem; + width: 280px; + max-width: 100%; + height: 38px; + border-radius: var(--radius-pill); + border: 1px solid var(--color-border); + padding-left: 40px; + padding-right: 16px; + font-size: 0.875rem; + background-color: var(--color-bg-subtle); + color: var(--color-text); + transition: border-color var(--motion-fast), + background-color var(--motion-fast); &::placeholder { - text-indent: 52px; - font-size: 16px; + color: var(--color-text-soft); + } + &:focus { + outline: none; + border-color: var(--color-accent); + background-color: var(--color-surface); } } } + .sidebar { max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem)); overflow-y: auto; position: sticky; - padding-top: 7px; + padding-top: 4px; } + .sidebarItemTitle { display: none; } + .sidebarItemList { display: flex; flex-wrap: wrap; - gap: 10px; - } - .sidebarItemList { - display: flex; + gap: 8px; } + .sidebarItem { cursor: pointer; - margin-top: 55px; - color: var(--sub-text-color-5); - padding: 0 20px; - height: 40px; - line-height: 40px; - border-radius: 4px; + color: var(--color-text-muted); + padding: 6px 14px; + height: auto; + line-height: 1.4; + border-radius: var(--radius-pill); + border: 1px solid var(--color-border); + background-color: var(--color-bg-subtle); + font-size: 0.875rem; + transition: background-color var(--motion-fast), + color var(--motion-fast), + border-color var(--motion-fast); &:hover, &.active { - // background-color: var(--ifm-menu-color-background-active); - background-color: var(--title-text-color); - color: var(--sub-text-color-6); + background-color: var(--color-accent); + color: var(--brand-black); + border-color: var(--color-accent); } } } + html[data-theme="dark"] { .sidebarItem { &:hover, &.active { - color: var(--active-color); + background-color: var(--color-accent); + color: var(--brand-black); + border-color: var(--color-accent); } } } diff --git a/src/theme/Footer/styles.module.scss b/src/theme/Footer/styles.module.scss index 6cb5966ab01..f4b8e78deb7 100644 --- a/src/theme/Footer/styles.module.scss +++ b/src/theme/Footer/styles.module.scss @@ -1,137 +1,110 @@ .wrap { - height: 548px; position: relative; - color: rgba(255, 255, 255, 0.6); width: 100%; margin: 0 auto; background-color: var(--footer-bg-color); + color: rgba(255, 255, 255, 0.7); .mainWrap { - display: flex; - justify-content: space-between; - padding: 0 168px; - margin: 80px auto 0; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + column-gap: 32px; + row-gap: 48px; max-width: var(--global-main-width); + margin: 0 auto; + padding: 64px var(--mobile-padding-width); + align-items: start; + .linksWrap { - display: flex; - width: 637px; - height: 328px; - flex-shrink: 0; - justify-content: space-between; - .footerLinkTitle { - color: #fff; - font-weight: 700; - line-height: 20px; - } - .footerLinkItem { - line-height: 20px; - margin-top: 24px; - a { - text-decoration: none; + display: contents; + + .footerLink { + .footerLinkTitle { + color: #fff; + font-family: var(--font-family-display); + font-weight: 700; + font-size: 0.9375rem; + letter-spacing: 0.02em; + margin-bottom: 18px; } - &:hover { + .footerLinkItem { + font-size: 0.875rem; + line-height: 1.5; + margin-bottom: 12px; a { - text-decoration: underline; - color: var(--active-color); + color: rgba(255, 255, 255, 0.7); + text-decoration: none; + transition: color var(--motion-fast); + &:hover { + color: var(--color-accent); + text-decoration: none; + } } } } } + .logoLinkWrap { - margin-left: 212px; - width: 214px; - height: 108px; - flex-shrink: 0; .logoWrap { - height: 60px; - display: flex; display: flex; align-items: center; - justify-content: space-between; + margin-bottom: 16px; .logo { - width: 164px; - } - .swap { - width: 26px; - height: 26px; - cursor: pointer; + width: 160px; + height: auto; } } .links { - margin-top: 12px; display: flex; - justify-content: space-between; + flex-wrap: wrap; + gap: 12px; align-items: center; .item { - fill: #fff; + width: 22px; + height: 22px; + fill: rgba(255, 255, 255, 0.7); + transition: fill var(--motion-fast), + transform var(--motion-fast); &:hover { - fill: var(--active-color); + fill: var(--color-accent); + transform: translateY(-1px); } } } } } + .copyrightWrap { + border-top: 1px solid rgba(255, 255, 255, 0.08); + background-color: rgba(0, 0, 0, 0.25); text-align: center; width: 100%; - background-color: #000; - font-size: 12px; + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.55); + padding: 24px var(--mobile-padding-width); .copyright { + max-width: var(--global-main-width); margin: 0 auto; + line-height: 1.6; + p { + margin: 0 0 10px 0; + &:last-child { + margin-bottom: 0; + } + } } } - - @media screen and (max-width: 1440px) { - .linksWrap { - width: 520px !important; - } - .mainWrap { - padding: 0 var(--mobile-padding-width); - } - } @media screen and (max-width: 1024px) { - height: auto; - display: flex; - flex-direction: column; .mainWrap { - flex-direction: column; - margin: 0; - .linksWrap { - position: static; - margin-top: 46px; - height: auto; - width: auto; - display: flex; - justify-content: space-between; - > div { - margin-bottom: 60px; - } - } - .logoLinkWrap { - position: static; - margin-bottom: 78px; - margin-left: 0 !important; - .logoWrap { - .logo { - width: 127px; - } - } - } - } - - .copyright { - position: static; - text-align: center; - font-size: 12px; - width: 100%; + grid-template-columns: 1fr 1fr; + row-gap: 40px; } } - @media screen and (max-width: 768px) { + @media screen and (max-width: 600px) { .mainWrap { - .linksWrap { - display: none !important; - } + grid-template-columns: 1fr; + padding: 48px var(--mobile-padding-width); } } } diff --git a/src/theme/MDXPage/index.tsx b/src/theme/MDXPage/index.tsx index 6200fd44d78..e2b3175e907 100644 --- a/src/theme/MDXPage/index.tsx +++ b/src/theme/MDXPage/index.tsx @@ -1,11 +1,8 @@ -import { useLocation } from "@docusaurus/router"; import { HtmlClassNameProvider, ThemeClassNames, } from "@docusaurus/theme-common"; -import useBaseUrl from "@docusaurus/useBaseUrl"; import ColorCard from "@site/src/components/common/ColorCard"; -import ColorCardStyle from "@site/src/components/common/ColorCard/styles.module.scss"; import CommonLayout from "@site/src/components/common/Layout"; import MDXContent from "@theme/MDXContent"; import type { Props } from "@theme/MDXPage"; @@ -16,10 +13,6 @@ import styles from "./styles.module.css"; export default function MDXPage(props: Props): JSX.Element { const { content: MDXPageContent } = props; - const location = useLocation(); - const pathLen = location.pathname.split("/").filter((item) => { - return item != ""; - }).length; const { metadata: { frontMatter, unlisted, description, title }, @@ -28,6 +21,9 @@ export default function MDXPage(props: Props): JSX.Element { const { wrapperClassName, hide_table_of_contents: hideTableOfContents } = frontMatter; + const showTOC = + !hideTableOfContents && MDXPageContent.toc && MDXPageContent.toc.length > 0; + return ( - +
-
+
{unlisted && } -
+
- {!hideTableOfContents && MDXPageContent.toc.length > 0 && ( -
+ {showTOC && ( +
diff --git a/static/img/back_home-light.png b/static/img/back_home-light.png deleted file mode 100644 index 5dd91f1c4e8..00000000000 Binary files a/static/img/back_home-light.png and /dev/null differ diff --git a/static/img/back_home-light.svg b/static/img/back_home-light.svg index c63fa6719c8..ba8831a3aba 100644 --- a/static/img/back_home-light.svg +++ b/static/img/back_home-light.svg @@ -1,3 +1,3 @@ - + diff --git a/static/img/bootcamp/cbdb-sandbox.png b/static/img/bootcamp/cbdb-sandbox.png deleted file mode 100644 index 492e818a0a1..00000000000 Binary files a/static/img/bootcamp/cbdb-sandbox.png and /dev/null differ diff --git a/static/img/bootcamp/cloudberrydb_logo.png b/static/img/bootcamp/cloudberrydb_logo.png deleted file mode 100644 index a874b602aa7..00000000000 Binary files a/static/img/bootcamp/cloudberrydb_logo.png and /dev/null differ diff --git a/static/img/cbdb-sandbox.png b/static/img/cbdb-sandbox.png deleted file mode 100644 index 492e818a0a1..00000000000 Binary files a/static/img/cbdb-sandbox.png and /dev/null differ diff --git a/static/img/celebrate.png b/static/img/celebrate.png deleted file mode 100644 index 0c265b7d1ae..00000000000 Binary files a/static/img/celebrate.png and /dev/null differ diff --git a/static/img/docs/add-light.svg b/static/img/docs/add-light.svg deleted file mode 100644 index d4037c1d305..00000000000 --- a/static/img/docs/add-light.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/static/img/docs/add-no-active.svg b/static/img/docs/add-no-active.svg deleted file mode 100644 index 0ce6651bcbd..00000000000 --- a/static/img/docs/add-no-active.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/img/docs/add.svg b/static/img/docs/add.svg deleted file mode 100644 index 1f4d9503abb..00000000000 --- a/static/img/docs/add.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/img/docs/hover-add-active.svg b/static/img/docs/hover-add-active.svg deleted file mode 100644 index 3a317c29d26..00000000000 --- a/static/img/docs/hover-add-active.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/static/img/docs/hover-sub-active.svg b/static/img/docs/hover-sub-active.svg deleted file mode 100644 index 655e19d3510..00000000000 --- a/static/img/docs/hover-sub-active.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/img/docs/sub-light.svg b/static/img/docs/sub-light.svg deleted file mode 100644 index b937ec7ff2a..00000000000 --- a/static/img/docs/sub-light.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/img/docs/sub-no-active.svg b/static/img/docs/sub-no-active.svg deleted file mode 100644 index f4f2783f9ed..00000000000 --- a/static/img/docs/sub-no-active.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/img/docs/sub.svg b/static/img/docs/sub.svg deleted file mode 100644 index d04409c419d..00000000000 --- a/static/img/docs/sub.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/img/en_zh.png b/static/img/en_zh.png deleted file mode 100644 index 31f5229bb38..00000000000 Binary files a/static/img/en_zh.png and /dev/null differ diff --git a/static/img/home/cbdb-circle.png b/static/img/home/cbdb-circle.png deleted file mode 100644 index 16eaa68697f..00000000000 Binary files a/static/img/home/cbdb-circle.png and /dev/null differ diff --git a/static/img/home/feature/cuwmt-light.png b/static/img/home/feature/cuwmt-light.png deleted file mode 100644 index 40d057801ab..00000000000 Binary files a/static/img/home/feature/cuwmt-light.png and /dev/null differ diff --git a/static/img/home/feature/cuwmt-light.svg b/static/img/home/feature/cuwmt-light.svg deleted file mode 100644 index ec98a589f19..00000000000 --- a/static/img/home/feature/cuwmt-light.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/static/img/home/feature/cuwmt.svg b/static/img/home/feature/cuwmt.svg deleted file mode 100644 index be7db20393a..00000000000 --- a/static/img/home/feature/cuwmt.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/static/img/home/feature/hesc-light.png b/static/img/home/feature/hesc-light.png deleted file mode 100644 index 362615976b0..00000000000 Binary files a/static/img/home/feature/hesc-light.png and /dev/null differ diff --git a/static/img/home/feature/hesc-light.svg b/static/img/home/feature/hesc-light.svg deleted file mode 100644 index d78e056a975..00000000000 --- a/static/img/home/feature/hesc-light.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/static/img/home/feature/hesc.svg b/static/img/home/feature/hesc.svg deleted file mode 100644 index c9c90bcf40c..00000000000 --- a/static/img/home/feature/hesc.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/static/img/home/feature/mef-light-hover.svg b/static/img/home/feature/mef-light-hover.svg deleted file mode 100644 index 3e5db633aa4..00000000000 --- a/static/img/home/feature/mef-light-hover.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/static/img/home/feature/mef-light.png b/static/img/home/feature/mef-light.png deleted file mode 100644 index 049577563eb..00000000000 Binary files a/static/img/home/feature/mef-light.png and /dev/null differ diff --git a/static/img/home/feature/muc-light-hover.svg b/static/img/home/feature/muc-light-hover.svg deleted file mode 100644 index 1a369cdfaec..00000000000 --- a/static/img/home/feature/muc-light-hover.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/static/img/home/feature/muc-light.png b/static/img/home/feature/muc-light.png deleted file mode 100644 index f02a3b28e05..00000000000 Binary files a/static/img/home/feature/muc-light.png and /dev/null differ diff --git a/static/img/home/feature/p14i-light.png b/static/img/home/feature/p14i-light.png deleted file mode 100644 index 1cb6ccfe2a5..00000000000 Binary files a/static/img/home/feature/p14i-light.png and /dev/null differ diff --git a/static/img/home/feature/p14i-light.svg b/static/img/home/feature/p14i-light.svg deleted file mode 100644 index bb9d813264f..00000000000 --- a/static/img/home/feature/p14i-light.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/static/img/home/feature/p14i.svg b/static/img/home/feature/p14i.svg deleted file mode 100644 index 6e07ae7ee9d..00000000000 --- a/static/img/home/feature/p14i.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/static/img/home/feature/sac-light.png b/static/img/home/feature/sac-light.png deleted file mode 100644 index 6046d7b2c8f..00000000000 Binary files a/static/img/home/feature/sac-light.png and /dev/null differ diff --git a/static/img/home/feature/sac-light.svg b/static/img/home/feature/sac-light.svg deleted file mode 100644 index afd66804037..00000000000 --- a/static/img/home/feature/sac-light.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/static/img/home/feature/sac.svg b/static/img/home/feature/sac.svg deleted file mode 100644 index 488b4101d2b..00000000000 --- a/static/img/home/feature/sac.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/static/img/home/grid-left-bottom.svg b/static/img/home/grid-left-bottom.svg deleted file mode 100644 index 010b754c6b3..00000000000 --- a/static/img/home/grid-left-bottom.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/static/img/home/grid-right-bottom.png b/static/img/home/grid-right-bottom.png deleted file mode 100644 index 55d821d6728..00000000000 Binary files a/static/img/home/grid-right-bottom.png and /dev/null differ diff --git a/static/img/home/hcard/bline.png b/static/img/home/hcard/bline.png deleted file mode 100644 index 73b0be3d09e..00000000000 Binary files a/static/img/home/hcard/bline.png and /dev/null differ diff --git a/static/img/home/light-mode.png b/static/img/home/light-mode.png deleted file mode 100644 index 49546cb7299..00000000000 Binary files a/static/img/home/light-mode.png and /dev/null differ diff --git a/static/img/home/links/discord.svg b/static/img/home/links/discord.svg index 193ba7abdf8..0570000a7a7 100644 --- a/static/img/home/links/discord.svg +++ b/static/img/home/links/discord.svg @@ -1,10 +1,4 @@ - - - - - - - - - + + + diff --git a/static/img/home/links/linked.svg b/static/img/home/links/linked.svg index ee65fb11ab1..d56a9eb9997 100644 --- a/static/img/home/links/linked.svg +++ b/static/img/home/links/linked.svg @@ -1,33 +1,4 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + diff --git a/static/img/home/links/slack.svg b/static/img/home/links/slack.svg index 87232565797..8da93691eee 100644 --- a/static/img/home/links/slack.svg +++ b/static/img/home/links/slack.svg @@ -1,18 +1,7 @@ - - - - - - - - - - - - - - - - - + + + + + + diff --git a/static/img/home/links/twitter.svg b/static/img/home/links/twitter.svg index 6bdc1e1ee60..5c76618fe4f 100644 --- a/static/img/home/links/twitter.svg +++ b/static/img/home/links/twitter.svg @@ -1,10 +1,4 @@ - - - - - - - - - + + + diff --git a/static/img/home/links/wechat.svg b/static/img/home/links/wechat.svg index a2a0a6f32bb..77726b378ed 100644 --- a/static/img/home/links/wechat.svg +++ b/static/img/home/links/wechat.svg @@ -1,20 +1,5 @@ - - - - - - - - - - - - - - - - - - - + + + + diff --git a/static/img/home/links/youtube.svg b/static/img/home/links/youtube.svg index 657904de604..43b1a969c53 100644 --- a/static/img/home/links/youtube.svg +++ b/static/img/home/links/youtube.svg @@ -1,15 +1,4 @@ - - - - - - - - - - - - - - + + + diff --git a/static/img/home/os.png b/static/img/home/os.png deleted file mode 100644 index f7255a68612..00000000000 Binary files a/static/img/home/os.png and /dev/null differ diff --git a/static/img/home/our-roadmap/dot-arrow.svg b/static/img/home/our-roadmap/dot-arrow.svg deleted file mode 100644 index 8aae90c8550..00000000000 --- a/static/img/home/our-roadmap/dot-arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/img/home/pc.png b/static/img/home/pc.png deleted file mode 100644 index 7133679de6a..00000000000 Binary files a/static/img/home/pc.png and /dev/null differ diff --git a/static/img/home/pr.png b/static/img/home/pr.png deleted file mode 100644 index 8943b455994..00000000000 Binary files a/static/img/home/pr.png and /dev/null differ diff --git a/static/img/home/try-it-out/circle.svg b/static/img/home/try-it-out/circle.svg deleted file mode 100644 index c247bf5fd1b..00000000000 --- a/static/img/home/try-it-out/circle.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/img/home/try-it-out/docker.svg b/static/img/home/try-it-out/docker.svg deleted file mode 100644 index 9887f0e6cb6..00000000000 --- a/static/img/home/try-it-out/docker.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/img/home/try-it-out/line-l.svg b/static/img/home/try-it-out/line-l.svg deleted file mode 100644 index df989d23850..00000000000 --- a/static/img/home/try-it-out/line-l.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/img/home/try-it-out/line-r.svg b/static/img/home/try-it-out/line-r.svg deleted file mode 100644 index e4fab45d4e9..00000000000 --- a/static/img/home/try-it-out/line-r.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/img/home/try-it-out/system.svg b/static/img/home/try-it-out/system.svg deleted file mode 100644 index 4d9a5db1575..00000000000 --- a/static/img/home/try-it-out/system.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/img/home/wcd.png b/static/img/home/wcd.png deleted file mode 100644 index 83c60c9ccad..00000000000 Binary files a/static/img/home/wcd.png and /dev/null differ diff --git a/static/img/home/why-cbdb.png b/static/img/home/why-cbdb.png deleted file mode 100644 index 1233e5b90f1..00000000000 Binary files a/static/img/home/why-cbdb.png and /dev/null differ diff --git a/static/img/home_back-light.png b/static/img/home_back-light.png deleted file mode 100644 index 5dd91f1c4e8..00000000000 Binary files a/static/img/home_back-light.png and /dev/null differ diff --git a/static/img/line-light.svg b/static/img/line-light.svg deleted file mode 100644 index b3b48ae3e41..00000000000 --- a/static/img/line-light.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/static/img/logo.svg b/static/img/logo.svg deleted file mode 100644 index ad44e80d115..00000000000 --- a/static/img/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/static/img/mdx-page/header-bg.png b/static/img/mdx-page/header-bg.png deleted file mode 100644 index c188f021e46..00000000000 Binary files a/static/img/mdx-page/header-bg.png and /dev/null differ diff --git a/static/img/proposal-life.png b/static/img/proposal-life.png deleted file mode 100644 index 2345338b24c..00000000000 Binary files a/static/img/proposal-life.png and /dev/null differ diff --git a/static/img/rectangle.png b/static/img/rectangle.png deleted file mode 100644 index c8ffb8e0f70..00000000000 Binary files a/static/img/rectangle.png and /dev/null differ diff --git a/static/img/vertical-line.png b/static/img/vertical-line.png deleted file mode 100644 index 375f0c41f54..00000000000 Binary files a/static/img/vertical-line.png and /dev/null differ