Improve navigation for Python API and Public REST API — DO NOT MERGE

site/.gitignore

@@ -5,4 +5,5 @@
 /.luarc.json
 
 # Environment
-site/.env
+site/.env
+**/*.quarto_ipynb

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:
                 <li><a href="/guide/guides.qmd#access">Access</a></li>
                 <li><a href="/guide/guides.qmd#configuration">Configuration</a></li>
                 <li><a href="/guide/guides.qmd#model-inventory">Model inventory</a></li>
-              </ul>
-              <ul class="footer-user-guides-column-2">
                 <li><a href="/guide/guides.qmd#model-documentation">Model documentation</a></li>
                 <li><a href="/guide/guides.qmd#model-validation">Model validation</a></li>
-                <li><a href="/guide/guides.qmd#model-workflows">Model workflows</a></li>
               </ul>
-              <ul class="footer-user-guides-column-3">
-                <li><a href="/guide/guides.qmd#reporting">Reporting</a></li>
+              <ul class="footer-user-guides-column-2">
+                <li><a href="/guide/templates/working-with-document-templates.qmd">Templates</a></li>
+                <li><a href="/guide/guides.qmd#model-workflows">Workflows</a></li>
                 <li><a href="/guide/guides.qmd#monitoring">Monitoring</a></li>
+                <li><a href="/guide/guides.qmd#reporting">Reporting</a></li>
                 <li><a href="/guide/guides.qmd#attestation">Attestation</a></li>
               </ul>
             </div>
@@ -194,7 +195,8 @@ website:
               <li><a href="/developer/validmind-library.qmd#for-model-development">For developers</a></li>
               <li><a href="/developer/validmind-library.qmd#for-model-validation">For validators</a></li>
               <li><a href="/developer/validmind-library.qmd#try-the-code-samples">Code samples</a></li>
-              <li><a href="/validmind/validmind.qmd">API Reference</a></li>
+              <li><a href="/validmind/validmind.qmd">Python API</a></li>
+              <li><a href="/reference/validmind-rest-api-vm.qmd">Public REST API</a></li>
             </ul>
           </div>
       - text: |

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;
+  }
+

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;
 }

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,64 +12,63 @@
   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;
   text-align: center;
 }
 
 .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;
   line-height: 35px;
 }
 
 .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;

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;
 }

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;
+  }
+}