refactor / mkdocs style

Author: nitya

docs/assets/extra.css

@@ -32,11 +32,64 @@
 
 /* Alternative full-height gradient for the header */
 .md-header {
-  position: relative;
+  position: sticky !important;
+  top: 0 !important;
+  z-index: 100 !important;
 }
 
 /* Make sure the gradient looks good in both light and dark modes */
 [data-md-color-scheme="default"] .custom-gradient-banner,
 [data-md-color-scheme="slate"] .custom-gradient-banner {
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
+
+/* Custom styles for task and note admonitions with purple-pink color */
+.md-typeset .admonition.task,
+.md-typeset details.task {
+  border-color: #7C4ACD;
+}
+
+.md-typeset .task > .admonition-title,
+.md-typeset .task > summary {
+  background-color: rgba(124, 74, 205, 0.1);
+}
+
+.md-typeset .task > .admonition-title::before,
+.md-typeset .task > summary::before {
+  background-color: #7C4ACD;
+}
+
+.md-typeset .admonition.note,
+.md-typeset details.note {
+  border-color: #7C4ACD;
+}
+
+.md-typeset .note > .admonition-title,
+.md-typeset .note > summary {
+  background-color: rgba(124, 74, 205, 0.1);
+}
+
+.md-typeset .note > .admonition-title::before,
+.md-typeset .note > summary::before {
+  background-color: #7C4ACD;
+}
+
+/* Make navigation sidebar sticky */
+.md-sidebar {
+  position: sticky !important;
+  top: 4.8rem !important; /* Adjust based on the header height */
+  height: calc(100vh - 4.8rem) !important;
+  overflow-y: auto !important;
+}
+
+/* Ensure sidebar scrolls properly when content overflows */
+.md-sidebar__scrollwrap {
+  height: 100% !important;
+}
+
+/* Make tabs sticky */
+.md-tabs {
+  position: sticky !important;
+  top: 4.8rem !important; /* Height of the header */
+  z-index: 99 !important;
+}

docs/overrides/partials/header.html

@@ -44,27 +44,20 @@ theme:
 
   # Theme Modes ...............................................
   palette:
-    # Palette toggle for automatic mode
-    - media: "(prefers-color-scheme)"
-      toggle:
-        icon: material/brightness-auto
-        name: Switch to light mode
     # Palette toggle for light mode
-    - media: "(prefers-color-scheme: light)"
-      scheme: default 
+    - scheme: default 
       primary: blue
       accent: pink
       toggle:
-        icon: material/brightness-2
+        icon: material/brightness-7
         name: Switch to dark mode
     # Palette toggle for dark mode
-    - media: "(prefers-color-scheme: dark)"
-      scheme: slate
+    - scheme: slate
       primary: green
       accent: cyan
       toggle:
         icon: material/brightness-4
-        name: Switch to system preference 
+        name: Switch to light mode 
 
   # Theme Features ...............................................
   features:
@@ -73,14 +66,16 @@ theme:
     - navigation.instant.progress   # load progress indicator
     - navigation.tracking           # tracks anchor tags in URL
     - navigation.tabs               # tabbed on desktop, single in mobile    
-    - navigation.tabs.sticky        # tabs stick when scrolling downtheme:
+    - navigation.tabs.sticky        # tabs stick when scrolling down
+    - header.sticky                 # header sticks to top when scrolling
     - navigation.path               # add breadcrumbs
     - navigation.indexes            # default index.md in folder is section page
     - navigation.top
     - toc.follow
     - navigation.footer
     - content.code.copy             # allow copy-paste from codeblocks
     - content.tabs.link             # Ensures site-wide switch to same tab name
+    - navigation.sticky             # sticky sidebar navigation
 
 # Extras  ...............................................
 extra: