Enhance navigation highlighting and styling for improved user experience

Author: savini98

index.html

@@ -93,7 +93,7 @@ <h1>Jaseci: An Open-Source AI-Native Language and Runtime Stack</h1>
           <div class="text-block">
             <p>
               Agentic AI development is broken. Too many tools, too many languages, too much glue code.
-              <a href="https://www.jaseci.org/" target="_blank" rel="noopener"><strong>Jaseci</strong></a> fixes this: an open-source language and runtime extending Python with native AI
+              <strong>Jaseci</strong> fixes this: an open-source language and runtime extending Python with native AI
               and scaling constructs. Prompt less, smile more. No boilerplate, no DevOps, no manual prompts.
             </p>
           </div>
@@ -113,7 +113,7 @@ <h2>Tutorial Themes</h2>
               <div class="theme-label">Theme 1</div>
               <div class="theme-title">Hands-On Agentic AI Development</div>
               <div class="theme-audience">For developers and students</div>
-              <div class="theme-desc">Write <a href="https://byllm.jaseci.org/" target="_blank" rel="noopener"><code class="code-hl">by llm()</code></a> and the compiler writes the prompts. Build multi-agent systems with walkers on graphs. Zero boilerplate.</div>
+              <div class="theme-desc">Write <code class="code-hl">by llm()</code> and the compiler writes the prompts. Build multi-agent systems with walkers on graphs. Zero boilerplate.</div>
               <div class="theme-glow"></div>
             </div>
             <div class="theme-card theme-2">

script.js

@@ -50,15 +50,28 @@ document.addEventListener('DOMContentLoaded', () => {
     sections.forEach(current => {
       const sectionTop = current.offsetTop - 100;
       const sectionId = current.getAttribute('id');
+      
+      // Sidebar navigation
       const navLink = document.querySelector(`.nav-links a[href="#${sectionId}"]`);
-      if (navLink) {
-        if (scrollY > sectionTop && scrollY <= sectionTop + current.offsetHeight) {
+      // On this page navigation
+      const onThisPageLink = document.querySelector(`.on-this-page a[href="#${sectionId}"]`);
+      
+      if (scrollY > sectionTop && scrollY <= sectionTop + current.offsetHeight) {
+        // Update sidebar nav
+        if (navLink) {
           document.querySelectorAll('.nav-links a[href^="#"]').forEach(a => a.classList.remove('active'));
           navLink.classList.add('active');
         }
+        // Update on this page nav
+        if (onThisPageLink) {
+          document.querySelectorAll('.on-this-page a').forEach(a => a.classList.remove('active'));
+          onThisPageLink.classList.add('active');
+        }
       }
     });
   }
 
   window.addEventListener('scroll', highlightNavigation);
+  // Run once on load to highlight initial section
+  highlightNavigation();
 });

styles.css

@@ -945,11 +945,19 @@ h2 {
   color: var(--text-muted);
   text-decoration: none;
   font-size: 0.88rem;
-  transition: color 0.2s;
+  transition: color 0.2s, border-color 0.2s;
+  border-left: 2px solid transparent;
+  margin-left: -2px;
 }
 
 .on-this-page li a:hover { color: var(--primary-color); }
 
+.on-this-page li a.active {
+  color: var(--primary-color);
+  border-left-color: var(--primary-color);
+  font-weight: 600;
+}
+
 /* Footer */
 .site-footer {
   padding: 40px;
@@ -958,6 +966,16 @@ h2 {
   border-top: 1px solid var(--border-color);
 }
 
+.site-footer a {
+  color: var(--primary-color);
+  text-decoration: none;
+  transition: opacity 0.2s;
+}
+
+.site-footer a:hover {
+  opacity: 0.8;
+}
+
 /* Mobile menu */
 #mobile-menu-btn { display: block; margin-right: 16px; }
 #mobile-close-btn { display: none; }