enforce max-width on content column; implement sticky on #toc-right

Author: Joseph Lowinske

_layouts/default.html

@@ -19,9 +19,12 @@
         {% endif %}
             {{content}}
           </div>
+        {% if page.no_toc == true %}
+        {% else %}
           <div class="toc-col">
             <div id="toc-right"></div>
           </div>
+        {% endif %}
       </div>
     </div>
     {% include footer.html %}

css/components/_toc.scss

@@ -5,14 +5,16 @@
 
   @include at-query($min, 1072px) {
     padding: 30px 30px 30px 0;
-    min-width: 360px;
+    min-width: 275px;
+    max-width: 275px;
     display: inline-block;
   }
 }
 
 #toc {
   display: block;
   max-width: 500px;
+  margin: 0;
 
   @include at-query($min, 1072px) {
     display: none;
@@ -21,15 +23,15 @@
 
 #toc-right {
   max-width: 100%;
+  margin: 30px 0 0 0;
 }
 
 #toc,
 #toc-right {
 
   > ul {
     background-color: $cl_green_light;
-    padding: 20px 30px;
-    margin: 0;
+    padding: 20px;
     width: 100%;
 
     li {

css/customstyles.css

@@ -19,6 +19,7 @@
 			padding-top: 50px;
 			padding-bottom: 100px;
 			max-width: 100%;
+			min-width: 0;
 
 			@include at-query($min, $screen-md) {
 				min-height: 625px;

css/customstyles.css.map

@@ -138,6 +138,22 @@ $(function() {
         $sidebar.animate({height: sideNavHeight}, {duration: 250});
       }
     }
+
+    if (_viewport_width >= 1072 && scrollTop >= 51) {
+      $('#toc-right').css({
+        position: 'fixed',
+        top: 51,
+        right: 30,
+        width: '245px'
+      });
+    } else {
+      $('#toc-right').css({
+        position: 'relative',
+        top: '',
+        right: '',
+        width: ''
+      });
+    }
   });
 
   // Fire scroll event on load