Guides dark mode fixes (rails#51372)

* Disabling font-smoothing as it reduces legibility in post-deploy testing

The font ends up feeling lighter when this is applied in both light and dark mode. While it provides more precise font rendering, it doesn’t seem to be actually helping on the body text here, so I think we should strike it.

* Dark mode fixes and improvements

* Removing highlight behind code in TD

* more subtle subCol background shift

* White H1, h2 in dark mode

* Fixing anchor vs h2 anchor

* Fixing a pre/code regression on table code lines

* Fixing Safari faux-bold issue in code blocks.

* Removing double line on index

* Removing footer inversion in dark mode

* Fixing layout width for larger screens (mimics existing)

* ADditional fixes on layout

* First stab at scrollbar colors

* White Rails HR for dark mode

* Compresison on new construction sign SVG

* Fixing subCol oddities

* Fixing nav spacing regression

Author: jathayde

guides/assets/images/hr_rails_white.svg

@@ -7,26 +7,53 @@
 
 @media (prefers-color-scheme: dark) {
   body.guide {
+
     background-color: $gray-900;
     color: #fff;
 
+    &::-webkit-scrollbar {
+      width: 12px;
+      background-color: transparent;
+    }
+    
+    &::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+        border-radius: 10px;
+        background-color: $gray-900;
+      }
+    
+    &::-webkit-scrollbar-thumb {
+      background-color: $gray-500;
+        border-radius: 10px;
+        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+    }
+    h1 {
+      color: #fff;
+    }
+
     a {
       &:link {
-        color: $rf-brand-light;
+        color: $rf-brand-lightest;
       }
       &:hover,
       &:active {
-        color: $rf-brand-darker;
+        color: $rf-brand-lighter;
       } // &:hover, &:active
       &:visited {
-        color: $rf-brand;
+        color: $rf-brand-lightest;
       } // &:visited
     } // a
+
+    h2 a {
+      &:link,
+      &:visited {
+        color: #fff;
+      } 
+    } // h2 a
 
     table {
       th {
-        color: $gray-900;
-        background-color: $gray-200;
+        background-color: $gray-1000;
       } // th
 
       tr {
@@ -44,13 +71,27 @@
       } // a, a:link, a:visited
     } // h3
 
+    hr {
+      background: url("../images/hr_rails_white.svg") center no-repeat;
+    }
+
     pre, code {
-      background-color: $gray-200;
-      color: $gray-200;
+      background-color: $gray-1000;
+      color: #fff;
     } // pre, code
 
-    p code, ul code, li code, h2 code, h3 code, h4 code, h5 code, td code {
-      background-color: $gray-600;
+    p code, ul code, li code {
+      background-color: $gray-650;
+      color: #fff;
+    }
+
+    td code {
+      background-color: transparent;
+    }
+
+    h2 code, h3 code, h4 code, h5 code {
+      background-color: transparent;
+      color: #fff;
     }
 
     nav#topNav {
@@ -114,16 +155,12 @@
 
           a:hover,
           a:active {
-            color: $rf-brand-light;
+            color: $rf-brand-lighter;
           } // a:hover
         } // dd
       } // .guides-section
     } // #guides
 
-    footer#page_footer {
-      background-color: $gray-200;
-      color: $gray-900;
-    } // footer#page_footer
 
     #feature {
       background-color: $gray-800;
@@ -133,9 +170,28 @@
       }
 
       #subCol {
-        background-color: $gray-700; 
-
-        ol {
+        background-color: $gray-800; 
+
+        ol.chapters {
+          &::-webkit-scrollbar {
+            background-color: $gray-700;
+          }
+          
+          &::-webkit-scrollbar-track {
+            background-color: $gray-700;
+            border-radius: 5px;
+            box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+          }
+          
+          &::-webkit-scrollbar-thumb {
+            background-image: -webkit-gradient(linear,
+                            left bottom,
+                            left top,
+                            color-stop(0.44, $rf-brand-lightest),
+                            color-stop(0.86, $rf-brand-lighter));
+            border-radius: 5px;
+            box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+          }
           li {
             a,
             a:link,
@@ -145,15 +201,41 @@
 
             a:hover,
             a:active {
-              color: $rf-brand-light;
+              color: $rf-brand-lighter;
             } // a
           } // li
         } // ol
       } // #subCol
     } // #feature
 
-    .interstitial.code {
-      background-color: $gray-200;
-    }
+    .interstitial {
+      &.code {
+        background-color: $gray-1000;
+        color: $gray-200;
+      }
+      &.note,
+      &.work-in-progress,
+      &.todo {
+        border-color: $note-dark;
+        background-color: $note-bkgnd-dark;
+      }
+    
+      &.info {
+        border-color: $tip-dark;
+        background-color: $tip-bkgnd-dark;
+      }
+    
+      &.warning {
+        border-color: $stop-dark;
+        background-color: $stop-bkgnd-dark;
+      }
+    
+      &.question {
+        border-color: $gray-600;
+        background-color: $gray-700;
+      }
+    
+
+    }  
   } // body.guide
 } // @media (prefers-color-scheme: dark