Adjustments to the fatnav and sidenav, and other CSS updates

chrome/common/extensions/docs/static/sass/_article.scss

-$toc-width: 240px;
-$toc-margin-left: 195px;
+$article-width: 70%;
+$toc-width: 28%;
 
 // TOC on article pages
 .inline-toc {
   line-height: 1.3em;
 
   a,
   a:link,
   a:visited {
     color: $gray-medium;
     font-weight: normal;
@@ skipping 14 matching lines @@
     }
   }  
 
   a {
     @include display-flex();
     padding: 0.5em 0;
   }
 
   .related {
     display: block;
+    background-color: $gray-light;
+    box-shadow: $nav-box-shadow;
+    padding: 1em 1em 0.5em 1em;
+    margin-bottom: 1em; /* so the box shadow doesn't get cut off */
+
+    h3 {
+      margin-top: 0;
+    }
 
     li a {
       &.active {
         color: $black;
       }
+      &:hover {
+        background-image: $nav-hover-gradient;
+      }
     }
   }
 
   #toc {
     display: none;
 
     .toplevel {
       > a {
         font-weight: bold;
         color: $black;
 
         &.hastoc::after {
           content: '+';
           @include flex(1);
           text-align: right;
         }
       }
     }
   
     //> .toc > li {
     .toplevel {
       &.active {
         .toc {
           display: block;
         }
         > a.hastoc {
           &::after {
-            content: '-';
+            content: ''; /* don't make it look like you can toggle it closed */
           }
         }
       }
     }
   }
 
   .toc {
     margin: 0;
-    padding: 0;
+    padding: 0.3em 0 0 0;
     border-top: $default-border;
 
     .toc {
       display: none;
     }
 
     .toc li {
       padding-left: 1em;
       border-bottom: $default-border; 
     }
@@ skipping 15 matching lines @@
   .last-updated {
     @include flex(1);
   }
 }
 
 // Large than mobile.
 @media only screen and (min-width: $break-small)  { 
   .inline-toc { 
     position: absolute;
     top: 0;
-    left: 50%;
-    margin-left: $toc-margin-left;
     width: $toc-width;
+    right: 0;
     overflow: auto;
     overflow-x: hidden;
 
-    // scroll.js adds and removes the floating class depending on the scroll position.
-    &.sticky {
-      position: fixed;
-    }
-
     #toc {
       display: block;
+      // article.js adds and removes the fixed nav depending on the scroll position.
+      &.sticky {
+        top: 0;
+        position: fixed;
+        -webkit-transform: translateZ(0); /* repaint issue */
+      }
     }
   }
   .article-content {
-    width: 70%;
+    width: $article-width;
     padding-right: 5%;
     border-right: 1px solid $gray-light;
+    min-height: 250px; /* add min-height so fatnav and sidenav doesn't overlap badly */
   }
   .cc-logo {
     margin: 0 0 0 auto;
   }
 }
 
-// Tablet
-@media only screen and (min-width: $break-small + 1) and (max-width: $break-large) { 
-  .inline-toc {
-    width: $toc-width - 40;
-    margin-left: $toc-margin-left - 30;
-  }
-}
-
 // Phone
 @media only screen and (max-width: $break-small)  { 
   .article-content [itemprop="articleBody"] {
     > .collapsible {
       height: 58px;
       overflow: hidden;
 
       &.active {
         height: auto;
         h2::before {
@@ skipping 16 matching lines @@
           content: '+';
         }
       }
     }
     .related {
       margin: $default-padding 0;
     }
   }
 }