fix cr

Author: Justineo

themes/vue/source/css/_settings.styl

@@ -19,10 +19,13 @@ $info = #1C90F3
 
 $radius = 2px
 $content-padding-top = 30px
+
+// header settings
 $header-inner-height = 41px
 $heading-padding-vertical = 10px
 $header-height = $header-inner-height + $heading-padding-vertical * 2
 $mobile-header-height = 40px
+// prevent headers from being covered by the top nav upon navigation
 $heading-link-padding-top = $header-height + $content-padding-top
 $mobile-heading-link-padding-top = $mobile-header-height + $content-padding-top
 $h2-margin-top = 45px

themes/vue/source/js/common.js

@@ -1,4 +1,4 @@
-(function () {
+;(function () {
   initMobileMenu()
   if (PAGE_TYPE) {
     initVersionSelect()
@@ -166,8 +166,8 @@
     var currentPageAnchor = sidebar.querySelector('.sidebar-link.current')
     var contentClasses = document.querySelector('.content').classList
     var isAPIOrStyleGuide = (
-      contentClasses.contains('api') ||
-      contentClasses.contains('style-guide')
+    contentClasses.contains('api') ||
+    contentClasses.contains('style-guide')
     )
     if (currentPageAnchor || isAPIOrStyleGuide) {
       var allHeaders = []
@@ -267,7 +267,7 @@
       }).join('').replace(/\(.*\)$/, '')
       link.innerHTML =
         '<a class="section-link" data-scroll href="#' + h.id + '">' +
-          htmlEscape(text) +
+        htmlEscape(text) +
         '</a>'
       return link
     }
@@ -319,7 +319,7 @@
           var currentActiveOffset = currentActive.offsetTop + currentActive.parentNode.clientHeight
           var sidebarHeight = sidebar.clientHeight
           var currentActiveIsInView = (
-            currentActive.offsetTop >= sidebar.scrollTop &&
+          currentActive.offsetTop >= sidebar.scrollTop &&
             currentActiveOffset <= sidebar.scrollTop + sidebarHeight
           )
           var linkNotFurtherThanSidebarHeight = currentActiveOffset - currentPageOffset < sidebarHeight
@@ -337,6 +337,9 @@
       var wrapper = link.querySelector('a')
       wrapper.setAttribute('data-scroll', '')
 
+      // transform DOM structure from
+      // `<h2><a></a>Header</a>` to <h2><a>Header</a></h2>`
+      // to make the link clickable
       var nodes = link.childNodes
       for (var i = 0; i < nodes.length; i++) {
         var node = nodes[i]