implement toc in right gutter and in original location when screen width < 1500px

Author: Joseph Lowinske

_layouts/default.html

@@ -19,7 +19,9 @@
         {% endif %}
             {{content}}
           </div>
-          <div class="toc-col"></div>
+          <div class="toc-col">
+            <div id="toc-right"></div>
+          </div>
       </div>
     </div>
     {% include footer.html %}

css/components/_callout.scss

@@ -33,7 +33,7 @@
 
     h4, .bs-callout__label {
       color: $cl_green;
-    }
+    }    
   }
 
   &--danger {

css/components/_toc.scss

@@ -1,6 +1,27 @@
 @charset "UTF-8";
 
+.toc-col {
+  display: none;
+
+  @include at-query($min, 1500px) {
+    margin: 30px;
+    min-width: 360px;
+    display: inline-block;
+  }
+}
+
 #toc {
+  display: block;
+  max-width: 500px;
+
+  @include at-query($min, 1500px) {
+    display: none;
+  }
+}
+
+#toc,
+#toc-right {
+
   > ul {
     background-color: $cl_green_light;
     padding: 20px 30px;

css/customstyles.css

@@ -4,15 +4,14 @@
 	padding-top: 62px;
 	width: 100%;
 	z-index: 1000;
-	// @include groovy(all);
 	@include box-shadow(5px, 0, 4px, 0, rgba(0, 0, 0, 0.1));
 	overflow: auto;
 
 	#main-content {
 		margin: 0 15px;
 
 		@include at-query($min, $screen-md) {
-			margin: 0 30px 0 0;
+			margin: 0;
 			min-height: 625px;
 		}
 
@@ -23,12 +22,17 @@
 			@include at-query($min, $screen-md) {
 				min-height: 625px;
 				padding-left: 365px;
+				padding-right: 30px;
 
 				&-border {
 					border-left: 1px solid $cl_gray_medium;
 				}
 			}
 
+			@include at-query($min, 1500px) {
+				padding-right: 0;
+			}
+
 			&--landing {
 				padding-top: 30px;
 			}

css/customstyles.css.map

@@ -11,6 +11,13 @@ function renderTOC() {
     showSpeed: 0,
     headers: pageConfig.tocNotNested ? 'h2:visible' : 'h2:visible,h3:visible'
   });
+
+  $('#toc-right').toc({
+    minimumHeaders: 0,
+    listType: 'ul',
+    showSpeed: 0,
+    headers: pageConfig.tocNotNested ? 'h2:visible' : 'h2:visible,h3:visible'
+  });
 }
 
 var $versionSwitcher, versionSwitcherBottom = Infinity;