-
-
-
+
+
+
`,
},
],
@@ -146,16 +146,16 @@ const config: Config = {
title: 'Links',
items: [
{
- html: '',
+ html: '
Copyright © ${new Date().getFullYear()} CodeGate, All Rights Reserved
-
Powered by
+
`,
},
prism: {
theme: prismThemes.github,
- darkTheme: prismThemes.dracula,
+ darkTheme: prismThemes.vsDark,
additionalLanguages: ['bash', 'json', 'powershell', 'docker', 'lua'],
},
mermaid: {
@@ -189,6 +189,23 @@ const config: Config = {
options: {
themeVariables: {
fontFamily: 'Figtree, system-ui, sans-serif',
+ primaryColor: '#E31C79',
+ primaryBorderColor: '#E31C79',
+ lineColor: '#E31C79',
+ secondaryColor: '#F3E6EE',
+ tertiaryColor: '#FAF0F6',
+ mainBkg: '#E31C79',
+ noteBkgColor: '#444444',
+ noteTextColor: '#FFFFFF',
+ // BEGIN sequenceDiagram styles
+ actorBorder: '#E31C79',
+ actorLineColor: '#E31C79',
+ actorTextColor: '#FFFFFF',
+ activationBkgColor: '#E31C79',
+ activationBorderColor: '#E31C79',
+ labelBoxBkgColor: '#444444',
+ labelTextColor: '#FFFFFF',
+ // END sequenceDiagram styles
},
},
},
diff --git a/src/css/codegate-footer.css b/src/css/codegate-footer.css
new file mode 100644
index 0000000..8071239
--- /dev/null
+++ b/src/css/codegate-footer.css
@@ -0,0 +1,58 @@
+/* Footer classes to match the style of codegate.ai */
+
+.footer {
+ padding: 20px 16px 40px;
+}
+
+.footer .container {
+ margin: auto;
+ padding: 0;
+ max-width: 1200px;
+}
+
+.footer__title {
+ text-transform: uppercase;
+}
+
+.footer__copyright {
+ color: #64748b;
+ text-align: left;
+ font-size: 1rem;
+ line-height: 1.7;
+}
+
+.footer__item {
+ font-size: 16px;
+ font-weight: 500;
+}
+
+.footer__item:not(:last-child) {
+ padding-bottom: 16px;
+}
+
+.footer__icon__custom {
+ padding: 0.25rem 12px;
+}
+
+.footer__link-item {
+ line-height: 24px;
+ --ifm-link-hover-decoration: none;
+}
+
+.footer__col:first-child {
+ max-width: 400px;
+ margin-right: auto;
+}
+
+.footer__col:last-child,
+.footer__col:nth-last-child(2) {
+ max-width: 160px;
+ margin-right: 0px;
+}
+
+.footer__powered_by {
+ margin-left: auto;
+ text-transform: uppercase;
+ font-size: 14px;
+ font-weight: 600;
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 3322c31..cddb913 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -6,6 +6,9 @@
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
+@import './icons.css';
+@import './codegate-footer.css';
+
/* You can override the default Infima variables here. */
:root {
--ifm-font-family-base: 'Figtree', 'system-ui', 'sans-serif';
@@ -18,28 +21,34 @@
--ifm-footer-link-color: #334155;
--ifm-footer-link-hover-color: #5058ff;
--ifm-navbar-link-color: #334155;
-
- --ifm-color-primary: #5058ff;
- --ifm-color-primary-dark: #2f38ff;
- --ifm-color-primary-darker: #1e28ff;
- --ifm-color-primary-darkest: #000beb;
- --ifm-color-primary-light: #7278ff;
- --ifm-color-primary-lighter: #8288ff;
- --ifm-color-primary-lightest: #b4b8ff;
+ --ifm-navbar-background-color: #f8fafc;
+ --ifm-menu-color: #5d6982;
+ --ifm-toc-link-color: #5d6982;
+
+ --ifm-color-primary: #e31c79;
+ --ifm-color-primary-dark: #cc196d;
+ --ifm-color-primary-darker: #c11867;
+ --ifm-color-primary-darkest: #9f1455;
+ --ifm-color-primary-light: #e63386;
+ --ifm-color-primary-lighter: #e73e8d;
+ --ifm-color-primary-lightest: #eb60a1;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
- --ifm-navbar-background-color: #111827;
- --ifm-color-primary: #38bdf8;
- --ifm-color-primary-dark: #1bb3f7;
- --ifm-color-primary-darker: #0caef6;
- --ifm-color-primary-darkest: #0791ce;
- --ifm-color-primary-light: #55c7f9;
- --ifm-color-primary-lighter: #64ccfa;
- --ifm-color-primary-lightest: #90dafb;
+ --ifm-navbar-background-color: #1a1c1f;
+ --ifm-menu-color: #9399ac;
+ --ifm-toc-link-color: #9399ac;
+
+ --ifm-color-primary: #e31c79;
+ --ifm-color-primary-dark: #cc196d;
+ --ifm-color-primary-darker: #c11867;
+ --ifm-color-primary-darkest: #9f1455;
+ --ifm-color-primary-light: #e63386;
+ --ifm-color-primary-lighter: #e73e8d;
+ --ifm-color-primary-lightest: #eb60a1;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
@@ -50,140 +59,50 @@
}
html[data-theme='dark'] {
- --ifm-background-color: #111827;
- --ifm-color-content: #d1d5db;
-}
-
-div[role='tabpanel'] {
- border-style: solid;
- border-color: var(--ifm-table-border-color);
- border-width: var(--ifm-table-border-width);
- border-radius: var(--ifm-global-radius);
- padding: var(--ifm-global-spacing);
- box-shadow: var(--ifm-global-shadow-lw);
-}
-
-.footer {
- padding: 20px 16px 40px;
-}
-
-.footer .container {
- margin: auto;
- padding: 0;
- max-width: 1200px;
-}
-
-.footer__title {
- text-transform: uppercase;
-}
-
-.footer__copyright {
- color: #64748b;
- text-align: left;
- font-size: 1rem;
- line-height: 1.7;
+ --ifm-background-color: #101114;
+ /* --ifm-color-content: #9399ac; */
+ --ifm-color-content: #c7ccdc;
}
-.footer__item {
- font-size: 16px;
- font-weight: 500;
+.theme-doc-sidebar-container {
+ background-color: #f8fafc;
}
-.footer__item:not(:last-child) {
- padding-bottom: 16px;
+[data-theme='dark'] .theme-doc-sidebar-container {
+ background-color: #1a1c1f;
}
-.footer__icon__custom {
- padding: 0.25rem 12px;
+/* Mermaid flowchart labels */
+[data-theme='dark'] .edgeLabel p {
+ background-color: var(--ifm-background-color) !important;
}
-.footer__link-item {
- line-height: 24px;
- --ifm-link-hover-decoration: none;
+.tabs-container {
+ background-color: var(--ifm-card-background-color);
+ border: 1px solid var(--ifm-table-border-color);
+ border-radius: var(--ifm-card-border-radius);
+ margin-bottom: 1rem;
}
-.footer__col:first-child {
- max-width: 400px;
- margin-right: auto;
+.tabs-container > ul {
+ background-color: #f8fafc;
}
-.footer__col:last-child,
-.footer__col:nth-last-child(2) {
- max-width: 160px;
- margin-right: 0px;
+[data-theme='dark'] .tabs-container > ul {
+ background-color: #1a1c1f;
+ border-color: #1a1a1c;
}
-/**
- * Navbar & footer icon classes
- */
-.header-github-link::before {
- content: '';
- width: 16px;
- height: 16px;
- display: inline-block;
- vertical-align: middle;
- background-color: rgb(51, 65, 85);
- mask-image: url('/img/github-brands-solid.svg');
- mask-repeat: no-repeat;
- transition: background-color var(--ifm-transition-fast)
- var(--ifm-transition-timing-default);
-}
-
-.header-github-link:hover::before {
- background-color: var(--ifm-navbar-link-hover-color);
-}
-
-.header-discord-link::before {
- content: '';
- width: 20px;
- height: 16px;
- display: inline-block;
- vertical-align: middle;
- background-color: rgb(51, 65, 85);
- mask-image: url('/img/discord-brands-solid.svg');
- mask-repeat: no-repeat;
- mask-position: 0% 50%;
- mask-repeat: no-repeat;
- transition: background-color var(--ifm-transition-fast)
- var(--ifm-transition-timing-default);
-}
-
-.header-discord-link:hover::before {
- background-color: var(--ifm-navbar-link-hover-color);
-}
-
-.header-youtube-link::before {
- content: '';
- width: 18px;
- height: 16px;
- display: inline-block;
- vertical-align: middle;
- background-color: rgb(51, 65, 85);
- mask-image: url('/img/youtube-brands-solid.svg');
- mask-position: 0% 50%;
- mask-repeat: no-repeat;
- transition: background-color var(--ifm-transition-fast)
- var(--ifm-transition-timing-default);
+.tabs-container > ul {
+ border-bottom: 1px solid #f0f0f0;
+ border-top-left-radius: var(--ifm-card-border-radius);
+ border-top-right-radius: var(--ifm-card-border-radius);
}
-.header-youtube-link:hover::before {
- background-color: var(--ifm-navbar-link-hover-color);
+.tabs__item {
+ border-radius: 0;
}
-.header-stacklok-link::before {
- content: '';
- width: 18px;
- height: 16px;
- display: inline-block;
- vertical-align: middle;
- background-color: rgb(51, 65, 85);
- mask-image: url('/img/stacklok-icon-black.svg');
- mask-position: 0% 50%;
- mask-repeat: no-repeat;
- transition: background-color var(--ifm-transition-fast)
- var(--ifm-transition-timing-default);
-}
-
-.header-stacklok-link:hover::before {
- background-color: var(--ifm-navbar-link-hover-color);
+div[role='tabpanel'] {
+ padding: var(--ifm-global-spacing);
}
diff --git a/src/css/icons.css b/src/css/icons.css
new file mode 100644
index 0000000..c3bdeab
--- /dev/null
+++ b/src/css/icons.css
@@ -0,0 +1,90 @@
+/**
+ * Navbar & footer icon classes
+ */
+.github-link::before {
+ content: '';
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ vertical-align: middle;
+ background-color: rgb(51, 65, 85);
+ mask-image: url('/img/github-brands-solid.svg');
+ mask-repeat: no-repeat;
+ transition: background-color var(--ifm-transition-fast)
+ var(--ifm-transition-timing-default);
+}
+
+[data-theme='dark'] .navbar__item.github-link::before {
+ background-color: var(--ifm-color-content);
+}
+
+.github-link:hover::before {
+ background-color: var(--ifm-navbar-link-hover-color) !important;
+}
+
+.discord-link::before {
+ content: '';
+ width: 20px;
+ height: 16px;
+ display: inline-block;
+ vertical-align: middle;
+ background-color: rgb(51, 65, 85);
+ mask-image: url('/img/discord-brands-solid.svg');
+ mask-repeat: no-repeat;
+ mask-position: 0% 50%;
+ mask-repeat: no-repeat;
+ transition: background-color var(--ifm-transition-fast)
+ var(--ifm-transition-timing-default);
+}
+
+[data-theme='dark'] .navbar__item.discord-link::before {
+ background-color: var(--ifm-color-content);
+}
+
+.discord-link:hover::before {
+ background-color: var(--ifm-navbar-link-hover-color) !important;
+}
+
+.youtube-link::before {
+ content: '';
+ width: 18px;
+ height: 16px;
+ display: inline-block;
+ vertical-align: middle;
+ background-color: rgb(51, 65, 85);
+ mask-image: url('/img/youtube-brands-solid.svg');
+ mask-position: 0% 50%;
+ mask-repeat: no-repeat;
+ transition: background-color var(--ifm-transition-fast)
+ var(--ifm-transition-timing-default);
+}
+
+[data-theme='dark'] .navbar__item.youtube-link::before {
+ background-color: var(--ifm-color-content);
+}
+
+.youtube-link:hover::before {
+ background-color: var(--ifm-navbar-link-hover-color) !important;
+}
+
+.stacklok-link::before {
+ content: '';
+ width: 18px;
+ height: 16px;
+ display: inline-block;
+ vertical-align: middle;
+ background-color: rgb(51, 65, 85);
+ mask-image: url('/img/stacklok-icon-black.svg');
+ mask-position: 0% 50%;
+ mask-repeat: no-repeat;
+ transition: background-color var(--ifm-transition-fast)
+ var(--ifm-transition-timing-default);
+}
+
+[data-theme='dark'] .navbar__item.stacklok-link::before {
+ background-color: var(--ifm-color-content);
+}
+
+.stacklok-link:hover::before {
+ background-color: var(--ifm-navbar-link-hover-color) !important;
+}