Cleaned ids and classes

(cherry picked from commit 2b153ed074811e735aaa58d57a3fcdf7838e17f5)

_layouts/default.html

@@ -12,25 +12,25 @@ layout: table_wrappers
     <div class="side-bar">
       <div class="site-header">
         <a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
-        <button class="menu-button fs-3 js-main-nav-trigger" data-text-toggle="Hide" type="button">Menu</button>
+        <button id="site-nav-trigger" class="menu-button fs-3" data-text-toggle="Hide" type="button">Menu</button>
       </div>
-      <nav role="navigation" aria-label="Main navigation" class="navigation main-nav js-main-nav">
+      <nav role="navigation" aria-label="Main navigation" id="site-nav" class="site-nav">
         {% include nav.html %}
       </nav>
       <footer class="site-footer">
         <p class="text-small text-grey-dk-000 mb-4">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
       </footer>
     </div>
-    <div class="main-content-wrap js-main-content" tabindex="0">
+    <div id="main-wrap" class="main-wrap" tabindex="0">
-      <div class="main-content">
+      <div class="main">
-        <div class="page-header js-page-header">
+        <div id="main-header" class="main-header">
           {% if site.search_enabled != false %}
             <div class="search">
               <div class="search-input-wrap">
-                <input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
+                <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
                 <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
               </div>
-              <div class="js-search-results search-results-wrap"></div>
+              <div id="search-results" class="search-results"></div>
             </div>
           {% endif %}
           {% if site.aux_links != nil %}
@@ -41,7 +41,7 @@ layout: table_wrappers
             </ul>
           {% endif %}
         </div>
-        <div class="page">
+        <div class="main-content-wrap">
           {% unless page.url == "/" %}
             {% if page.parent %}
               <nav class="breadcrumb-nav">
@@ -57,7 +57,7 @@ layout: table_wrappers
               </nav>
             {% endif %}
           {% endunless %}
-          <div id="main-content" class="page-content" role="main">
+          <div id="main-content" class="main-content" role="main">
             {% if site.heading_anchors != false %}
               {% include vendor/anchor_headings.html html=content  beforeHeading = "true" anchorBody="<svg class=\"d-inline-block v-align-middle\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"18\" height=\"18\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>" anchorClass="anchor-heading" %}
             {% else %}

_sass/content.scss

@@ -5,7 +5,7 @@
 //
 // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
 
-.page-content {
+.main-content {
   line-height: $content-line-height;
 
   a {

_sass/layout.scss

@@ -37,7 +37,7 @@
   }
 }
 
-.main-content-wrap {
+.main-wrap {
   @include mq(md) {
     position: absolute;
     top: 0;
@@ -48,9 +48,13 @@
     overflow-x: hidden;
     overflow-y: scroll;
   }
+
+  &:focus {
+    outline: none;
+  }
 }
 
-.main-content {
+.main {
   @include mq(md) {
     position: relative;
     max-width: $content-width;
@@ -62,11 +66,7 @@
   }
 }
 
-.js-main-content:focus {
+.main-content-wrap {
-  outline: none;
-}
-
-.page {
   @include container;
   padding-top: $gutter-spacing-sm;
   padding-bottom: $gutter-spacing-sm;
@@ -77,7 +77,7 @@
   }
 }
 
-.page-header {
+.main-header {
   @include container;
   display: none;
   padding-top: $gutter-spacing-sm;
@@ -101,7 +101,7 @@
   }
 }
 
-.navigation,
+.site-nav,
 .site-header,
 .site-footer {
 
@@ -112,7 +112,7 @@
   }
 }
 
-.navigation {
+.site-nav {
   @include container;
 
   @include mq(md) {

_sass/navigation.scss

@@ -68,7 +68,7 @@
 
 // Small screen nav
 
-.main-nav {
+.site-nav {
   display: none;
 
   &.nav-open {

_sass/search.scss

@@ -68,7 +68,7 @@
   order: 1;
 }
 
-.search-results-wrap {
+.search-results {
   position: absolute;
   z-index: 100;
   display: none;

assets/js/just-the-docs.js

@@ -24,17 +24,17 @@ jtd.onReady = function(ready) {
 // Show/hide mobile menu
 
 function initNav() {
-  const mainNav = document.querySelector('.js-main-nav');
+  const siteNav = document.getElementById('site-nav');
-  const pageHeader = document.querySelector('.js-page-header');
+  const mainHeader = document.getElementById('main-header');
-  const navTrigger = document.querySelector('.js-main-nav-trigger');
+  const navTrigger = document.getElementById('site-nav-trigger');
 
   jtd.addEvent(navTrigger, 'click', function(e){
     e.preventDefault();
     var text = navTrigger.innerText;
     var textToggle = navTrigger.getAttribute('data-text-toggle');
 
-    mainNav.classList.toggle('nav-open');
+    siteNav.classList.toggle('nav-open');
-    pageHeader.classList.toggle('nav-open');
+    mainHeader.classList.toggle('nav-open');
     navTrigger.classList.toggle('nav-open');
     navTrigger.innerText = textToggle;
     navTrigger.setAttribute('data-text-toggle', text);
@@ -88,8 +88,8 @@ function initSearch() {
   function searchResults(index, data) {
     var index = index;
     var docs = data;
-    var searchInput = document.querySelector('.js-search-input');
+    var searchInput = document.getElementById('search-input');
-    var searchResults = document.querySelector('.js-search-results');
+    var searchResults = document.getElementById('search-results');
 
     function hideResults() {
       searchResults.innerHTML = '';
@@ -275,8 +275,8 @@ function initSearch() {
 }
 
 function pageFocus() {
-  var mainContent = document.querySelector('.js-main-content');
+  var mainWrap = document.getElementById('main-wrap');
-  mainContent.focus();
+  mainWrap.focus();
 }
 
 // Document ready