Enhance UI styling and fix navigation issues

- Implement contextual link styling with subtle crimson underlines
- Add left-aligned table captions for better readability
- Fix blue hover colors on sidebar dropdown arrows
- Add comprehensive Bootstrap icon styling for navigation
- Improve link hierarchy: inherit for content, crimson for UI elements
- Clean up navbar configuration

book/assets/styles/style.scss

@@ -10,14 +10,46 @@ $font-size-root: 16px !default;
 
 /*-- scss:rules --*/
 
-/* Make links default color, only active/hover states crimson */
+/* Contextual link styling for better UX */
 a {
-  color: inherit;
+  color: inherit; /* Content links blend with text */
   text-decoration: underline;
+  text-decoration-color: rgba(165, 28, 48, 0.4); /* Subtle crimson underline */
+  transition: all 0.2s ease;
 }
 
 a:hover {
   color: #A51C30 !important;
+  text-decoration-color: #A51C30;
+}
+
+/* Navigation and UI links should be crimson */
+.navbar a,
+.sidebar a,
+nav a,
+.nav-link,
+.btn-link,
+.quarto-title-banner a {
+  color: #A51C30 !important;
+}
+
+.navbar a:hover,
+.sidebar a:hover,
+nav a:hover,
+.nav-link:hover,
+.btn-link:hover,
+.quarto-title-banner a:hover {
+  color: #8B1538 !important; /* Darker on hover */
+}
+
+/* Fix table captions - left align instead of center */
+.table-caption,
+table caption,
+.caption,
+.figure-caption,
+figcaption {
+  text-align: left !important;
+  margin-bottom: 0.5rem;
 }
 
 /* Active sidebar links should be crimson */
@@ -91,4 +123,103 @@ a:hover {
   color: #A51C30 !important;
 }
 
+/* Fix collapsible arrow hover states */
+details.fbx-default > summary,
+details.fbx-answer > summary,
+details.fbx-question > summary,
+details > summary {
+  color: inherit !important;
+}
+
+details.fbx-default > summary:hover,
+details.fbx-answer > summary:hover,
+details.fbx-question > summary:hover,
+details > summary:hover {
+  color: inherit !important;
+}
+
+/* Prevent arrows from becoming blue links */
+details.fbx-default > summary::after,
+details.fbx-answer > summary::after,
+details.fbx-question > summary::after,
+details > summary::after {
+  color: inherit !important;
+}
+
+/* Override Bootstrap nav defaults for sidebar */
+.sidebar nav .nav-link,
+.sidebar .nav .nav-link,
+.sidebar-navigation .nav-link,
+.sidebar .navbar-nav .nav-link {
+  --bs-nav-link-color: inherit !important;
+  --bs-nav-link-hover-color: #A51C30 !important;
+  color: inherit !important;
+}
+
+.sidebar nav .nav-link:hover,
+.sidebar .nav .nav-link:hover,
+.sidebar-navigation .nav-link:hover,
+.sidebar .navbar-nav .nav-link:hover {
+  color: #A51C30 !important;
+}
+
+/* Target specific sidebar section toggles */
+.sidebar nav[role="doc-toc"] a,
+.sidebar .sidebar-navigation a,
+.sidebar-navigation a {
+  color: inherit !important;
+}
+
+.sidebar nav[role="doc-toc"] a:hover,
+.sidebar .sidebar-navigation a:hover,
+.sidebar-navigation a:hover {
+  color: #A51C30 !important;
+}
+
+/* Fix Bootstrap icons in sidebar dropdown arrows */
+.sidebar .bi,
+.sidebar [class^="bi-"],
+.sidebar [class*=" bi-"],
+.sidebar i.bi,
+.sidebar-navigation .bi,
+.sidebar-navigation [class^="bi-"],
+.sidebar-navigation [class*=" bi-"],
+.sidebar-navigation i.bi {
+  color: inherit !important;
+}
+
+.sidebar .bi:hover,
+.sidebar [class^="bi-"]:hover,
+.sidebar [class*=" bi-"]:hover,
+.sidebar i.bi:hover,
+.sidebar-navigation .bi:hover,
+.sidebar-navigation [class^="bi-"]:hover,
+.sidebar-navigation [class*=" bi-"]:hover,
+.sidebar-navigation i.bi:hover {
+  color: inherit !important;
+}
+
+/* Specifically target caret dropdown icons */
+.sidebar .bi-caret-down-fill,
+.sidebar .bi-caret-down,
+.sidebar .bi-caret-right,
+.sidebar .bi-caret-right-fill,
+.sidebar-navigation .bi-caret-down-fill,
+.sidebar-navigation .bi-caret-down,
+.sidebar-navigation .bi-caret-right,
+.sidebar-navigation .bi-caret-right-fill {
+  color: inherit !important;
+}
+
+.sidebar .bi-caret-down-fill:hover,
+.sidebar .bi-caret-down:hover,
+.sidebar .bi-caret-right:hover,
+.sidebar .bi-caret-right-fill:hover,
+.sidebar-navigation .bi-caret-down-fill:hover,
+.sidebar-navigation .bi-caret-down:hover,
+.sidebar-navigation .bi-caret-right:hover,
+.sidebar-navigation .bi-caret-right-fill:hover {
+  color: inherit !important;
+}
+
 

book/config/_quarto-html.yml

@@ -52,7 +52,6 @@ website:
   navbar:
     background: light
     logo: "assets/images/icons/favicon.png"
-    search: true
     pinned: true
     collapse: true
     collapse-below: "md"
@@ -66,7 +65,7 @@ website:
         href: contents/labs/kits.qmd
       - icon: download
         text: "PDF"
-        href: /Machine-Learning-Systems.pdf
+        href: /pdf
         target: _blank
     tools:
       - icon: heart
@@ -99,7 +98,6 @@ website:
       # <!-- Frontmatter -->
       # <!------------------------------------------------->
       
-      - text: "---"
       - text: "Homepage"
         href: index.qmd
       - text: "Foreword"