Standardized blue color

Author: jlian

layouts/posts/single.html

@@ -16,8 +16,8 @@
     </article>
     {{ if $hasToc }}
     <aside class="dn db-l w-30-l pv4 pl4">
-      <div class="toc-container">
-        <div class="toc-heading f6 ttu tracked mv3">On this page</div>
+      <div class="toc-container blue">
+        <div class="toc-heading f6 ttu tracked mv3 light-blue">On this page</div>
         {{ $toc }}
       </div>
     </aside>

static/css/style.css

@@ -302,19 +302,6 @@ article :where(table):not(:where(.gist *)) {
     border-color: #e5e7eb;
     color: #0f172a !important;
   }
-  .toc-container {
-    color: #dee3f0;
-  }
-  .toc-container .toc-heading {
-    color: #e2e8f0;
-  }
-  .toc-container a:hover,
-  .toc-container a:focus {
-    color: #f1f5f9;
-  }
-  .toc-container a.active {
-    color: #93c5fd;
-  }
   article thead th {
     background: #1f2933;
     color: #f8f8f2;
@@ -354,6 +341,25 @@ article :where(table):not(:where(.gist *)) {
     fill: currentColor !important;
     stroke: none !important;
   }
+  .toc-container {
+    color: #dee3f0;
+  }
+  .toc-container .toc-heading {
+    color: #e2e8f0;
+  }
+  .toc-container a {
+    color: inherit;
+  }
+  .toc-container a:visited {
+    color: inherit;
+  }
+  .toc-container a:hover,
+  .toc-container a:focus {
+    color: #96ccff;
+  }
+  .toc-container a.active {
+    color: #77b2e3;
+  }
 }
 
 .toc-container {
@@ -393,13 +399,17 @@ article :where(table):not(:where(.gist *)) {
   transition: color 0.15s ease;
 }
 
+.toc-container a:visited {
+  color: inherit;
+}
+
 .toc-container a:hover,
 .toc-container a:focus {
-  color: #5679da;
+  color: #96ccff;
 }
 
 .toc-container a.active {
-  color: #1d4ed8;
+  color: #357edd;
   font-weight: 500;
 }
 

static/js/post-enhancements.js

@@ -120,7 +120,9 @@ function enhanceToc() {
   if (!tocNav) return;
 
   const links = Array.from(tocNav.querySelectorAll('a[href^="#"]'));
-  if (!links.length || !('IntersectionObserver' in window)) return;
+  if (!links.length) return;
+
+  if (!('IntersectionObserver' in window)) return;
 
   const targets = links
     .map((link) => {