Fix flexbox wrapping issues on homepage; tighten up gopher animation

pipeline/js/scripts/homepage.js

@@ -32,12 +32,10 @@ $(document).ready(function() {
           stagger: 60,
           delay: 0,
           complete: function() {
+            badge.addClass('bounceIn');
+            cape.addClass('fadeIn');
             gopher.velocity('callout.tada', {
               duration: 800,
-              complete: function() {
-                badge.addClass('bounceIn');
-                cape.addClass('fadeIn');
-              }
             });
           }
         });

pipeline/js/scripts/site-navigation.js

@@ -42,9 +42,4 @@ $('#all-content-wrapper').on('click', function() {
   }
 });
 
-$('.body-copy').on('click', function() {
-  if ($('.toc-toggle.toc-open')) {
-    document.getElementById('toc').classList.remove('toc-open');
-    document.getElementById('toc-toggle').classList.remove('toc-open');
-  }
-});
+

pipeline/js/scripts/toggle-toc.js

@@ -1,29 +1,19 @@
-// //removes toc if not enough headings
-// (function() {
-//   let tocLinks = document.querySelectorAll('#TableOfContents > ul a'),
-//     toc = document.getElementById('toc');
-//   if (toc && (tocLinks.length < 2)) {
-//     toc.remove();
-//   } else if (tocLinks.length > 1) {
-//     document.getElementById('toc-toggle').addEventListener('click', toggleToc, false);
-//   }
-// })();
-
-// function toggleToc(evt) {
-//   evt.preventDefault();
-//   evt.stopPropagation();
-//   document.getElementById('toc').classList.toggle('toc-open');
-//   document.getElementById('toc-toggle').classList.toggle('toc-open');
-// }
-
 var kebab = document.querySelector('.kebab'),
   middle = document.querySelector('.middle'),
-  cross = document.querySelector('.cross');
+  cross = document.querySelector('.cross'),
+  body = document.querySelector('.body-copy');
 
 if (kebab) {
   kebab.addEventListener('click', function() {
     middle.classList.toggle('active');
     cross.classList.toggle('active');
     document.getElementById('toc').classList.toggle('toc-open');
-  })
+  });
+  body.addEventListener('click', function() {
+    if (document.querySelector('#toc.toc-open')) {
+      middle.classList.toggle('active');
+      cross.classList.toggle('active');
+      document.getElementById('toc').classList.toggle('toc-open');
+    }
+  });
 }

pipeline/scss/components/_table-of-contents.scss

@@ -52,17 +52,6 @@ aside#toc {
     &.toc-open {
       z-index: 1;
     }
-    // .fade {
-    //   content: '';
-    //   display: inline-block;
-    //   position: absolute;
-    //   bottom: -1px;
-    //   left: 0px;
-    //   width: 100%;
-    //   min-height: 1px;
-    //   // box-shadow: 0px 0px 72px 50px rgba(255, 255, 255, 1);
-    //   box-shadow: 58px 0px 72px 53px rgba(255,255,255,1);
-    // }
   }
 }
 
@@ -83,7 +72,7 @@ nav#TableOfContents {
     padding-left: 0px;
     margin-left: 0px;
     margin-top: .5em;
-    margin-bottom: 0px;
+    margin-bottom: 1em;
     > li {
       padding-left: 0px;
       margin-left: 0px;

pipeline/scss/pages/_homepage.scss

@@ -60,7 +60,7 @@ ul.animated {
 .home-row {
   min-height: auto;
   display: flex;
-  flex-wrap: wrap;
+  // flex-wrap: wrap;
   &.hero {
     margin-top: 50px;
     min-height: auto;
@@ -147,6 +147,9 @@ ul.animated {
       color: lighten($base-font-color, 20%);
     }
   }
+  @include MQ(M) {
+    flex-wrap: nowrap;
+  }
   @include MQ(XL) {
     justify-content: space-around;
   }
@@ -220,7 +223,10 @@ ul.animated {
   display: flex;
   flex-direction: column;
   align-items: center;
-  max-width: $L * .4;
+  @include MQ(L) {
+    width: $L * .4;
+    max-width: $L * .4;
+  }
 }
 
 .half.half-content {
@@ -400,6 +406,7 @@ svg {
 }
 
 .home-row-content-open-source {
+  flex-wrap: wrap;
   div {
     width: 100%;
     text-align: center;