Guides layout fixes (rails#51385)

* Moving $gray-900 slightly darker to increase contrast ratios in body

* Hn to white in dark mode

* “Guides” logo word mark to white

* Fixing yellow block overlap in subCol

* Setting sidebar for intermediate desktop range

* Fixing missing bottom border on interstitials due to dd collision

* Simplifying layout, adding break points

* pointer cursor on code copy

* Fixing border regression on code interstitial

Author: jathayde

guides/assets/stylesrc/_dark.scss

@@ -63,11 +63,11 @@
       }
     } // table
 
-    h3 {
+    h3, h4, h5, h6 {
       a,
       a:link,
       a:visited {
-        color: $gray-100;
+        color: #fff;
       } // a, a:link, a:visited
     } // h3
 
@@ -110,6 +110,9 @@
     header#page_header {
       nav#feature_nav {
         .header-logo {
+          a, a:link, a:visited {
+            color: #fff;
+          }
           span#version_switcher {
             color: $gray-400;
 

guides/assets/stylesrc/_main.scss

@@ -55,29 +55,11 @@ body.guide {
     hyphenate-limit-chars: 6 3 2; /* Not Safari */
     hyphenate-limit-last: always;
 
-    @include media('>tablet') {
-      // On larger screens, set a width of 45-75 characters, using em as ch 
-      // has too much variation between various fonts
-      min-width: 23em;
-      max-width: 38em;
-    }
-
     margin: 0 0 0.75em 0; // Space after paragraph
     text-align: left;
 
   } // p
 
-  table,
-  ul,
-  .interstitial {
-    @include media('>tablet') {
-      min-width: 23em;
-      max-width: 38em;
-      text-align: left;
-      margin-left: 0 !important;
-    }
-  }
-
   // Links
 
   a {
@@ -271,7 +253,9 @@ body.guide {
       border-bottom: 1px solid $gray-500;
       margin: 0 0 1em 0;
 
-      &:last-child {border-bottom: none;}
+      &:last-child {
+        border-bottom: none;
+      }
     } // dd
   } // dl
 
@@ -342,11 +326,10 @@ body.guide {
     :where(body[dir="ltr"]) & { text-align: left; }
     :where(body[dir="rtl"]) & { text-align: right; }
 
-    @include media('>desktop') {
-      width: 60vw;
-      max-width: calc(55rem + 400px);
+    @include media('>desktop') { // 1024
+      max-width: calc(55rem + 420px);
       margin: 0 auto;
-      padding-right: 400px;
+      padding-right: 470px;
     }
   } // .wrapper
 
@@ -682,18 +665,11 @@ body.guide {
     }
   }
 
-  main#container {
-    @include media('>desktop') {
-      // padding-right: 400px;
-    }
-  }
-
   #feature {
     background-color: $gray-100;
 
     @include media('>desktop') {
       background-color: #fff;
-      // padding-right: 400px;
     }
 
     #subCol {
@@ -706,10 +682,18 @@ body.guide {
         display: block;
         position: fixed;
           top: 100px;
-          right: calc(40vw - 400px);
+          right: 50px;
         max-height: calc(100vh - 90px);
-        width: 30vw;
-        max-width: 380px;
+        width: 400px;
+      }
+
+      @include media('>desktop-ultra-wide') {
+        right: calc(30vw - 400px);
+      }
+
+      @include media('>desktop-hd') { // 1920
+      
+        right: calc(40vw - 400px);
       }
 
       h3.chapter img {
@@ -768,12 +752,15 @@ body.guide {
             margin-top: 0.5em;
             margin-bottom: 0.75em;
             padding-inline-start: 1em;
-            max-width: unset;
+            @include media('>desktop') {
+              max-width: 310px;
+              width: 310px;
+            }
 
             li {
               font-weight: 400;
               @include media('>desktop') {
-                width: 320px;
+                width: 310px;
               }
             } // li
           } // ul

guides/assets/stylesrc/components/_code-container.scss

@@ -13,6 +13,8 @@ intermediate whitespace looks uniform. */
   background-size: 36px 36px;
   border-radius: $base-border-radius;
   border: 2px solid $gray-500;
+  border-style: solid !important;
+  border-width: 2px !important;
   min-height: calc(36px + 1.2em);
   margin: 2em auto;
   padding: 0.75em !important;
@@ -33,7 +35,7 @@ intermediate whitespace looks uniform. */
   }
 
   &.code {
-    border: none;
+    border: none !important;
     background-color: $gray-900;
     min-height: auto; // remove if icon is restored
     padding-left: 1em !important; // remove if icon is restored
@@ -42,6 +44,7 @@ intermediate whitespace looks uniform. */
 
     button.clipboard-button {
       color: $gray-100;
+      cursor: pointer;
       background-color: $gray-700;
       border: 1px solid $gray-500;
       border-radius: 4px;

guides/assets/stylesrc/style.scss

@@ -51,7 +51,7 @@ $gray-600: #666666;
 $gray-650: #505050;
 $gray-700: #3A3939;
 $gray-800: #343434;
-$gray-900: #2E2E2E;
+$gray-900: #292929;
 $gray-1000: #181818;
 
 $note: #FFD600;