completely redesigned notes update

custom.css

@@ -1,6 +1,97 @@
 /* Custom styling for IT Learning Notes */
 
-/* Table of Contents styling */
+/* Right sidebar table of contents improvements */
+.nav-chapters {
+    min-width: 30px !important;
+}
+
+.pagetoc {
+    position: fixed;
+    top: 70px;
+    right: 10px;
+    width: 200px;
+    background: rgba(240, 242, 245, 0.9);
+    border-radius: 5px;
+    border: 1px solid #e1e4e8;
+    font-size: 0.8em;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    padding: 10px 10px;
+    max-height: calc(100vh - 120px);
+    overflow-y: auto;
+}
+
+.pagetoc h2 {
+    font-size: 1em;
+    margin: 0 0 8px 0;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #e1e4e8;
+}
+
+.pagetoc ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0 0 0 10px;
+    line-height: 1.3;
+}
+
+.pagetoc ul li {
+    margin: 0 0 4px 0;
+}
+
+.pagetoc a {
+    color: #4183c4;
+    text-decoration: none;
+    display: block;
+    padding: 2px 5px;
+    border-radius: 3px;
+    transition: background-color 0.15s;
+    font-weight: normal;
+}
+
+.pagetoc a:hover {
+    background-color: rgba(65, 131, 196, 0.1);
+    text-decoration: none;
+}
+
+/* Adjust main content to make room for TOC sidebar */
+.content {
+    padding-right: 230px !important;
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 1250px) {
+    .pagetoc {
+        width: 180px;
+    }
+    
+    .content {
+        padding-right: 200px !important;
+    }
+}
+
+@media screen and (max-width: 1100px) {
+    .pagetoc {
+        width: 150px;
+        font-size: 0.75em;
+        padding: 8px;
+    }
+    
+    .content {
+        padding-right: 170px !important;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .pagetoc {
+        display: none;
+    }
+    
+    .content {
+        padding-right: 15px !important;
+    }
+}
+
+/* Table of Contents styling for in-page TOC */
 .toc {
     background-color: #f8f9fa;
     border: 1px solid #eaecef;
@@ -18,87 +109,6 @@
     margin: 0.5em 0;
 }
 
-/* Sidebar Table of Contents styling */
-.sidebar-right {
-    font-size: 0.85em;
-    width: 290px !important;
-}
-
-.sidebar-right .table-of-contents {
-    background-color: rgba(240, 242, 245, 0.8);
-    border-radius: 5px;
-    font-size: 0.9em;
-    padding: 0.8em;
-    max-height: calc(100vh - 120px);
-    overflow-y: auto;
-}
-
-.sidebar-right h2 {
-    font-size: 1.2em;
-    margin: 0 0 0.6em 0;
-    padding-bottom: 0.3em;
-    border-bottom: 1px solid #e1e4e8;
-}
-
-.sidebar-right ul {
-    margin: 0;
-    padding: 0 0 0 1em;
-    line-height: 1.4;
-}
-
-.sidebar-right li {
-    margin: 0.3em 0;
-}
-
-.sidebar-right a {
-    display: block;
-    padding: 0.2em 0.4em;
-    border-radius: 3px;
-    transition: background-color 0.15s ease;
-    text-decoration: none;
-    color: #4183c4;
-}
-
-.sidebar-right a:hover {
-    background-color: rgba(65, 131, 196, 0.1);
-    text-decoration: none;
-}
-
-/* Collapsed view indicator */
-.sidebar-right .category-indicator {
-    display: none;
-}
-
-/* Make sidebar more compact on smaller screens */
-@media screen and (max-width: 1300px) {
-    .sidebar-right {
-        width: 240px !important;
-    }
-    
-    .sidebar-right h2 {
-        font-size: 1.1em;
-    }
-    
-    .sidebar-right ul {
-        padding-left: 0.5em;
-    }
-}
-
-/* Responsive adjustments */
-@media screen and (max-width: 1100px) {
-    .sidebar-right {
-        width: 200px !important;
-    }
-    
-    .sidebar-right .table-of-contents {
-        padding: 0.6em;
-    }
-    
-    .sidebar-right h2 {
-        font-size: 1em;
-    }
-}
-
 /* Back to top link styling */
 a[href^="#"] {
     text-decoration: none;