Skip to content

[version-4-2] docs: restyle the site according to new brand DOC-1587 (#5772) #5814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vault-token-factory-spectrocloud merged 1 commit into from
Feb 20, 2025
Merged

[version-4-2] docs: restyle the site according to new brand DOC-1587 (#5772) #5814

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,14 +294,14 @@ const config = {
maxHeadingLevel: 3,
},
// Replace with your project's social card
image: "img/spectro-cloud-social-card.png",
image: "img/spectrocloud-social-card.png",
navbar: {
title: "",
logo: {
href: "/",
target: "self",
width: 144,
height: 36,
width: 105,
height: 48,
alt: "Spectro cloud logo",
src: "img/spectrocloud-logo-light.svg",
srcDark: "img/spectrocloud-logo-dark.svg",
Expand Down
2 changes: 1 addition & 1 deletion sidebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

const privacyIconSVG = `
<svg style="margin-right: 20px;" role="img" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">
<path fill="#aeb1be" d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/>
<path fill="#1f7a78" d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/>
</svg>
`;

Expand Down
2 changes: 1 addition & 1 deletion src/components/CustomTable/CustomTable.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
border-radius: 50%;
border: 8px solid;
border-color: #e8ebee;
border-right-color: #528cdd;
border-right-color: var(--ifm-color-primary);
animation: spin 1s infinite linear;
}

Expand Down
16 changes: 10 additions & 6 deletions src/components/CveReportsTable/CveReportsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,14 @@ export default function CveReportsTable() {
const [activeTabKey, setActiveTabKey] = useState("palette");
const { colorMode } = useColorMode();
const { defaultAlgorithm, darkAlgorithm } = theme;
const isDark = colorMode === "dark";
const customTheme = {
algorithm: isDark ? darkAlgorithm : defaultAlgorithm, // Start with the default dark theme
token: {
colorBgContainer: isDark ? "#012121" : "#F3F0EE",
colorPrimary: isDark ? "#44B2AF" : "#1F7A78",
},
};

useEffect(() => {
if (isBrowser) {
Expand Down Expand Up @@ -172,11 +180,7 @@ export default function CveReportsTable() {
key: "cve",
sorter: (a, b) => a.metadata.cve.localeCompare(b.metadata.cve),
render: (cve: string, record) => {
return (
<Link to={`/security-bulletins/reports/${record.metadata.uid.toLowerCase()}`} style={{ color: "#1890ff" }}>
{cve}
</Link>
);
return <Link to={`/security-bulletins/reports/${record.metadata.uid.toLowerCase()}`}>{cve}</Link>;
},
},
{
Expand Down Expand Up @@ -281,7 +285,7 @@ export default function CveReportsTable() {

return (
<div className={styles.tabPane}>
<ConfigProvider theme={{ algorithm: colorMode === "dark" ? darkAlgorithm : defaultAlgorithm }}>
<ConfigProvider theme={customTheme}>
<div className={styles.unsupportedMessage}>
<Admonition type="warning" title="Unsupported Display Size">
The current screen size is not supported. Use a larger display to access the CVE table.
Expand Down
4 changes: 2 additions & 2 deletions src/components/PacksReadme/PacksReadme.antd.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ p {
font-size: 16px;
}
[data-theme="dark"] .ant-select-tree-list-holder-inner {
background-color: #1f1f1f;
color: whitesmoke;
background-color: #012121;
color: var(--ifm-font-color-base);
}
14 changes: 7 additions & 7 deletions src/components/PacksReadme/PacksReadme.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,29 +133,29 @@
}
}
[data-theme="dark"] .description {
background-color: #1c202b;
background-color: #012121;
}
[data-theme="light"] .description {
background-color: #edeef4;
background-color: #bfe3e2;
}
[data-theme="dark"] .packDescSecondCol {
background-color: black;
border: 1px solid #1f263c;
background-color: #161514;
border: 1px solid var(--ifm-primary-color);
}
[data-theme="light"] .packDescSecondCol {
background-color: white;
background-color: #f3f0ee;
border: 1px solid #dee1ea;
}
[data-theme="light"] .emptyContentDescription {
color: #545f7e;
}
[data-theme="dark"] .emptyContentDescription {
color: #b5bdd4;
background-color: #111726;
background-color: var(--ifm-background-color);
}
[data-theme="dark"] .emptyContentTitle {
color: #b5bdd4;
background-color: #111726;
background-color: var(--ifm-background-color);
}
[data-theme="light"] .emptyContentTitle {
color: #545f7e;
Expand Down
10 changes: 5 additions & 5 deletions src/components/PointOfInterest/PointOfInterest.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
width: 24px;
height: 24px;
border-radius: 50%;
background: #2682fa;
background: var(--ifm-color-primary);
box-shadow:
0 0 10px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
Expand All @@ -35,7 +35,7 @@
animation: pulse 1s infinite;
}
&.isVisited {
background: #475f74;
background: var(--ifm-color-primary-darker);
&::after {
animation: none;
}
Expand All @@ -49,15 +49,15 @@
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: inset 0 0 1px 1px rgba(38, 130, 250, 0.8);
box-shadow: inset 0 0 1px 1px var(--ifm-color-primary-dark);
}

50% {
box-shadow: inset 0 0 1px 1px rgba(38, 130, 250, 0.8);
box-shadow: inset 0 0 1px 1px var(--ifm-color-primary-dark);
}

100% {
transform: scale(1.6);
box-shadow: inset 0 0 1px 1px rgba(38, 130, 250, 0);
box-shadow: inset 0 0 1px 1px var(--ifm-color-primary-dark);
}
}
2 changes: 1 addition & 1 deletion src/components/PointOfInterest/PointOfInterest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function Point({ description, tooltipPlacement = "right", x, y, label, wrapRef }
getPopupContainer={(triggerNode) => wrapRef.current || triggerNode}
trigger={["click"]}
title={description}
color="#091e3b"
color="#012121"
placement={tooltipPlacement as TooltipPlacement}
>
<div
Expand Down
4 changes: 4 additions & 0 deletions src/components/SimpleCardGrid/SimpleCardGrid.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
grid-gap: 32px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 2fr;

a {
text-decoration: none;
}
}

.simpleCard {
Expand Down
11 changes: 2 additions & 9 deletions src/components/Technologies/CategorySelector/CustomLabel.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,6 @@
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
}
[data-theme="dark"] .customLabel {
color: white;
background-color: #1c202b;
}

[data-theme="light"] .customLabel {
color: black;
background-color: #dee1ea;
color: var(--ifm-font-color-base);
background-color: var(--ifm-dropdown-background-color);
}
34 changes: 17 additions & 17 deletions src/components/Technologies/CategorySelector/filterSelect.antd.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,50 +3,50 @@
background: #141414;
}
[data-theme="dark"] .ant-select-selection-placeholder {
color: #6a6d76;
color: #f3f0ee;
}
[data-theme="dark"] .ant-select-arrow {
color: #6a6d76;
color: #f3f0ee;
}
[data-theme="dark"] .ant-select-item-option {
color: whitesmoke;
color: var(--ifm-font-color-base);
}
[data-theme="dark"] .rc-virtual-list {
background-color: #1f1f1f;
background-color: var(--ifm-dropdown-background-color);
}
[data-theme="dark"] .ant-select-dropdown {
background-color: #1f1f1f;
background-color: var(--ifm-dropdown-background-color);
}
[data-theme="dark"] .ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
background-color: #111a2c;
color: whitesmoke;
background-color: var(--ifm-dropdown-background-color);
color: var(--ifm-font-color-base);
}
[data-theme="dark"]
.ant-select-dropdown
.ant-select-item-option-selected:not(.ant-select-item-option-disabled)
.ant-select-item-option-state {
color: #1668dc;
color: var(--ifm-color-primary);
}
[data-theme="dark"] .ant-select:not(.ant-select-customize-input) .ant-select-selector {
background-color: #1f1f1f;
background-color: var(--ifm-dropdown-background-color);
}
[data-theme="dark"] .ant-select-multiple {
.ant-select-selection-item {
color: #d6d0d0;
background-color: #313131;
color: var(--ifm-font-color-base);
background-color: #1e3332;
}
.ant-select-selection-overflow .ant-select-selection-item-remove {
color: #d6d0d0;
color: var(--ifm-font-color-base);
}
}
[dark-theme="dark"] .ant-select-multiple .ant-select-selection-overflow .ant-select-selection-item-remove {
color: #d6d0d0;
color: var(--ifm-font-color-base);
}
[data-theme="dark"] .ant-select-clear {
color: #b1adad;
background-color: #1f1f1f;
color: var(--ifm-font-color-base);
background-color: var(--ifm-dropdown-background-color);
}
[data-theme="dark"] .ant-select-single .ant-select-selector {
color: #d6d0d0;
background-color: #1f1f1f;
color: var(--ifm-font-color-base);
background-color: var(--ifm-dropdown-background-color);
}
4 changes: 4 additions & 0 deletions src/components/Technologies/Technologies.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@
}
}

.cardLink {
text-decoration: none;
}

.title {
font-size: 13px;
line-height: 14px;
Expand Down
5 changes: 4 additions & 1 deletion src/components/Technologies/TechnologyCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,10 @@ export default function TechnologyCard({ name, title, logoUrl, type, slug, versi
versions?.find((tagVersion) => tagVersion.children.find((child) => child.title === version))?.title || "";
return (
<div className={styles.card}>
<Link to={slug || `/integrations/packs?pack=${name}&version=${version}&parent=${parentVersion}&tab=main`}>
<Link
className={styles.cardLink}
to={slug || `/integrations/packs?pack=${name}&version=${version}&parent=${parentVersion}&tab=main`}
>
<div className={styles.cardContent}>
<PackCardIcon appType={slug ? "app" : "integration"} logoUrl={logoUrl} type={type} />
<div className={styles.title}>{title}</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Technologies/technologies.antd.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@
color: whitesmoke;
}
[data-theme="dark"] .ant-collapse-header {
background-color: #161824;
background-color: var(--ifm-dropdown-background-color);
}
[data-theme="dark"] .ant-collapse .ant-collapse-content {
background-color: #141414;
background-color: #0b3433;
border-top: 1px solid #424242;
}
[data-theme="dark"] .ant-collapse-item {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ interface TooltipProps {

export default function Tooltip(props: TooltipProps) {
return (
<AntdTooltip color="#091e3b" title={props.children}>
<AntdTooltip color="#012121" title={props.children}>
{props.trigger}
</AntdTooltip>
);
Expand Down
33 changes: 24 additions & 9 deletions src/css/custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,23 @@

html {
// mendable widget inline style affects fonts
font-family: "Poppins", sans-serif !important;
font-family: "Plus Jakarta Sans", sans-serif !important;
}

:root {
--ifm-code-font-size: 87.5%;
--ifm-breadcrumb-size-multiplier: 0.875;
--docusaurus-highlighted-code-line-bg: #666666;
--ifm-font-family-base: "Poppins", sans-serif;
--ifm-font-family-base: "Plus Jakarta Sans", sans-serif;
--ifm-menu-link-padding-vertical: 0.675rem;
--ifm-spacing-horizontal: 2rem;
--ifm-menu-color-background-hover: var(--ifm-menu-color-background-active);
--ifm-pre-line-height: 2.5;
--doc-sidebar-width: 360px !important;
--ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 24 24"><path fill="rgb(150 152 169)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
--ifm-tabs-padding-vertical: 0.5rem;
--ifm-navbar-link-color: #252b53;
--ifm-navbar-height: 4rem;
--ifm-navbar-item-padding-horizontal: 0.75rem;
--ifm-heading-font-weight: 500;
--ifm-spacing-horizontal: 3rem;
--ifm-alert-border-width: 1px;
Expand All @@ -39,8 +40,20 @@ html {
--openapi-demo-font-size-code: 10px;
--openapi-demo-font-size-input: 10px;
--custom-sidebar-item-color: #aeb1be;
--custom-purple-border-color: #7d77ca;
--custom-byzantine-border-color: #b54aa1;
--ifm-link-decoration: underline;
}

// Remove link underlines from navbar, tags, and table of contents.
nav a,
.table-of-contents a,
[class^="tag_"] {
text-decoration: none;
}

// Adjust logo to be 40px high
.navbar__logo,
.sidebarLogo_isFc img {
height: 2.5rem !important;
}

.markdown h1:first-child {
Expand Down Expand Up @@ -104,6 +117,10 @@ img {
display: none;
}

[class^="admonitionContent_"] a {
text-decoration: underline;
}

/* Override --ifm text-decoration */
a:any-link:hover {
text-decoration: none;
Expand Down Expand Up @@ -142,7 +159,7 @@ div[class^="announcementBar_"] {
display: none;
}
.ant-tooltip {
font-family: "Poppins";
font-family: "Plus Jakarta Sans";
}
.menu__caret:before {
background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
Expand All @@ -168,7 +185,7 @@ div[class^="announcementBar_"] {
}

.menu__link--active + button::before {
--ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 24 24"><path fill="rgba(74, 143, 241, 1)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
--ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 24 24"><path fill="rgba(31, 122, 120, 1)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
}

pre code {
Expand Down Expand Up @@ -214,12 +231,10 @@ p img.markdown-image {
}

.admonition-tech-preview {
border: 1px solid var(--custom-purple-border-color);
background-color: var(--custom-purple-alert-bg-color);
}

.admonition-further-guidance {
border: 1px solid var(--custom-byzantine-border-color);
background-color: var(--custom-byzantine-alert-bg-color);
}

Expand Down
Loading
Loading