From ff94e01fd422b9cbc990e623dae900d34b63fd35 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Fri, 19 Sep 2025 08:27:11 -0700 Subject: [PATCH 01/25] Add API reference links in footer and dropdown --- site/.gitignore | 3 ++- site/_quarto.yml | 9 +++++++-- site/developer/model-testing/testing-overview.qmd | 2 +- 3 files changed, 10 insertions(+), 4 deletions(-) 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..0c10953cf8 100644 --- a/site/_quarto.yml +++ b/site/_quarto.yml @@ -49,9 +49,13 @@ website: - text: "{{< fa bullhorn >}} Releases" file: releases/all-releases.qmd - text: "---" - - text: "{{< fa cube >}} Python Library" + - text: "{{< fa cube >}} Library" - text: "{{< fa code >}} {{< var validmind.developer >}}" file: developer/validmind-library.qmd + - text: "{{< fa code >}} Python API" + file: validmind/validmind.qmd + - text: "{{< fa code >}} Public REST API" + file: reference/validmind-rest-api-vm.qmd - text: "---" - text: "{{< fa graduation-cap >}} {{< var validmind.training >}}" - text: "{{< fa building-columns >}} Training Courses" @@ -194,7 +198,8 @@ website:
  • For developers
  • For validators
  • Code samples
    • -
  • API Reference
    • +
  • Python API
    • +
  • Public REST API
    • - text: | 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} From cf51414a6cc1fb1e24bc2fa9db0c88b066c69307 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Fri, 19 Sep 2025 09:03:19 -0700 Subject: [PATCH 02/25] Reduce Guides section from three to two columns and reshuffle content --- site/_quarto.yml | 10 ++++------ site/styles.css | 4 ---- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/site/_quarto.yml b/site/_quarto.yml index 0c10953cf8..212c25a41b 100644 --- a/site/_quarto.yml +++ b/site/_quarto.yml @@ -175,18 +175,16 @@ website:
    Guides
    - -
    diff --git a/site/styles.css b/site/styles.css index 26bd84cdbf..c8e773cc3e 100644 --- a/site/styles.css +++ b/site/styles.css @@ -939,10 +939,6 @@ body::before { flex: 1; } -.footer-user-guides-column-3 { - min-width: 125px; - flex: 1; -} .page-footer ul, .page-footer ul li { From 0fa9d62c03336ca78d21a1ba4a61b4021a7f5258 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Fri, 19 Sep 2025 10:22:43 -0700 Subject: [PATCH 03/25] Move footer CSS into /assets/styles --- site/assets/styles/_footer.scss | 274 ++++++++++++++++++++++++++++++++ site/styles.css | 248 +---------------------------- site/theme.scss | 2 + 3 files changed, 277 insertions(+), 247 deletions(-) create mode 100644 site/assets/styles/_footer.scss diff --git a/site/assets/styles/_footer.scss b/site/assets/styles/_footer.scss new file mode 100644 index 0000000000..8ca64690c4 --- /dev/null +++ b/site/assets/styles/_footer.scss @@ -0,0 +1,274 @@ +/* Footer Styles */ + +/* Nav footer hover styles */ +a.nav-link:not(nav#TOC a.nav-link, .nav-footer a:hover, #nav-menu-log-in:hover):before, +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; +} + +/* Cookie preferences link */ +.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; +} + +/* 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 !important; +} + +/* Remove external link icons from footer */ +.footer a.external::after { + content: none !important; + background-image: none !important; + margin-left: 0 !important; + padding-right: 0 !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 !important; + margin-right: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; +} + +.footer-section, +.footer-section ul, +.footer-section li, +.footer-section a, +.footer-heading { + text-align: left !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; +} + +/* 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: 1rem; +} + +.footer-user-guides-column-1 { + min-width: 125px; + flex: 1; +} + +.footer-user-guides-column-2 { + min-width: 160px; + 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; +} + +/* 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) { + .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/styles.css b/site/styles.css index c8e773cc3e..2191f05dd9 100644 --- a/site/styles.css +++ b/site/styles.css @@ -57,7 +57,7 @@ a.nav-link, a.dropdown-item { position: relative; } -a.nav-link:not(nav#TOC a.nav-link, .nav-footer a:hover, #nav-menu-log-in:hover):before, +a.nav-link:not(nav#TOC a.nav-link, #nav-menu-log-in:hover):before, a.dropdown-item:before { content: ""; position: absolute; @@ -818,207 +818,10 @@ body::before { 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-info a { - display: inline-block; - text-decoration: none; -} - -.footer-company-legal { - font-size: 1em !important; -} - -.footer a.external::after { - content: none !important; - background-image: none !important; - margin-left: 0 !important; - padding-right: 0 !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-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 { - 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; -} - - -.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) { #nav-menu-log-in { @@ -1048,54 +851,5 @@ body::before { .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 8b0da24f2e..fcfe8c9749 100644 --- a/site/theme.scss +++ b/site/theme.scss @@ -70,3 +70,5 @@ $mermaid-label-fg-color: #36454F; color: #111; border-color: #de257e; } + +@import 'assets/styles/_footer.scss'; From 756a55d2c3b82cc26d481c138a15ef7bc297ed28 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Fri, 19 Sep 2025 12:20:57 -0700 Subject: [PATCH 04/25] Check out .gitignore from main --- site/.gitignore | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/.gitignore b/site/.gitignore index 78c6374415..ea48dacc92 100644 --- a/site/.gitignore +++ b/site/.gitignore @@ -5,5 +5,4 @@ /.luarc.json # Environment -site/.env -**/*.quarto_ipynb +site/.env \ No newline at end of file From 7e84d8b728c71d0f9d2e3a0f139dd9c5fa5202cf Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Fri, 19 Sep 2025 15:40:03 -0700 Subject: [PATCH 05/25] Re-add Assess to footer and simplify dropdown --- site/_quarto.yml | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/site/_quarto.yml b/site/_quarto.yml index 212c25a41b..716b6eda95 100644 --- a/site/_quarto.yml +++ b/site/_quarto.yml @@ -38,27 +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 >}} Library" - - text: "{{< fa code >}} {{< var validmind.developer >}}" + - text: "{{< var validmind.developer >}}" file: developer/validmind-library.qmd - - text: "{{< fa code >}} Python API" + - text: "Python API" file: validmind/validmind.qmd - - text: "{{< fa code >}} Public REST API" + - 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. @@ -175,14 +173,15 @@ website:
    Guides
      -
    • Model workflows
      • +
    • Templates
      • +
    • Workflows
    • Monitoring
    • Reporting
    • Attestation
      • From 18773c3f22fb6ab622b7a8142f1c9b15a7402315 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Fri, 19 Sep 2025 16:52:10 -0700 Subject: [PATCH 06/25] Fix column spacing, correctly hide .nav-footer-right when wrapping, and hide .nav-footer-center before getting cut off --- site/assets/styles/_footer.scss | 26 ++++++++++---------------- 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/site/assets/styles/_footer.scss b/site/assets/styles/_footer.scss index 8ca64690c4..e21c9d3b76 100644 --- a/site/assets/styles/_footer.scss +++ b/site/assets/styles/_footer.scss @@ -143,16 +143,15 @@ a.dropdown-item:before { .footer-user-guides-columns { display: flex; - gap: 1rem; + gap: 2rem; } .footer-user-guides-column-1 { - min-width: 125px; + min-width: 160px; flex: 1; } .footer-user-guides-column-2 { - min-width: 160px; flex: 1; } @@ -189,36 +188,31 @@ a.dropdown-item:before { } .nav-footer-center .nav-item { - margin-right: 1.5rem; + margin-right: 1rem; + min-width: 140px; } .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; -} /* Responsive: stack footer columns and allow full width on small screens */ -@media (max-width: 1124px) { +@media (max-width: 1149px) { .nav-footer-center, .nav-footer-right { display: none !important; } } -@media (min-width: 1125px) { - .nav-footer-center, - .nav-footer-right { +@media (min-width: 1150px) { + .nav-footer-center { display: flex !important; } + .nav-footer-right { + display: none !important; + } } @media (max-width: 768px) { From ed54a1f57de4bd8962627516a643c8991199bfee Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Fri, 19 Sep 2025 17:11:50 -0700 Subject: [PATCH 07/25] Fix .nav-footer-center alignment when non-responsive --- site/assets/styles/_footer.scss | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/site/assets/styles/_footer.scss b/site/assets/styles/_footer.scss index e21c9d3b76..ab11fdffc4 100644 --- a/site/assets/styles/_footer.scss +++ b/site/assets/styles/_footer.scss @@ -187,6 +187,16 @@ a.dropdown-item:before { min-width: 0 !important; } +/* Center the content within nav-footer-center on desktop only */ +@media (min-width: 1150px) { + .nav-footer-center { + flex: 1 1 auto !important; + justify-content: center !important; + max-width: 1200px; + margin: 0 auto !important; + } +} + .nav-footer-center .nav-item { margin-right: 1rem; min-width: 140px; @@ -196,8 +206,6 @@ a.dropdown-item:before { margin-right: 0; } - - /* Responsive: stack footer columns and allow full width on small screens */ @media (max-width: 1149px) { .nav-footer-center, @@ -229,8 +237,11 @@ a.dropdown-item:before { width: 100% !important; min-width: 0 !important; max-width: 100% !important; + justify-content: flex-start !important; + margin: 0 !important; + flex: 1 1 auto !important; } - + .nav-footer-center, .nav-footer-right { display: none; From 542dece0ad56d0c476959055f0e13b025a962ecd Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Fri, 19 Sep 2025 17:30:21 -0700 Subject: [PATCH 08/25] Fix alignment in desktop mode, fix most of the responsive issues --- site/assets/styles/_footer.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/site/assets/styles/_footer.scss b/site/assets/styles/_footer.scss index ab11fdffc4..83d73d2f23 100644 --- a/site/assets/styles/_footer.scss +++ b/site/assets/styles/_footer.scss @@ -212,9 +212,14 @@ a.dropdown-item:before { .nav-footer-right { display: none !important; } + + .nav-footer-left { + display: flex !important; + } } @media (min-width: 1150px) { + .nav-footer-left, .nav-footer-center { display: flex !important; } From 485cd00dd1a959b73e1870dfad1fc189e2cfa084 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Mon, 22 Sep 2025 06:08:07 -0700 Subject: [PATCH 09/25] Simplified footer CSS, improved responsive mode --- site/assets/styles/_footer.scss | 161 ++++++++------------------------ 1 file changed, 37 insertions(+), 124 deletions(-) diff --git a/site/assets/styles/_footer.scss b/site/assets/styles/_footer.scss index 83d73d2f23..ab47122e8c 100644 --- a/site/assets/styles/_footer.scss +++ b/site/assets/styles/_footer.scss @@ -1,23 +1,10 @@ /* Footer Styles */ -/* Nav footer hover styles */ -a.nav-link:not(nav#TOC a.nav-link, .nav-footer a:hover, #nav-menu-log-in:hover):before, -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; -} +/* Nav footer hover styles - removed duplicate (already in styles.css) */ /* Cookie preferences link */ .cookie-preferences-link { - font-size: 1em !important; + font-size: 1em; min-height: 0px; } @@ -83,15 +70,13 @@ a.dropdown-item:before { } .footer-company-legal { - font-size: 1em !important; + font-size: 1em; } /* Remove external link icons from footer */ .footer a.external::after { content: none !important; background-image: none !important; - margin-left: 0 !important; - padding-right: 0 !important; } /* Footer sections */ @@ -109,10 +94,10 @@ a.dropdown-item:before { .footer-section ul { list-style: none; - margin-left: 0 !important; - margin-right: 0 !important; - padding-left: 0 !important; - padding-right: 0 !important; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; } .footer-section, @@ -120,7 +105,7 @@ a.dropdown-item:before { .footer-section li, .footer-section a, .footer-heading { - text-align: left !important; + text-align: left; } .footer-link, .footer-section a { @@ -155,50 +140,40 @@ a.dropdown-item:before { 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; -} +/* Redundant list styling removed - Bootstrap .list-unstyled handles this */ /* 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; + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: 0; 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; +/* Hide right section when it only contains whitespace */ +.nav-footer-right { + display: none; } -/* Center the content within nav-footer-center on desktop only */ -@media (min-width: 1150px) { - .nav-footer-center { - flex: 1 1 auto !important; - justify-content: center !important; - max-width: 1200px; - margin: 0 auto !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: 1rem; + margin-right: 0; /* Remove since we're using gap now */ min-width: 140px; } @@ -206,79 +181,17 @@ a.dropdown-item:before { margin-right: 0; } -/* Responsive: stack footer columns and allow full width on small screens */ -@media (max-width: 1149px) { - .nav-footer-center, - .nav-footer-right { - display: none !important; - } - - .nav-footer-left { - display: flex !important; - } -} - -@media (min-width: 1150px) { - .nav-footer-left, - .nav-footer-center { - display: flex !important; - } - .nav-footer-right { - display: none !important; - } -} - +/* Left-align footer items when wrapping on smaller screens */ @media (max-width: 768px) { - .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 { justify-content: flex-start !important; - margin: 0 !important; - flex: 1 1 auto !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; +/* Prevent left section from expanding and competing with center */ +@media (min-width: 768px) { + .nav-footer-left { + flex: 0 0 auto !important; + padding-right: 20px; } } From b8d5127676445363cf46f034e162ed56c00ce7da Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Mon, 22 Sep 2025 11:28:04 -0700 Subject: [PATCH 10/25] Fix link color --- site/assets/styles/_links.scss | 10 +--------- site/theme.scss | 2 +- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/site/assets/styles/_links.scss b/site/assets/styles/_links.scss index 7b6c9a232a..ff2ca74e63 100644 --- a/site/assets/styles/_links.scss +++ b/site/assets/styles/_links.scss @@ -1,10 +1,6 @@ /* Link Styles */ /* Base link styles */ -a { - color: #DE257E; - text-decoration: none; -} a:hover { text-decoration: underline 2px solid #083E44; @@ -109,15 +105,11 @@ nav#TOC .toc-actions ul li a.toc-action { } .quarto-announcement-content a:hover { + color: #fff !important; 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; diff --git a/site/theme.scss b/site/theme.scss index 19e024f313..84e4f0af78 100644 --- a/site/theme.scss +++ b/site/theme.scss @@ -1,7 +1,7 @@ /*-- scss:defaults --*/ // Base ValidMind colors $body-color: #222425; -$link-color: $body-color; +$link-color: #DE257E; $navbar-fg: #2e3133; $navbar-hl: #de257e; From 298a4ef67668ee064cb5b8780eef27cfdaa454a0 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Mon, 22 Sep 2025 11:29:35 -0700 Subject: [PATCH 11/25] Fix footer SCSS embed --- site/theme.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/site/theme.scss b/site/theme.scss index 84e4f0af78..fce2dea1c8 100644 --- a/site/theme.scss +++ b/site/theme.scss @@ -65,6 +65,5 @@ $mermaid-label-fg-color: #36454F; @import 'assets/styles/termsfeed'; @import 'assets/styles/buttons'; @import 'assets/styles/links'; - -@import 'assets/styles/_footer.scss'; +@import 'assets/styles/footer'; From 4ca5c494b768f229a723795ee3ce1a03b3fc6eea Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Tue, 23 Sep 2025 16:35:10 -0700 Subject: [PATCH 12/25] Remove duplicate CSS --- site/styles.css | 83 ------------------------------------------------- 1 file changed, 83 deletions(-) diff --git a/site/styles.css b/site/styles.css index e0dba79e2c..8927afc4a8 100644 --- a/site/styles.css +++ b/site/styles.css @@ -592,76 +592,8 @@ body::before { display: none; /* Hide the default close button if not needed */ } -.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; @@ -718,21 +650,6 @@ body::before { 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, From 3f0abba8eddacdd2a235f13b36de2eb343676844 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Tue, 23 Sep 2025 16:51:25 -0700 Subject: [PATCH 13/25] Initial reshuffle of definitions into modular files --- site/.gitignore | 3 +- site/assets/styles/_buttons.scss | 58 ++++++++++---------- site/assets/styles/_codeblocks.scss | 14 +++-- site/assets/styles/_links.scss | 47 ++++++++--------- site/assets/styles/_mermaid.scss | 48 +++++++++++++++++ site/assets/styles/_navbar.scss | 7 +++ site/assets/styles/_sidebar.scss | 6 +++ site/assets/styles/_termsfeed.scss | 6 ++- site/assets/styles/_toc.scss | 5 ++ site/assets/styles/_validmind-colors.scss | 13 +++++ site/theme.scss | 64 ++--------------------- 11 files changed, 153 insertions(+), 118 deletions(-) create mode 100644 site/assets/styles/_mermaid.scss create mode 100644 site/assets/styles/_navbar.scss create mode 100644 site/assets/styles/_sidebar.scss create mode 100644 site/assets/styles/_toc.scss create mode 100644 site/assets/styles/_validmind-colors.scss 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/assets/styles/_buttons.scss b/site/assets/styles/_buttons.scss index 10a1a0cef1..4e831c433d 100644 --- a/site/assets/styles/_buttons.scss +++ b/site/assets/styles/_buttons.scss @@ -1,7 +1,12 @@ -/* Button Styles */ +// Button Styles +// Button color variables +$btn-primary-bg: $validmind-pink; +$btn-primary-border: $validmind-pink; + +// Other button styles .button { - color: #DE257E; + color: $validmind-pink; background-color: white; text-decoration: none; padding-left: 1rem; @@ -11,7 +16,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 +24,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 +69,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 +97,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 +109,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..06f2a2534d 100644 --- a/site/assets/styles/_codeblocks.scss +++ b/site/assets/styles/_codeblocks.scss @@ -1,13 +1,17 @@ -/* Code block and syntax highlighting styles */ +// Code block and syntax highlighting styles -/* General code styling */ +// Code block color variables +$code-color: $validmind-teal; +$code-block-bg: rgba($validmind-teal, 0.125); + +// 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/_links.scss b/site/assets/styles/_links.scss index ff2ca74e63..d8f8377f67 100644 --- a/site/assets/styles/_links.scss +++ b/site/assets/styles/_links.scss @@ -1,31 +1,30 @@ -/* Link Styles */ +// Link Styles -/* Base link styles */ +// Base link styles +$link-color: #DE257E; a:hover { - text-decoration: underline 2px solid #083E44; - /* text-underline-offset: 6px; */ + text-decoration: underline 2px solid $validmind-teal; } -/* 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; + color: $validmind-dark-teal; + background-color: $validmind-bg-hover; } -/* NEW NAVBAR LINKS */ +// New navbar links a.nav-link, a.dropdown-item { position: relative; } @@ -57,47 +56,47 @@ a.dropdown-item:not(nav#TOC a.dropdown-item):hover::before { padding: .2rem .7rem; } -/* Sidebar link styles */ +// Sidebar link styles .sidebar-item a .menu-text { text-transform: none; - color: #585F60; + color: $sidebar-fg; } .sidebar-item a:hover .menu-text { text-transform: none; - color: #DE257E !important; + color: $sidebar-hl !important; } .sidebar-item .sidebar-item-container .sidebar-link.active .menu-text { - color: #DE257E !important; + color: $sidebar-hl !important; } -/* Table of Contents link styles */ +// Table of Contents link styles nav#TOC ul > li > a.nav-link { - color: #585F60 !important; + 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: #196972 !important; - background-color: #EAF8FA; + 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: #DE257E !important; + color: $validmind-pink !important; text-decoration: none; } nav#TOC .toc-actions ul li a.toc-action { - color: #196972; + color: $validmind-dark-teal; text-decoration: none; font-size: 0.9em; margin-right: 1em; } -/* Announcement banner link styles */ +// Announcement banner link styles .quarto-announcement-content a { color: white !important; text-decoration: underline; @@ -110,7 +109,7 @@ nav#TOC .toc-actions ul li a.toc-action { text-underline-offset: 10px; } -/* Footer link styles */ +// Footer link styles .footer-company-info a { display: inline-block; text-decoration: none; @@ -134,7 +133,7 @@ nav#TOC .toc-actions ul li a.toc-action { text-decoration: underline; } -/* Responsive styles */ +// Responsive styles @media (max-width: 768px) { .dropdown-item { padding: 0.5rem 1rem; diff --git a/site/assets/styles/_mermaid.scss b/site/assets/styles/_mermaid.scss new file mode 100644 index 0000000000..817b24fe09 --- /dev/null +++ b/site/assets/styles/_mermaid.scss @@ -0,0 +1,48 @@ +// Mermaid Diagram Styles + +// Mermaid theme variables +$mermaid-node-bg-color: #FAFBFB; +$mermaid-node-fg-color: #083E44; +$mermaid-edge-color: #083E44; +$mermaid-fg-color: #36454F; +$mermaid-fg-color--lighter: #083E44; +$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; +} + +// 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..1ff1be0233 --- /dev/null +++ b/site/assets/styles/_navbar.scss @@ -0,0 +1,7 @@ +// Navbar Variables + +// Navbar color variables +$navbar-bg: white; +$navbar-brand-color: $validmind-pink; +$navbar-nav-link-color: $validmind-teal; +$navbar-nav-link-hover-color: $validmind-pink; diff --git a/site/assets/styles/_sidebar.scss b/site/assets/styles/_sidebar.scss new file mode 100644 index 0000000000..488b1e3779 --- /dev/null +++ b/site/assets/styles/_sidebar.scss @@ -0,0 +1,6 @@ +// Sidebar Variables + +// Sidebar color variables +$sidebar-bg: $validmind-bg-light; +$sidebar-fg: $validmind-text-muted; +$sidebar-hl: $validmind-pink; 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..d23480528b --- /dev/null +++ b/site/assets/styles/_toc.scss @@ -0,0 +1,5 @@ +// Table of Contents Variables + +// TOC color variables +$toc-color: $validmind-text-muted; +$toc-active-border: $validmind-pink; diff --git a/site/assets/styles/_validmind-colors.scss b/site/assets/styles/_validmind-colors.scss new file mode 100644 index 0000000000..021a9c149b --- /dev/null +++ b/site/assets/styles/_validmind-colors.scss @@ -0,0 +1,13 @@ +// ValidMind Color Palette + +// Base colors +$body-color: #222425; + +// 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; diff --git a/site/theme.scss b/site/theme.scss index fce2dea1c8..f45f1f05da 100644 --- a/site/theme.scss +++ b/site/theme.scss @@ -1,65 +1,11 @@ /*-- scss:defaults --*/ -// Base ValidMind colors -$body-color: #222425; -$link-color: #DE257E; - -$navbar-fg: #2e3133; -$navbar-hl: #de257e; - -/*$sidebar-bg: #f8fafc;*/ -$sidebar-fg: $body-color; -$sidebar-hl: #de257e; - -$toc-active-border: #de257e; - -// Mermaid theme variables -$mermaid-node-bg-color: #FAFBFB; -$mermaid-node-fg-color: #083E44; -$mermaid-edge-color: #083E44; -$mermaid-fg-color: #36454F; -$mermaid-fg-color--lighter: #083E44; -$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; -} - -/* 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; -} /* Import modular SCSS files */ +@import 'assets/styles/validmind-colors'; +@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'; From 39f012df55e6a9aef9e7dcb91d432bebb4568988 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Wed, 24 Sep 2025 10:14:04 -0700 Subject: [PATCH 14/25] Make more CSS modular --- site/assets/styles/_bug-fixes.scss | 7 ++-- site/assets/styles/_buttons.scss | 2 +- site/assets/styles/_dropdowns.scss | 63 ++++++++++++++++++++++++++++++ site/assets/styles/_footer.scss | 50 +++++++++++++++++------- site/assets/styles/_links.scss | 54 ++----------------------- site/styles.css | 14 ------- site/theme.scss | 1 + 7 files changed, 107 insertions(+), 84 deletions(-) create mode 100644 site/assets/styles/_dropdowns.scss 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 4e831c433d..1282557dec 100644 --- a/site/assets/styles/_buttons.scss +++ b/site/assets/styles/_buttons.scss @@ -1,4 +1,4 @@ -// Button Styles +// Button styles // Button color variables $btn-primary-bg: $validmind-pink; diff --git a/site/assets/styles/_dropdowns.scss b/site/assets/styles/_dropdowns.scss new file mode 100644 index 0000000000..cdf8f166d2 --- /dev/null +++ b/site/assets/styles/_dropdowns.scss @@ -0,0 +1,63 @@ +// 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; +} + +// Responsive styles +@media (max-width: 768px) { + .dropdown-item { + padding: 0.5rem 1rem; + font-size: 0.9rem; + } + + .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 index ab47122e8c..1445e09221 100644 --- a/site/assets/styles/_footer.scss +++ b/site/assets/styles/_footer.scss @@ -1,8 +1,30 @@ -/* Footer Styles */ +// Footer styles -/* Nav footer hover styles - removed duplicate (already in styles.css) */ +// Footer link styles +.footer-company-info a { + display: inline-block; + text-decoration: none; +} -/* Cookie preferences link */ +.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; @@ -18,7 +40,7 @@ cursor: pointer; } -/* Page footer */ +// Page footer .page-footer { display: flex; flex-wrap: wrap; @@ -27,7 +49,7 @@ color: #fff; } -/* Footer logo section */ +// Footer logo section .footer-logo-info { display: flex; flex-direction: column; @@ -73,13 +95,13 @@ font-size: 1em; } -/* Remove external link icons from footer */ +// Remove external link icons from footer .footer a.external::after { content: none !important; background-image: none !important; } -/* Footer sections */ +// Footer sections .footer-heading { font-weight: bold; font-size: 1.2em; @@ -119,7 +141,7 @@ text-decoration: underline; } -/* Footer user guides sections */ +// Footer user guides sections .footer-user-guides { flex: 4 1 0; /* Make center section much wider */ min-width: 300px; @@ -140,9 +162,7 @@ flex: 1; } -/* Redundant list styling removed - Bootstrap .list-unstyled handles this */ - -/* Make Quarto's footer slots align at the top and reduce spacing */ +// Make Quarto's footer slots align at the top and reduce spacing .nav-footer { display: flex; align-items: flex-start; @@ -153,12 +173,12 @@ background: #26818B; } -/* Hide right section when it only contains whitespace */ +// Hide right section when it only contains whitespace .nav-footer-right { display: none; } -/* Override Bootstrap's centering constraints */ +// Override Bootstrap's centering constraints .nav-footer-center { max-width: none !important; margin: 0 !important; @@ -181,14 +201,14 @@ margin-right: 0; } -/* Left-align footer items when wrapping on smaller screens */ +// Left-align footer items when wrapping on smaller screens @media (max-width: 768px) { .nav-footer-center { justify-content: flex-start !important; } } -/* Prevent left section from expanding and competing with center */ +// Prevent left section from expanding and competing with center @media (min-width: 768px) { .nav-footer-left { flex: 0 0 auto !important; diff --git a/site/assets/styles/_links.scss b/site/assets/styles/_links.scss index d8f8377f67..c57733a48d 100644 --- a/site/assets/styles/_links.scss +++ b/site/assets/styles/_links.scss @@ -1,4 +1,4 @@ -// Link Styles +// Link styles // Base link styles $link-color: #DE257E; @@ -18,19 +18,13 @@ a.nav-link:hover, a.sidebar-link:hover { color: $navbar-nav-link-hover-color; } -a.dropdown-item:hover { - text-decoration: none; - color: $validmind-dark-teal; - background-color: $validmind-bg-hover; -} // New navbar links -a.nav-link, a.dropdown-item { +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; @@ -43,19 +37,10 @@ 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; @@ -109,34 +94,3 @@ nav#TOC .toc-actions ul li a.toc-action { text-underline-offset: 10px; } -// 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/styles.css b/site/styles.css index 8927afc4a8..31ae4c9ce5 100644 --- a/site/styles.css +++ b/site/styles.css @@ -32,11 +32,6 @@ body { 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 { @@ -327,9 +322,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; @@ -671,12 +663,6 @@ body::before { padding: 10px; } - .navbar-nav .dropdown-menu { - width: 100%; - position: static; - box-shadow: none; - border: none; - } .navbar-brand img { max-height: 20px; diff --git a/site/theme.scss b/site/theme.scss index f45f1f05da..b8ce7c64c6 100644 --- a/site/theme.scss +++ b/site/theme.scss @@ -10,6 +10,7 @@ @import 'assets/styles/codeblocks'; @import 'assets/styles/termsfeed'; @import 'assets/styles/buttons'; +@import 'assets/styles/dropdowns'; @import 'assets/styles/links'; @import 'assets/styles/footer'; From b1e918319b276aca8fe4c0912cc00506663784bc Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Wed, 24 Sep 2025 10:17:04 -0700 Subject: [PATCH 15/25] Fix issue with .nav-footer-right still showing up --- site/assets/styles/_footer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/assets/styles/_footer.scss b/site/assets/styles/_footer.scss index 1445e09221..734496d11c 100644 --- a/site/assets/styles/_footer.scss +++ b/site/assets/styles/_footer.scss @@ -175,7 +175,7 @@ // Hide right section when it only contains whitespace .nav-footer-right { - display: none; + display: none !important; } // Override Bootstrap's centering constraints From 7903b973a9e598a4cc2d40f1f73c95b0a581d146 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Wed, 24 Sep 2025 10:22:00 -0700 Subject: [PATCH 16/25] Fix dropdown spacing --- site/assets/styles/_dropdowns.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/site/assets/styles/_dropdowns.scss b/site/assets/styles/_dropdowns.scss index cdf8f166d2..ef6270a80d 100644 --- a/site/assets/styles/_dropdowns.scss +++ b/site/assets/styles/_dropdowns.scss @@ -44,16 +44,12 @@ a.dropdown-item:not(nav#TOC a.dropdown-item):hover::before { } .navbar .dropdown-item { - padding: .2rem .7rem; + padding: .2rem .7rem !important; } // Responsive styles @media (max-width: 768px) { - .dropdown-item { - padding: 0.5rem 1rem; - font-size: 0.9rem; - } - + .navbar-nav .dropdown-menu { width: 100%; position: static; From 1a264de0f1ec5d93d2b5c43b093953ac366ad3cc Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Wed, 24 Sep 2025 10:56:48 -0700 Subject: [PATCH 17/25] Add more overrides for .nav-footer-right --- site/assets/styles/_footer.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/site/assets/styles/_footer.scss b/site/assets/styles/_footer.scss index 734496d11c..f41d58724d 100644 --- a/site/assets/styles/_footer.scss +++ b/site/assets/styles/_footer.scss @@ -206,6 +206,10 @@ .nav-footer-center { justify-content: flex-start !important; } + + .nav-footer-right { + display: none !important; + } } // Prevent left section from expanding and competing with center @@ -214,4 +218,8 @@ flex: 0 0 auto !important; padding-right: 20px; } + + .nav-footer-right { + display: none !important; + } } From e9882b9aaa3b4e2f4a276e8bb9561ea2efdc0d9b Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Wed, 24 Sep 2025 11:15:53 -0700 Subject: [PATCH 18/25] More CSS reshuffle to remove duplicated or misplaced items --- site/assets/styles/_banner.scss | 46 ++++++++ site/assets/styles/_footer.scss | 2 +- site/assets/styles/_links.scss | 53 --------- site/assets/styles/_navbar.scss | 30 +++++ site/assets/styles/_sidebar.scss | 59 ++++++++++ site/assets/styles/_toc.scss | 41 +++++++ site/styles.css | 190 ------------------------------- site/theme.scss | 1 + 8 files changed, 178 insertions(+), 244 deletions(-) create mode 100644 site/assets/styles/_banner.scss 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/_footer.scss b/site/assets/styles/_footer.scss index f41d58724d..f5485afdae 100644 --- a/site/assets/styles/_footer.scss +++ b/site/assets/styles/_footer.scss @@ -207,7 +207,7 @@ justify-content: flex-start !important; } - .nav-footer-right { + .nav-footer-center, .nav-footer-right { display: none !important; } } diff --git a/site/assets/styles/_links.scss b/site/assets/styles/_links.scss index c57733a48d..7b44df15a5 100644 --- a/site/assets/styles/_links.scss +++ b/site/assets/styles/_links.scss @@ -41,56 +41,3 @@ a.nav-link:not(nav#TOC a.nav-link):hover::before { transform: scaleX(1); } -// 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; -} - -// 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; -} - -// 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; -} - diff --git a/site/assets/styles/_navbar.scss b/site/assets/styles/_navbar.scss index 1ff1be0233..b3f8f8a0a4 100644 --- a/site/assets/styles/_navbar.scss +++ b/site/assets/styles/_navbar.scss @@ -5,3 +5,33 @@ $navbar-bg: white; $navbar-brand-color: $validmind-pink; $navbar-nav-link-color: $validmind-teal; $navbar-nav-link-hover-color: $validmind-pink; + +// 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 index 488b1e3779..1b85356701 100644 --- a/site/assets/styles/_sidebar.scss +++ b/site/assets/styles/_sidebar.scss @@ -4,3 +4,62 @@ $sidebar-bg: $validmind-bg-light; $sidebar-fg: $validmind-text-muted; $sidebar-hl: $validmind-pink; + +// 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/_toc.scss b/site/assets/styles/_toc.scss index d23480528b..15e736b092 100644 --- a/site/assets/styles/_toc.scss +++ b/site/assets/styles/_toc.scss @@ -3,3 +3,44 @@ // TOC color variables $toc-color: $validmind-text-muted; $toc-active-border: $validmind-pink; + +// 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/styles.css b/site/styles.css index 31ae4c9ce5..c629c38587 100644 --- a/site/styles.css +++ b/site/styles.css @@ -22,42 +22,9 @@ body { color: #1A202C; } -.navbar-brand img { - height: 100%; - margin-top: -5px; -} - -.navbar { - border-bottom: 1px solid #dee2e6; - padding: 15px; -} -.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); @@ -168,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 { @@ -416,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 { @@ -556,119 +477,8 @@ 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 */ -} - - - - -.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; -} - -/* 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-brand img { - max-height: 20px; - } - - .search-shortcut { display: none !important; } diff --git a/site/theme.scss b/site/theme.scss index b8ce7c64c6..42abda21d2 100644 --- a/site/theme.scss +++ b/site/theme.scss @@ -2,6 +2,7 @@ /* Import modular SCSS files */ @import 'assets/styles/validmind-colors'; +@import 'assets/styles/banner'; @import 'assets/styles/navbar'; @import 'assets/styles/sidebar'; @import 'assets/styles/toc'; From afede8f0956bd991bb50e4c12904dc3d42a11779 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Wed, 24 Sep 2025 18:57:49 -0700 Subject: [PATCH 19/25] Switch order of imports to ensure dropdown text is correct --- site/theme.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/site/theme.scss b/site/theme.scss index 42abda21d2..7af79eb704 100644 --- a/site/theme.scss +++ b/site/theme.scss @@ -1,6 +1,7 @@ /*-- scss:defaults --*/ -/* Import modular SCSS files */ +/* Import modular SCSS files +*/ @import 'assets/styles/validmind-colors'; @import 'assets/styles/banner'; @import 'assets/styles/navbar'; @@ -11,7 +12,7 @@ @import 'assets/styles/codeblocks'; @import 'assets/styles/termsfeed'; @import 'assets/styles/buttons'; -@import 'assets/styles/dropdowns'; @import 'assets/styles/links'; +@import 'assets/styles/dropdowns'; @import 'assets/styles/footer'; From fb4ab87568453b73b6ccc3dd6ff20fddd5099b64 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Wed, 24 Sep 2025 18:58:15 -0700 Subject: [PATCH 20/25] Fix for links getting underlined again --- site/assets/styles/_links.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/assets/styles/_links.scss b/site/assets/styles/_links.scss index 7b44df15a5..05618a5bc1 100644 --- a/site/assets/styles/_links.scss +++ b/site/assets/styles/_links.scss @@ -3,6 +3,10 @@ // Base link styles $link-color: #DE257E; +a, a:link, a:visited { + text-decoration: none !important; +} + a:hover { text-decoration: underline 2px solid $validmind-teal; } From 0b1007dfce834a549dd0b62b8e3c50ff497863cb Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Fri, 26 Sep 2025 09:42:00 -0700 Subject: [PATCH 21/25] Add more footer padding --- site/assets/styles/_footer.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/site/assets/styles/_footer.scss b/site/assets/styles/_footer.scss index f5485afdae..e6a628e9fc 100644 --- a/site/assets/styles/_footer.scss +++ b/site/assets/styles/_footer.scss @@ -201,6 +201,11 @@ 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 { From 20e1f5ce842ddcd605c0e5b979a3de7888e44f34 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Fri, 26 Sep 2025 10:25:25 -0700 Subject: [PATCH 22/25] Correct hierarchy of color definitions, SCSS defaults, and SCSS rules --- site/assets/styles/_buttons.scss | 4 -- site/assets/styles/_codeblocks.scss | 4 -- site/assets/styles/_links.scss | 3 -- site/assets/styles/_mermaid.scss | 10 ----- site/assets/styles/_navbar.scss | 6 --- site/assets/styles/_sidebar.scss | 5 --- site/assets/styles/_toc.scss | 4 -- site/assets/styles/_validmind-colors.scss | 13 ------ site/theme.scss | 49 +++++++++++++++++++++-- 9 files changed, 46 insertions(+), 52 deletions(-) delete mode 100644 site/assets/styles/_validmind-colors.scss diff --git a/site/assets/styles/_buttons.scss b/site/assets/styles/_buttons.scss index 1282557dec..5efb525fc6 100644 --- a/site/assets/styles/_buttons.scss +++ b/site/assets/styles/_buttons.scss @@ -1,9 +1,5 @@ // Button styles -// Button color variables -$btn-primary-bg: $validmind-pink; -$btn-primary-border: $validmind-pink; - // Other button styles .button { color: $validmind-pink; diff --git a/site/assets/styles/_codeblocks.scss b/site/assets/styles/_codeblocks.scss index 06f2a2534d..875ba032c6 100644 --- a/site/assets/styles/_codeblocks.scss +++ b/site/assets/styles/_codeblocks.scss @@ -1,9 +1,5 @@ // Code block and syntax highlighting styles -// Code block color variables -$code-color: $validmind-teal; -$code-block-bg: rgba($validmind-teal, 0.125); - // General code styling code { color: $code-color; diff --git a/site/assets/styles/_links.scss b/site/assets/styles/_links.scss index 05618a5bc1..a2a080632a 100644 --- a/site/assets/styles/_links.scss +++ b/site/assets/styles/_links.scss @@ -1,8 +1,5 @@ // Link styles -// Base link styles -$link-color: #DE257E; - a, a:link, a:visited { text-decoration: none !important; } diff --git a/site/assets/styles/_mermaid.scss b/site/assets/styles/_mermaid.scss index 817b24fe09..7032cad0b0 100644 --- a/site/assets/styles/_mermaid.scss +++ b/site/assets/styles/_mermaid.scss @@ -1,15 +1,5 @@ // Mermaid Diagram Styles -// Mermaid theme variables -$mermaid-node-bg-color: #FAFBFB; -$mermaid-node-fg-color: #083E44; -$mermaid-edge-color: #083E44; -$mermaid-fg-color: #36454F; -$mermaid-fg-color--lighter: #083E44; -$mermaid-fg-color--lightest: #FAFBFB; -$mermaid-label-bg-color: #FAFBFB; -$mermaid-label-fg-color: #36454F; - :root { --mermaid-node-radius: 5px; } diff --git a/site/assets/styles/_navbar.scss b/site/assets/styles/_navbar.scss index b3f8f8a0a4..6e6602886e 100644 --- a/site/assets/styles/_navbar.scss +++ b/site/assets/styles/_navbar.scss @@ -1,11 +1,5 @@ // Navbar Variables -// Navbar color variables -$navbar-bg: white; -$navbar-brand-color: $validmind-pink; -$navbar-nav-link-color: $validmind-teal; -$navbar-nav-link-hover-color: $validmind-pink; - // Navbar styles .navbar-brand img { height: 100%; diff --git a/site/assets/styles/_sidebar.scss b/site/assets/styles/_sidebar.scss index 1b85356701..2757750607 100644 --- a/site/assets/styles/_sidebar.scss +++ b/site/assets/styles/_sidebar.scss @@ -1,10 +1,5 @@ // Sidebar Variables -// Sidebar color variables -$sidebar-bg: $validmind-bg-light; -$sidebar-fg: $validmind-text-muted; -$sidebar-hl: $validmind-pink; - // Sidebar link styles .sidebar-item a .menu-text { text-transform: none; diff --git a/site/assets/styles/_toc.scss b/site/assets/styles/_toc.scss index 15e736b092..469724f3e2 100644 --- a/site/assets/styles/_toc.scss +++ b/site/assets/styles/_toc.scss @@ -1,9 +1,5 @@ // Table of Contents Variables -// TOC color variables -$toc-color: $validmind-text-muted; -$toc-active-border: $validmind-pink; - // Table of Contents link styles nav#TOC ul > li > a.nav-link { color: $toc-color !important; diff --git a/site/assets/styles/_validmind-colors.scss b/site/assets/styles/_validmind-colors.scss deleted file mode 100644 index 021a9c149b..0000000000 --- a/site/assets/styles/_validmind-colors.scss +++ /dev/null @@ -1,13 +0,0 @@ -// ValidMind Color Palette - -// Base colors -$body-color: #222425; - -// 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; diff --git a/site/theme.scss b/site/theme.scss index 7af79eb704..ab93b2598a 100644 --- a/site/theme.scss +++ b/site/theme.scss @@ -1,8 +1,51 @@ /*-- scss:defaults --*/ -/* Import modular SCSS files -*/ -@import 'assets/styles/validmind-colors'; +// 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; + +// Base link styles +$link-color: #DE257E; + +// Code block color variables +$code-color: $validmind-teal; +$code-block-bg: rgba($validmind-teal, 0.125); + +// Button color variables +$btn-primary-bg: $validmind-pink; +$btn-primary-border: $validmind-pink; + +// Mermaid theme variables +$mermaid-node-bg-color: #FAFBFB; +$mermaid-node-fg-color: #083E44; +$mermaid-edge-color: #083E44; +$mermaid-fg-color: #36454F; +$mermaid-fg-color--lighter: #083E44; +$mermaid-fg-color--lightest: #FAFBFB; +$mermaid-label-bg-color: #FAFBFB; +$mermaid-label-fg-color: #36454F; + +// Navbar color variables +$navbar-bg: white; +$navbar-brand-color: $validmind-pink; +$navbar-nav-link-color: $validmind-teal; +$navbar-nav-link-hover-color: $validmind-pink; + +// Sidebar color variables +$sidebar-bg: $validmind-bg-light; +$sidebar-fg: $validmind-text-muted; +$sidebar-hl: $validmind-pink; + +// TOC color variables +$toc-color: $validmind-text-muted; +$toc-active-border: $validmind-pink; + +// Import modular SCSS files @import 'assets/styles/banner'; @import 'assets/styles/navbar'; @import 'assets/styles/sidebar'; From 78b5e8ce0ec20ed1249622503fe6f271993d74bb Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Fri, 26 Sep 2025 10:34:41 -0700 Subject: [PATCH 23/25] Correctly fix link color and underline --- site/assets/styles/_links.scss | 4 ---- site/theme.scss | 2 ++ 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/site/assets/styles/_links.scss b/site/assets/styles/_links.scss index a2a080632a..be785d3f22 100644 --- a/site/assets/styles/_links.scss +++ b/site/assets/styles/_links.scss @@ -4,10 +4,6 @@ a, a:link, a:visited { text-decoration: none !important; } -a:hover { - text-decoration: underline 2px solid $validmind-teal; -} - // Special link hover states a.footnote-ref:hover, a.anchorjs-link:hover { text-decoration: none; diff --git a/site/theme.scss b/site/theme.scss index ab93b2598a..f6728e507d 100644 --- a/site/theme.scss +++ b/site/theme.scss @@ -11,6 +11,8 @@ $validmind-text-muted: #585F60; // Base link styles $link-color: #DE257E; +$link-decoration: none; +$link-hover-decoration: underline 2px solid $validmind-teal !important; // Bootstrap rule not default // Code block color variables $code-color: $validmind-teal; From 175c4e83204ff03cb206ccb99fd86bbc804e65e0 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Fri, 26 Sep 2025 10:38:13 -0700 Subject: [PATCH 24/25] Fix hover text color --- site/theme.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/site/theme.scss b/site/theme.scss index f6728e507d..727d38dbfa 100644 --- a/site/theme.scss +++ b/site/theme.scss @@ -11,6 +11,7 @@ $validmind-text-muted: #585F60; // 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 From 1a69c7ad09c9d563b10f9d5aa442c450180d2036 Mon Sep 17 00:00:00 2001 From: Nik Richers Date: Fri, 26 Sep 2025 12:10:38 -0700 Subject: [PATCH 25/25] Add codeblock SCSS defaults to themes.scss --- site/theme.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/site/theme.scss b/site/theme.scss index 727d38dbfa..c94e468775 100644 --- a/site/theme.scss +++ b/site/theme.scss @@ -17,7 +17,10 @@ $link-hover-decoration: underline 2px solid $validmind-teal !important; // Boots // Code block color variables $code-color: $validmind-teal; -$code-block-bg: rgba($validmind-teal, 0.125); +$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;