Updated DCC navigation

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

-$toc-width: 240px;
-$toc-margin-left: 195px;
+$article-width: 70%;
+$toc-width: 20%;
 
+// Site navigation on all pages
+.inline-site-toc {
+  line-height: 1.3em;
+
+  a,
+  a:link,
+  a:visited {
+    color: $gray-medium;
+    font-weight: normal;
+
+    &:hover,
+    &:focus {
+      color: $black;
+    }
+  }
+  li li a,
+  li li a:link,
+  li li a:visited {
+    color: $gray-medium;
+
+    &:hover,
+    &:focus {
+      color: $black;
+    }
+  }
+
+  a {
+    @include display-flex();
+    padding: 0.5em 0;
+  }
+
+  .site-related {
+    display: block;
+    background-color: $gray-light;
+    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;
+      } 
+    } 
+  } 
+  
+  #toc {
+    display: block;
+
+    .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: ''; /* don't make it look like you can toggle it closed */
+          }
+        }
+      }
+    }
+  }
+
+ .toc {
+    margin: 0;
+    padding: 0.3em 0 0 0;
+    border-top: $default-border;
+    
+    .toc {
+      display: block;
+    } 
+    
+    .toc li {
+      padding-left: 1em;
+      border-bottom: $default-border;
+    } 
+  } 
+} 
+
 // TOC on article pages
 .inline-toc {
   line-height: 1.3em;
 
   a,
   a:link,
   a:visited {
     color: $gray-medium;
     font-weight: normal;
 
@@ skipping 13 matching lines @@
     }
   }  
 
   a {
     @include display-flex();
     padding: 0.5em 0;
   }
 
   .related {
     display: block;
+    background-color: $gray-light;
+    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;
       }
     }
   }
 
   #toc {
     display: none;
 
     .toplevel {
-      > a {
+       > a {
         font-weight: bold;
         color: $black;
 
         &.hastoc::after {
           content: '+';
           @include flex(1);
           text-align: right;
         }
       }
     }
@@ skipping 41 matching lines @@
     width: 90px;
     height: 32px;
   }
   .last-updated {
     @include flex(1);
   }
 }
 
 // Large than mobile.
 @media only screen and (min-width: $break-small)  { 
-  .inline-toc { 
+  .inline-site-toc {
     position: absolute;
     top: 0;
-    left: 50%;
-    margin-left: $toc-margin-left;
     width: $toc-width;
     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.
     }
+  }
+
+  .inline-toc { 
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: $toc-width;
+    overflow: auto;
+    overflow-x: hidden;
 
     #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%;
+    //position: fixed;
+    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;
+    //margin-left: $toc-margin-left - 30;
   }
 }
 
 // Phone
 @media only screen and (max-width: $break-small)  { 
   .article-content [itemprop="articleBody"] {
     > .collapsible {
       height: 58px;
       overflow: hidden;
 
@@ skipping 17 matching lines @@
           position: absolute;
           right: 0;
           content: '+';
         }
       }
     }
     .related {
       margin: $default-padding 0;
     }
   }
+  .hidden {
+    display: none
+  }
 }