diff --git a/site/.gitignore b/site/.gitignore
index ea48dacc92..78c6374415 100644
--- a/site/.gitignore
+++ b/site/.gitignore
@@ -5,4 +5,5 @@
/.luarc.json
# Environment
-site/.env
\ No newline at end of file
+site/.env
+**/*.quarto_ipynb
diff --git a/site/_quarto.yml b/site/_quarto.yml
index 8247f87cc2..716b6eda95 100644
--- a/site/_quarto.yml
+++ b/site/_quarto.yml
@@ -38,23 +38,25 @@ website:
right:
- text: "{{< fa book-open >}} Documentation"
menu:
- - text: "{{< fa circle-info >}} About {{< var vm.product >}}"
+ - text: "About {{< var vm.product >}}"
file: about/overview.qmd
- - text: "{{< fa rocket >}} Get Started"
+ - text: "Get Started"
file: get-started/get-started.qmd
- - text: "{{< fa book >}} Guides"
+ - text: "Guides"
file: guide/guides.qmd
- - text: "{{< fa envelope-open-text >}} Support"
+ - text: "Support"
file: support/support.qmd
- - text: "{{< fa bullhorn >}} Releases"
+ - text: "Releases"
file: releases/all-releases.qmd
- text: "---"
- - text: "{{< fa cube >}} Python Library"
- - text: "{{< fa code >}} {{< var validmind.developer >}}"
+ - text: "{{< var validmind.developer >}}"
file: developer/validmind-library.qmd
+ - text: "Python API"
+ file: validmind/validmind.qmd
+ - text: "Public REST API"
+ file: reference/validmind-rest-api-vm.qmd
- text: "---"
- - text: "{{< fa graduation-cap >}} {{< var validmind.training >}}"
- - text: "{{< fa building-columns >}} Training Courses"
+ - text: "Training Courses"
file: training/training.qmd
# The log in menu is defined in _quarto-development.yml, _quarto-staging.yml, and _quarto-production.yml as not all environments have the same login options.
@@ -174,15 +176,14 @@ website:
Access
Configuration
Model inventory
-
-
-
- text: |
diff --git a/site/assets/styles/_banner.scss b/site/assets/styles/_banner.scss
new file mode 100644
index 0000000000..b7c601f1dc
--- /dev/null
+++ b/site/assets/styles/_banner.scss
@@ -0,0 +1,46 @@
+// Announcement banner styles
+
+.quarto-announcement {
+ background-color: #44969f !important;
+ color: #fff !important;
+ border-radius: 0 !important;
+ min-height: 36px;
+ padding: 0 24px;
+ font-size: 16px;
+ font-family: 'Inter', sans-serif;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: none;
+}
+
+.quarto-announcement-content {
+ color: #fff !important;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.quarto-announcement-content, .quarto-announcement-action:before {
+ color: white !important;
+ padding: 5px;
+}
+
+.quarto-announcement-action {
+ display: none; /* Hide the default close button if not needed */
+}
+
+// Announcement banner link styles
+.quarto-announcement-content a {
+ color: white !important;
+ text-decoration: underline;
+ font-weight: 600;
+}
+
+.quarto-announcement-content a:hover {
+ color: #fff !important;
+ text-decoration: underline 10px solid;
+ text-underline-offset: 10px;
+ }
+
\ No newline at end of file
diff --git a/site/assets/styles/_bug-fixes.scss b/site/assets/styles/_bug-fixes.scss
index ae9dcebe62..4b202b20b7 100644
--- a/site/assets/styles/_bug-fixes.scss
+++ b/site/assets/styles/_bug-fixes.scss
@@ -1,9 +1,8 @@
-/* Bug fixes for various CSS conflicts and issues */
+// Bug fixes for various CSS conflicts and issues
/* Fix Tachyons .fl class conflict with syntax highlighting
- * Issue: Tachyons .fl (float left) conflicts with Quarto's .fl (floating literal)
- * in syntax-highlighted code blocks, causing incorrect text positioning
- */
+ Issue: Tachyons .fl (float left) conflicts with Quarto's .fl (floating literal)
+ in syntax-highlighted code blocks, causing incorrect text positioning */
.sourceCode .fl {
float: none !important;
}
diff --git a/site/assets/styles/_buttons.scss b/site/assets/styles/_buttons.scss
index 10a1a0cef1..5efb525fc6 100644
--- a/site/assets/styles/_buttons.scss
+++ b/site/assets/styles/_buttons.scss
@@ -1,7 +1,8 @@
-/* Button Styles */
+// Button styles
+// Other button styles
.button {
- color: #DE257E;
+ color: $validmind-pink;
background-color: white;
text-decoration: none;
padding-left: 1rem;
@@ -11,7 +12,7 @@
margin-bottom: 0.5rem;
display: inline-block;
border-radius: 4px;
- border: 1px solid #DE257E;
+ border: 1px solid $validmind-pink;
font-size: 16px;
transition: color 0.15s ease-in, background-color 0.15s ease-in;
font-weight: bold;
@@ -19,45 +20,44 @@
}
.button:hover {
- color: #083E44;
+ color: $validmind-teal;
text-decoration: none;
- border: 1px solid #083E44;
- background-color: #B5B5B510;
+ border: 1px solid $validmind-teal;
+ background-color: rgba(181, 181, 181, 0.0625);
}
.button-pink {
margin-top: 40px;
color: white;
- background-color: #DE257E;
+ background-color: $validmind-pink;
border-radius: 4px;
- border: 1px solid #DE257E;
+ border: 1px solid $validmind-pink;
margin-right: 20px;
}
.button-white {
margin-top: 40px;
- color: #196972;
+ color: $validmind-dark-teal;
background-color: #FFF;
border-radius: 4px;
- border: 1px solid #196972;
+ border: 1px solid $validmind-dark-teal;
}
.button-green {
margin-top: 10px;
color: white;
- background-color: #196972;
+ background-color: $validmind-dark-teal;
border-radius: 4px;
- border: 1px solid #196972;
+ border: 1px solid $validmind-dark-teal;
font-weight: bold;
}
.button-small {
- /* font-size: 0.6em; */
font-variant: small-caps;
- color: #083E44;
- background-color: #B5B5B510;
- border: 1px solid #083E44;
- /* font-weight: bold; */
+ color: $validmind-teal;
+ background-color: rgba(181, 181, 181, 0.0625);
+ border: 1px solid $validmind-teal;
+ font-weight: bold;
border-radius: 3px;
padding: 2px 5px;
vertical-align: middle;
@@ -65,10 +65,10 @@
}
.button-small:hover {
- color: #083E44;
+ color: $validmind-teal;
text-decoration: none;
- background-color: #EAF8FA;
- border: 1px solid #083E44;
+ background-color: $validmind-bg-hover;
+ border: 1px solid $validmind-teal;
}
.cta {
@@ -93,8 +93,8 @@
}
#nav-menu-log-in {
- background-color: #083E44;
- border: 1px solid #083E44;
+ background-color: $validmind-teal;
+ border: 1px solid $validmind-teal;
color: #fff;
padding: 0.375rem 1rem !important;
border-radius: 2px;
@@ -105,25 +105,25 @@
#nav-menu-log-in:hover {
text-decoration: none;
color: white;
- background-color: #de257e;
- border: 1px solid #de257e;
+ background-color: $validmind-pink;
+ border: 1px solid $validmind-pink;
}
-/* Apply existing button classes to the login nav-links for all environments */
+// Apply existing button classes to the login nav-links for all environments
a.nav-link[href="https://app.prod.validmind.ai/"],
a.nav-link[href="https://app.staging.validmind.ai/"],
a.nav-link[href="https://app.dev.vm.validmind.ai/"] {
@extend #nav-menu-log-in;
}
-/* Disable underline on hover for login buttons */
+// Disable underline on hover for login buttons
a.nav-link[href="https://app.prod.validmind.ai/"]:hover,
a.nav-link[href="https://app.staging.validmind.ai/"]:hover,
a.nav-link[href="https://app.dev.vm.validmind.ai/"]:hover {
text-decoration: none !important;
}
-/* Responsive styles for nav-menu-log-in */
+// Responsive styles for nav-menu-log-in
@media (max-width: 768px) {
#nav-menu-log-in {
margin-top: 0.5rem;
diff --git a/site/assets/styles/_codeblocks.scss b/site/assets/styles/_codeblocks.scss
index 707651471c..875ba032c6 100644
--- a/site/assets/styles/_codeblocks.scss
+++ b/site/assets/styles/_codeblocks.scss
@@ -1,13 +1,13 @@
-/* Code block and syntax highlighting styles */
+// Code block and syntax highlighting styles
-/* General code styling */
+// General code styling
code {
- color: #083E44;
+ color: $code-color;
}
-/* Pre-formatted code blocks with language-specific styling */
+// Pre-formatted code blocks with language-specific styling
pre, pre.python, pre.bash, pre.yaml, pre.markdown {
- background-color: #083E4420;
+ background-color: $code-block-bg;
padding: 15px;
border-radius: 5px;
}
diff --git a/site/assets/styles/_dropdowns.scss b/site/assets/styles/_dropdowns.scss
new file mode 100644
index 0000000000..ef6270a80d
--- /dev/null
+++ b/site/assets/styles/_dropdowns.scss
@@ -0,0 +1,59 @@
+// Dropdown menu styles
+
+// Dropdown menu container
+.navbar-nav .dropdown-menu {
+ box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+ border-radius: 5px;
+ border: 1px solid #222425;
+}
+
+.dropdown-menu.dropdown-menu-end.show {
+ padding-top: 0.5rem; /* Adjust the value as needed */
+}
+
+// Dropdown item styles
+a.dropdown-item {
+ position: relative;
+}
+
+a.dropdown-item:hover {
+ text-decoration: none;
+ color: $validmind-dark-teal;
+ background-color: $validmind-bg-hover;
+}
+
+a.dropdown-item:before {
+ content: "";
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ background-color: #ffffff;
+ transform: scaleX(0);
+ transition: transform 0.3s ease;
+}
+
+a.dropdown-item:not(nav#TOC a.dropdown-item):hover::before {
+ transform: scaleX(1);
+}
+
+.dropdown-item:active {
+ background-color: white;
+}
+
+.navbar .dropdown-item {
+ padding: .2rem .7rem !important;
+}
+
+// Responsive styles
+@media (max-width: 768px) {
+
+ .navbar-nav .dropdown-menu {
+ width: 100%;
+ position: static;
+ box-shadow: none;
+ border: none;
+ }
+}
diff --git a/site/assets/styles/_footer.scss b/site/assets/styles/_footer.scss
new file mode 100644
index 0000000000..e6a628e9fc
--- /dev/null
+++ b/site/assets/styles/_footer.scss
@@ -0,0 +1,230 @@
+// Footer styles
+
+// Footer link styles
+.footer-company-info a {
+ display: inline-block;
+ text-decoration: none;
+}
+
+.footer a.external::after {
+ content: none !important;
+ background-image: none !important;
+ margin-left: 0 !important;
+ padding-right: 0 !important;
+}
+
+.footer-link, .footer-section a {
+ color: #fff;
+ text-decoration: none;
+ font-weight: 400;
+ font-size: 1.1em;
+}
+
+.footer-section a:hover, .footer-link:hover {
+ text-decoration: underline;
+}
+
+// Cookie preferences link
+.cookie-preferences-link {
+ font-size: 1em;
+ min-height: 0px;
+}
+
+#custom-cookie-preferences {
+ display: block;
+ margin-top: 0.5em;
+ text-align: left;
+ color: #fff;
+ font-weight: 500;
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+// Page footer
+.page-footer {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ background: #4e868b;
+ color: #fff;
+}
+
+// Footer logo section
+.footer-logo-info {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ flex: 0 1 200px;
+ min-width: 200px;
+ max-width: 400px;
+}
+
+.footer-logo {
+ width: 140px;
+ margin-bottom: 0.15em;
+}
+
+.footer-logo-column {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ margin-top: 0.25em;
+}
+
+.footer-company-info {
+ font-size: 1em;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-left: 0.25em;
+}
+
+.footer-company-info > * {
+ margin: 0;
+ padding: 0;
+ white-space: normal;
+ max-width: 100%;
+}
+
+.footer-company-info a {
+ display: inline-block;
+ text-decoration: none;
+}
+
+.footer-company-legal {
+ font-size: 1em;
+}
+
+// Remove external link icons from footer
+.footer a.external::after {
+ content: none !important;
+ background-image: none !important;
+}
+
+// Footer sections
+.footer-heading {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.footer-section {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ color: #fff;
+}
+
+.footer-section ul {
+ list-style: none;
+ margin-left: 0;
+ margin-right: 0;
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.footer-section,
+.footer-section ul,
+.footer-section li,
+.footer-section a,
+.footer-heading {
+ text-align: left;
+}
+
+.footer-link, .footer-section a {
+ color: #fff;
+ text-decoration: none;
+ font-weight: 400;
+ font-size: 1.1em;
+}
+
+.footer-section a:hover, .footer-link:hover {
+ text-decoration: underline;
+}
+
+// Footer user guides sections
+.footer-user-guides {
+ flex: 4 1 0; /* Make center section much wider */
+ min-width: 300px;
+ max-width: 600px;
+}
+
+.footer-user-guides-columns {
+ display: flex;
+ gap: 2rem;
+}
+
+.footer-user-guides-column-1 {
+ min-width: 160px;
+ flex: 1;
+}
+
+.footer-user-guides-column-2 {
+ flex: 1;
+}
+
+// Make Quarto's footer slots align at the top and reduce spacing
+.nav-footer {
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-start;
+ gap: 0;
+ width: 100%;
+ padding: 20px 0px;
+ background: #26818B;
+}
+
+// Hide right section when it only contains whitespace
+.nav-footer-right {
+ display: none !important;
+}
+
+// Override Bootstrap's centering constraints
+.nav-footer-center {
+ max-width: none !important;
+ margin: 0 !important;
+ flex: 1 !important;
+}
+
+.nav-footer-center .footer-items {
+ display: flex;
+ justify-content: left !important;
+ flex-wrap: wrap;
+ gap: 2rem;
+}
+
+.nav-footer-center .nav-item {
+ margin-right: 0; /* Remove since we're using gap now */
+ min-width: 140px;
+}
+
+.nav-footer-center .nav-item:last-child {
+ margin-right: 0;
+}
+
+// Footer padding for Beck
+footer.footer .nav-footer, #quarto-header>nav {
+ padding: 2em !important;
+}
+
+// Left-align footer items when wrapping on smaller screens
+@media (max-width: 768px) {
+ .nav-footer-center {
+ justify-content: flex-start !important;
+ }
+
+ .nav-footer-center, .nav-footer-right {
+ display: none !important;
+ }
+}
+
+// Prevent left section from expanding and competing with center
+@media (min-width: 768px) {
+ .nav-footer-left {
+ flex: 0 0 auto !important;
+ padding-right: 20px;
+ }
+
+ .nav-footer-right {
+ display: none !important;
+ }
+}
diff --git a/site/assets/styles/_links.scss b/site/assets/styles/_links.scss
index 7b6c9a232a..be785d3f22 100644
--- a/site/assets/styles/_links.scss
+++ b/site/assets/styles/_links.scss
@@ -1,41 +1,27 @@
-/* Link Styles */
+// Link styles
-/* Base link styles */
-a {
- color: #DE257E;
- text-decoration: none;
-}
-
-a:hover {
- text-decoration: underline 2px solid #083E44;
- /* text-underline-offset: 6px; */
+a, a:link, a:visited {
+ text-decoration: none !important;
}
-/* Special link hover states */
+// Special link hover states
a.footnote-ref:hover, a.anchorjs-link:hover {
- /* color: black; */
text-decoration: none;
}
-/* Navigation and sidebar link styles */
+// Navigation and sidebar link styles
a.nav-link:hover, a.sidebar-link:hover {
text-decoration: none;
- color: #DE257E;
+ color: $navbar-nav-link-hover-color;
}
-a.dropdown-item:hover {
- text-decoration: none;
- color: #196972;
- background-color: #EAF8FA;
-}
-/* NEW NAVBAR LINKS */
-a.nav-link, a.dropdown-item {
+// New navbar links
+a.nav-link {
position: relative;
}
-a.nav-link:not(nav#TOC a.nav-link, .nav-footer a:hover, #nav-menu-log-in:hover):before,
-a.dropdown-item:before {
+a.nav-link:not(nav#TOC a.nav-link, .nav-footer a:hover, #nav-menu-log-in:hover):before {
content: "";
position: absolute;
display: block;
@@ -48,104 +34,7 @@ a.dropdown-item:before {
transition: transform 0.3s ease;
}
-a.nav-link:not(nav#TOC a.nav-link):hover::before,
-a.dropdown-item:not(nav#TOC a.dropdown-item):hover::before {
+a.nav-link:not(nav#TOC a.nav-link):hover::before {
transform: scaleX(1);
}
-.dropdown-item:active {
- background-color: white;
-}
-
-.navbar .dropdown-item {
- padding: .2rem .7rem;
-}
-
-/* Sidebar link styles */
-.sidebar-item a .menu-text {
- text-transform: none;
- color: #585F60;
-}
-
-.sidebar-item a:hover .menu-text {
- text-transform: none;
- color: #DE257E !important;
-}
-
-.sidebar-item .sidebar-item-container .sidebar-link.active .menu-text {
- color: #DE257E !important;
-}
-
-/* Table of Contents link styles */
-nav#TOC ul > li > a.nav-link {
- color: #585F60 !important;
- text-decoration: none;
-}
-
-nav#TOC ul > li > a.nav-link:hover,
-nav#TOC ul > li > a.nav-link.active:hover {
- color: #196972 !important;
- background-color: #EAF8FA;
- text-decoration: none;
-}
-
-nav#TOC ul > li > a.nav-link.active, nav#TOC ul > li > a.nav-link.active:hover {
- color: #DE257E !important;
- text-decoration: none;
-}
-
-nav#TOC .toc-actions ul li a.toc-action {
- color: #196972;
- text-decoration: none;
- font-size: 0.9em;
- margin-right: 1em;
-}
-
-/* Announcement banner link styles */
-.quarto-announcement-content a {
- color: white !important;
- text-decoration: underline;
- font-weight: 600;
-}
-
-.quarto-announcement-content a:hover {
- text-decoration: underline 10px solid;
- text-underline-offset: 10px;
-}
-
-.quarto-announcement-content a:hover {
- color: #fff !important;
- text-decoration: underline;
-}
-
-/* Footer link styles */
-.footer-company-info a {
- display: inline-block;
- text-decoration: none;
-}
-
-.footer a.external::after {
- content: none !important;
- background-image: none !important;
- margin-left: 0 !important;
- padding-right: 0 !important;
-}
-
-.footer-link, .footer-section a {
- color: #fff;
- text-decoration: none;
- font-weight: 400;
- font-size: 1.1em;
-}
-
-.footer-section a:hover, .footer-link:hover {
- text-decoration: underline;
-}
-
-/* Responsive styles */
-@media (max-width: 768px) {
- .dropdown-item {
- padding: 0.5rem 1rem;
- font-size: 0.9rem;
- }
-}
diff --git a/site/assets/styles/_mermaid.scss b/site/assets/styles/_mermaid.scss
new file mode 100644
index 0000000000..7032cad0b0
--- /dev/null
+++ b/site/assets/styles/_mermaid.scss
@@ -0,0 +1,38 @@
+// Mermaid Diagram Styles
+
+:root {
+ --mermaid-node-radius: 5px;
+}
+
+// Target all Mermaid diagram nodes
+.node rect {
+ rx: var(--mermaid-node-radius) !important;
+ ry: var(--mermaid-node-radius) !important;
+}
+
+// Additional selectors to ensure all node types are covered
+.node .basic.label-container {
+ rx: var(--mermaid-node-radius) !important;
+ ry: var(--mermaid-node-radius) !important;
+}
+
+// Target cluster rectangles
+.cluster rect {
+ rx: var(--mermaid-node-radius) !important;
+ ry: var(--mermaid-node-radius) !important;
+}
+
+// Target all rectangles in Mermaid diagrams
+#mermaid-1 rect,
+#mermaid-2 rect,
+#mermaid-3 rect,
+#mermaid-4 rect,
+#mermaid-5 rect,
+#mermaid-6 rect,
+#mermaid-7 rect,
+#mermaid-8 rect,
+#mermaid-9 rect,
+#mermaid-10 rect {
+ rx: var(--mermaid-node-radius) !important;
+ ry: var(--mermaid-node-radius) !important;
+}
diff --git a/site/assets/styles/_navbar.scss b/site/assets/styles/_navbar.scss
new file mode 100644
index 0000000000..6e6602886e
--- /dev/null
+++ b/site/assets/styles/_navbar.scss
@@ -0,0 +1,31 @@
+// Navbar Variables
+
+// Navbar styles
+.navbar-brand img {
+ height: 100%;
+ margin-top: -5px;
+}
+
+.navbar {
+ border-bottom: 1px solid #dee2e6;
+ padding: 15px;
+}
+
+.nav-item {
+ padding-right: 20px;
+}
+
+.navbar-logo {
+ padding-right: 20px;
+}
+
+// Responsive navbar styles
+@media (max-width: 768px) {
+ .navbar {
+ padding: 10px;
+ }
+
+ .navbar-brand img {
+ max-height: 20px;
+ }
+}
diff --git a/site/assets/styles/_sidebar.scss b/site/assets/styles/_sidebar.scss
new file mode 100644
index 0000000000..2757750607
--- /dev/null
+++ b/site/assets/styles/_sidebar.scss
@@ -0,0 +1,60 @@
+// Sidebar Variables
+
+// Sidebar link styles
+.sidebar-item a .menu-text {
+ text-transform: none;
+ color: $sidebar-fg;
+}
+
+.sidebar-item a:hover .menu-text {
+ text-transform: none;
+ color: $sidebar-hl !important;
+}
+
+.sidebar-item .sidebar-item-container .sidebar-link.active .menu-text {
+ color: $sidebar-hl !important;
+}
+
+// Sidebar styles
+.sidebar-navigation .sidebar-divider {
+ margin-top: 1rem;
+}
+
+.sidebar-item {
+ color: #747678;
+ padding-top: .3rem;
+ line-height: 1.3;
+}
+
+.sidebar-item-container .active {
+ position: relative;
+}
+
+.sidebar-item-container .active::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: -0.5rem;
+ bottom: -0.5rem;
+ width: 3px;
+ background-color: #de257e;
+ margin-left: -0.7rem;
+}
+
+.sidebar-item .menu-text {
+ text-transform: uppercase;
+ color: #196972;
+}
+
+.sidebar-item-container .sidebar-item-toggle {
+ cursor: pointer;
+ color: #083E44;
+}
+
+hr.sidebar-divider.hi {
+ border-top: 1px solid #196972 !important;
+}
+
+#quarto-sidebar.sidebar {
+ background-color: #FAFBFB;
+}
diff --git a/site/assets/styles/_termsfeed.scss b/site/assets/styles/_termsfeed.scss
index fdc85bbccf..b87a92d00f 100644
--- a/site/assets/styles/_termsfeed.scss
+++ b/site/assets/styles/_termsfeed.scss
@@ -1,11 +1,13 @@
+/* Termsfeed (cookie consent) styles */
+
.termsfeed-com---palette-light .cc-nb-okagree,
.termsfeed-com---palette-light .cc-nb-reject,
.termsfeed-com---palette-light .cc-cp-foot-save {
color: #fff;
- background-color: #de257e;
+ background-color: $validmind-pink;
}
.termsfeed-com---pc-dialog {
color: #111;
- border-color: #de257e;
+ border-color: $validmind-pink;
}
diff --git a/site/assets/styles/_toc.scss b/site/assets/styles/_toc.scss
new file mode 100644
index 0000000000..469724f3e2
--- /dev/null
+++ b/site/assets/styles/_toc.scss
@@ -0,0 +1,42 @@
+// Table of Contents Variables
+
+// Table of Contents link styles
+nav#TOC ul > li > a.nav-link {
+ color: $toc-color !important;
+ text-decoration: none;
+}
+
+nav#TOC ul > li > a.nav-link:hover,
+nav#TOC ul > li > a.nav-link.active:hover {
+ color: $validmind-dark-teal !important;
+ background-color: $validmind-bg-hover;
+ text-decoration: none;
+}
+
+nav#TOC ul > li > a.nav-link.active, nav#TOC ul > li > a.nav-link.active:hover {
+ color: $validmind-pink !important;
+ text-decoration: none;
+}
+
+nav#TOC .toc-actions ul li a.toc-action {
+ color: $validmind-dark-teal;
+ text-decoration: none;
+ font-size: 0.9em;
+ margin-right: 1em;
+}
+
+// TOC styles
+nav#TOC {
+ padding: 13px;
+ background-color: white;
+ border: 1px solid #bdc1c4;
+ /* border-bottom: 2px solid #196972;
+ border-right: 2px solid #196972; */
+ border-radius: 3px;
+ background-color: #FAFBFB;
+}
+
+nav#TOC h2#toc-title {
+ font-weight: bold;
+ color: #196972;
+}
diff --git a/site/developer/model-testing/testing-overview.qmd b/site/developer/model-testing/testing-overview.qmd
index fa10654b03..3600079326 100644
--- a/site/developer/model-testing/testing-overview.qmd
+++ b/site/developer/model-testing/testing-overview.qmd
@@ -152,4 +152,4 @@ Absolutely! {{< var vm.product >}} supports custom tests that you develop yourse
## {{< var validmind.api >}} reference
-[{{< var validmind.developer >}} API Reference](/validmind/validmind.qmd){target="_blank" .button .button-green}
+[{{< var validmind.developer >}} Python API Reference](/validmind/validmind.qmd){target="_blank" .button .button-green}
diff --git a/site/styles.css b/site/styles.css
index 3749ca58be..c629c38587 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -25,47 +25,6 @@ body {
-.navbar-brand img {
- height: 100%;
- margin-top: -5px;
-}
-
-.navbar {
- border-bottom: 1px solid #dee2e6;
- padding: 15px;
-}
-
-.navbar-nav .dropdown-menu {
- box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
- border-radius: 5px;
- border: 1px solid #222425;
-}
-
-
-.sidebar-navigation .sidebar-divider {
- margin-top: 1rem;
-}
-
-.sidebar-item {
- color: #747678;
- padding-top: .3rem;
- line-height: 1.3;
-}
-
-.sidebar-item-container .active {
- position: relative;
-}
-
-.sidebar-item-container .active::before {
- content: "";
- position: absolute;
- left: 0;
- top: -0.5rem;
- bottom: -0.5rem;
- width: 3px;
- background-color: #de257e;
- margin-left: -0.7rem;
-}
div.callout.callout {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
@@ -176,22 +135,11 @@ div.callout.callout {
background-position: left 0px top 0px;
}
-.nav-item {
- padding-right: 20px;
-}
-
-.navbar-logo {
- padding-right: 20px;
-}
.alert, .alert-primary {
background-color: #44969f;
}
-.quarto-announcement-content, .quarto-announcement-action:before {
- color: white !important;
- padding: 5px;
-}
.smallcaps {
@@ -330,9 +278,6 @@ figcaption {
}
-.dropdown-menu.dropdown-menu-end.show {
- padding-top: 0.5rem; /* Adjust the value as needed */
-}
.video, iframe[src*="youtube.com"] {
box-shadow: 5px 5px 5px #ccc;
@@ -427,41 +372,6 @@ figcaption {
font-weight: bold;
}
-.sidebar-item .menu-text {
- text-transform: uppercase;
- color: #196972;
-}
-
-
-/*.sidebar-item- .sidebar-item-toggle*/
-.sidebar-item-container .sidebar-item-toggle {
- cursor: pointer;
- color: #083E44;
-}
-
-hr.sidebar-divider.hi {
- border-top: 1px solid #196972 !important;
-}
-
-nav#TOC {
- padding: 13px;
- background-color: white;
- border: 1px solid #bdc1c4;
- /* border-bottom: 2px solid #196972;
- border-right: 2px solid #196972; */
- border-radius: 3px;
- background-color: #FAFBFB;
-}
-
-nav#TOC h2#toc-title {
- font-weight: bold;
- color: #196972;
-}
-
-
-#quarto-sidebar.sidebar {
- background-color: #FAFBFB;
-}
.feature {
@@ -567,288 +477,9 @@ body::before {
line-height: 1.5;
}
-/* Announcement banner (EU AI Act Compliance) */
-.quarto-announcement {
- background-color: #44969f !important;
- color: #fff !important;
- border-radius: 0 !important;
- min-height: 36px;
- padding: 0 24px;
- font-size: 16px;
- font-family: 'Inter', sans-serif;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: none;
-}
-
-.quarto-announcement-content {
- color: #fff !important;
- font-weight: 500;
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-
-.quarto-announcement-action {
- display: none; /* Hide the default close button if not needed */
-}
-
-/* Added for the new footer */
-.page-footer {
- display: flex;
- flex-wrap: wrap;
- align-items: flex-start;
- background: #4e868b;
- color: #fff;
-}
-
-.footer-logo-info {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- flex: 0 1 200px;
- min-width: 200px;
- max-width: 400px;
-}
-
-.footer-logo {
- width: 140px;
- margin-bottom: 0.15em;
-}
-
-.footer-logo-column {
- display: flex;
- flex-direction: row;
- width: 100%;
- margin-top: 0.25em;
-}
-
-.footer-company-info {
- font-size: 1em;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- margin-left: 0.25em;
-}
-
-.footer-company-info > * {
- margin: 0;
- padding: 0;
- white-space: normal;
- max-width: 100%;
-}
-
-
-.footer-company-legal {
- font-size: 1em !important;
-}
-
-
-.cookie-preferences-link {
- font-size: 1em !important;
- min-height: 0px;
-}
-
-#custom-cookie-preferences {
- display: block;
- margin-top: 0.5em;
- text-align: left;
- color: #fff;
- font-weight: 500;
- text-decoration: underline;
- cursor: pointer;
-}
-
-.footer-heading {
- font-weight: bold;
- font-size: 1.2em;
-}
-
-.footer-section ul {
- list-style: none;
- margin-left: 0 !important;
- margin-right: 0 !important;
- padding-left: 0 !important;
- padding-right: 0 !important;
-}
-
-
-.footer-user-guides {
- flex: 4 1 0; /* Make center section much wider */
- min-width: 300px;
- max-width: 600px;
-}
-
-.footer-user-guides-columns {
- display: flex;
- gap: 1rem;
-}
-
-.footer-user-guides-column-1 {
- min-width: 125px;
- flex: 1;
-}
-
-.footer-user-guides-column-2 {
- min-width: 160px;
- flex: 1;
-}
-
-.footer-user-guides-column-3 {
- min-width: 125px;
- flex: 1;
-}
-
-.page-footer ul,
-.page-footer ul li {
- list-style: none !important;
- margin-left: 0 !important;
- margin-right: 0 !important;
- padding-left: 0 !important;
-}
-
-/* Make Quarto's footer slots align at the top and reduce spacing */
-.nav-footer {
- display: flex !important;
- align-items: flex-start !important;
- justify-content: space-between !important;
- gap: 0 !important;
- width: 100%;
- padding: 20px 0px;
- background: #26818B;
-}
-
-/* Remove default padding/margin from slot containers */
-.nav-footer-left, .nav-footer-center, .nav-footer-right {
- margin: 0.5rem !important;
- padding: 0.5rem !important;
- display: flex !important;
- flex-direction: row !important;
- align-items: flex-start !important;
- min-width: 0;
- margin-right: 0.25rem;
- flex: 0 1 auto !important;
- min-width: 0 !important;
-}
-
-.nav-footer-center .nav-item {
- margin-right: 1.5rem;
-}
-
-.nav-footer-center .nav-item:last-child {
- margin-right: 0;
-}
-
-/* Remove extra spacing from the User Guides section since it handles its own internal spacing */
-.nav-footer-center .nav-item:first-child {
- margin-right: 0;
-}
-
-/* Remove any extra margin from User Guides section */
-.footer-user-guides {
- margin-right: -0.5rem;
-}
-
-.footer-section {
- display: flex;
- flex-direction: column;
- gap: 0.25rem;
- color: #fff;
-}
-
-.footer-section,
-.footer-section ul,
-.footer-section li,
-.footer-section a,
-.footer-heading {
- text-align: left !important;
-}
-
-/* Responsive: stack footer columns and allow full width on small screens */
-@media (max-width: 1124px) {
- .nav-footer-center,
- .nav-footer-right {
- display: none !important;
- }
-}
-
-@media (min-width: 1125px) {
- .nav-footer-center,
- .nav-footer-right {
- display: flex !important;
- }
-}
@media (max-width: 768px) {
-
- .navbar {
- padding: 10px;
- }
-
- .navbar-nav .dropdown-menu {
- width: 100%;
- position: static;
- box-shadow: none;
- border: none;
- }
-
- .navbar-brand img {
- max-height: 20px;
- }
-
-
.search-shortcut {
display: none !important;
}
- .page-footer,
- .quarto-nav-footer {
- flex-direction: column !important;
- align-items: stretch !important;
- }
-
- .nav-footer-left,
- .nav-footer-center,
- .nav-footer-right {
- flex-direction: column !important;
- width: 100% !important;
- min-width: 0 !important;
- max-width: 100% !important;
- }
-
- .nav-footer-center,
- .nav-footer-right {
- display: none;
- }
-
- .footer-logo-info,
- .footer-user-guides,
- .footer-section {
- max-width: 100% !important;
- min-width: 0 !important;
- width: 100% !important;
- margin-bottom: 1.5em;
- }
-
- .footer-company-info {
- font-size: 1em;
- font-weight: normal;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- margin-left: 0.25em;
- }
-
- .footer-company-info > * {
- margin: 0 !important;
- padding: 0 !important;
- font-size: inherit;
- white-space: normal;
- }
-
- .footer-user-guides-columns {
- flex-direction: column;
- gap: 0.5em;
- }
}
diff --git a/site/theme.scss b/site/theme.scss
index a4d54e5024..c94e468775 100644
--- a/site/theme.scss
+++ b/site/theme.scss
@@ -1,16 +1,30 @@
/*-- scss:defaults --*/
-// Base ValidMind colors
-$body-color: #222425;
-$link-color: $body-color;
-$navbar-fg: #2e3133;
-$navbar-hl: #de257e;
+// ValidMind brand color palette
+$validmind-pink: #DE257E;
+$validmind-teal: #083E44;
+$validmind-dark-teal: #196972;
+$validmind-light-teal: #3E6C69;
+$validmind-bg-light: #FAFBFB;
+$validmind-bg-hover: #EAF8FA;
+$validmind-text-muted: #585F60;
-/*$sidebar-bg: #f8fafc;*/
-$sidebar-fg: $body-color;
-$sidebar-hl: #de257e;
+// Base link styles
+$link-color: #DE257E;
+$link-hover-color: $link-color;
+$link-decoration: none;
+$link-hover-decoration: underline 2px solid $validmind-teal !important; // Bootstrap rule not default
-$toc-active-border: #de257e;
+// Code block color variables
+$code-color: $validmind-teal;
+$code-block-bg: rgba($validmind-teal, 0.1); // Bootstrap rule not default
+$code-block-padding: 15px;
+$code-block-border-radius: 5px;
+
+
+// Button color variables
+$btn-primary-bg: $validmind-pink;
+$btn-primary-border: $validmind-pink;
// Mermaid theme variables
$mermaid-node-bg-color: #FAFBFB;
@@ -22,47 +36,32 @@ $mermaid-fg-color--lightest: #FAFBFB;
$mermaid-label-bg-color: #FAFBFB;
$mermaid-label-fg-color: #36454F;
-:root {
- --mermaid-node-radius: 5px;
-}
-
-/* Target all Mermaid diagram nodes */
-.node rect {
- rx: var(--mermaid-node-radius) !important;
- ry: var(--mermaid-node-radius) !important;
-}
-
-/* Additional selectors to ensure all node types are covered */
-.node .basic.label-container {
- rx: var(--mermaid-node-radius) !important;
- ry: var(--mermaid-node-radius) !important;
-}
+// Navbar color variables
+$navbar-bg: white;
+$navbar-brand-color: $validmind-pink;
+$navbar-nav-link-color: $validmind-teal;
+$navbar-nav-link-hover-color: $validmind-pink;
-/* Target cluster rectangles */
-.cluster rect {
- rx: var(--mermaid-node-radius) !important;
- ry: var(--mermaid-node-radius) !important;
-}
+// Sidebar color variables
+$sidebar-bg: $validmind-bg-light;
+$sidebar-fg: $validmind-text-muted;
+$sidebar-hl: $validmind-pink;
-/* Target all rectangles in Mermaid diagrams */
-#mermaid-1 rect,
-#mermaid-2 rect,
-#mermaid-3 rect,
-#mermaid-4 rect,
-#mermaid-5 rect,
-#mermaid-6 rect,
-#mermaid-7 rect,
-#mermaid-8 rect,
-#mermaid-9 rect,
-#mermaid-10 rect {
- rx: var(--mermaid-node-radius) !important;
- ry: var(--mermaid-node-radius) !important;
-}
+// TOC color variables
+$toc-color: $validmind-text-muted;
+$toc-active-border: $validmind-pink;
-/* Import modular SCSS files */
+// Import modular SCSS files
+@import 'assets/styles/banner';
+@import 'assets/styles/navbar';
+@import 'assets/styles/sidebar';
+@import 'assets/styles/toc';
+@import 'assets/styles/mermaid';
@import 'assets/styles/bug-fixes';
@import 'assets/styles/codeblocks';
@import 'assets/styles/termsfeed';
@import 'assets/styles/buttons';
@import 'assets/styles/links';
+@import 'assets/styles/dropdowns';
+@import 'assets/styles/footer';