ie11 support, grid bug fix

assets/sass/base/_reset.scss

@@ -121,6 +121,7 @@ dfn {
 figcaption {  
   font-style: italic;
   font-size: 0.9rem;
+  margin-top: 0.5rem;
   margin-bottom: 1rem;
   @include themify($themes) {
     color: themed("figcaption-color");

assets/sass/components/_bio.scss

@@ -5,11 +5,13 @@
   @include flex-direction(column);
 
   width: 100%;
+  max-width: 928px;
   font-family: $title-font;
 
   &__photo {
     border-radius: 0.25rem;
     width: 100%;
+    max-width: 250px;
     height: auto;
     @include box-shadow(0, 2px, 4px, 0, rgba(0, 0, 0, 0.25));
     @include animation('slide-in-down-little .2s .6s 1 ease-in both');

assets/sass/components/_ie.scss

@@ -0,0 +1,44 @@
+@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
+  .header {
+    padding-top: 3rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .showcase {
+    &__nav {
+      margin-top: 1.5rem;
+    }
+
+    &__box {
+      min-width: 270px;
+    }
+  }
+
+  .navbar {
+    &__slide-down {
+      svg {
+        display: block;
+        margin: auto;
+      }
+    }
+  }
+
+  .theme-mobile {
+    top: 3px;
+    right: 77px;
+  }
+
+  .copy-to-clipboard {
+    &::after {
+      content: 'copy';
+      font-family: $title-font;
+      font-size: 9px;
+      border: 1px solid #aaa;
+      border-radius: 0.125rem;
+      position: absolute;
+      padding: 0 0.1rem;
+      right: 1px;
+      top: -1px;
+    }
+  }
+}

assets/sass/components/_search.scss

@@ -2,6 +2,7 @@
   position: relative;
   border-radius: 0.25rem;
   height: 35px;
+  max-width: 928px;
   z-index: z('search');
   margin-bottom: 0.5rem;  
   
@@ -36,7 +37,7 @@
     @include truncate($grid_main_side_width + $grid_main_side_unit);
     @include themify($themes) {
       color: themed("search-color");
-      background-color: inherit;
+      background-color: themed("search-background-color");
       @include input-placeholder {
         font-family: $title-font;
         color: themed("search-placeholder-color");
@@ -89,10 +90,6 @@
 }
 
 #search-results {
-  @include themify($themes) {
-    // @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
-  }
-  
   &.dropdown {
     display: none;
     &.is-active {
@@ -143,8 +140,10 @@
 
 .mobile-search {
   position: absolute;
+  top: 0;
+  left: 0;
   z-index: z('modal');
-  width: 100%;  
+  width: 100%;
   overflow: hidden;
 
   @include themify($themes) {
@@ -169,6 +168,7 @@
       height: $grid_navbar_height;
       cursor: pointer;
       position: absolute;
+      top: 0;
       right: 0;
 
       @include flexbox();
@@ -203,7 +203,7 @@
   }
 
   &__body {
-    width: 100%;
+    width: 100vw;
     height: 100vh;
     overflow-y: auto;
     

assets/sass/components/_summary.scss

@@ -79,6 +79,8 @@
 
 .summary-classic {
   padding: 0 1rem;
+  @include flexbox();
+  @include flex-direction(column);
   @include animation('slide-in-down .2s .3s 1 ease-in both');
 
   .title {
@@ -116,6 +118,8 @@
   }
 
   &__content {
+    width: 100%;
+    
     @include flexbox();
     @include flex-direction(column);
     @include justify-content(flex-start);
@@ -142,7 +146,7 @@
       padding: 0.25rem;
       margin-right: .5rem;
       
-      @include transition(all, 0.25s, ease-in);
+      @include transition(all, 0.2s, ease-out);
       @include align-self(center);
       @include on-event {
         @include box-shadow(1px, 1px, 3px, 0px, rgba(0, 0, 0, 0.25));

assets/sass/layout/_footer.scss

@@ -50,10 +50,10 @@
     @include align-items(center);
     @include justify-content(center);    
     @include themify($themes) {
-      color: themed('gtt-color'); 
+      color: themed('gtt-color');
       background-color: themed('gtt-background-color');
       @include on-event {
-        color: themed('gtt-hover-color');  
+        color: themed('gtt-hover-color');
         background-color: themed('gtt-hover-background-color');
       }
     }
@@ -65,8 +65,15 @@
       border: none;
       width: 100%;
       height: 100%;
-      color: inherit;
+      
-      background-color: inherit;
+      @include themify($themes) {
+        color: themed('gtt-color');
+        background-color: themed('gtt-background-color');
+        @include on-event {
+          color: themed('gtt-hover-color');
+          background-color: themed('gtt-hover-background-color');
+        }
+      }
     }
 
     &-content {

assets/sass/layout/_navigation.scss

@@ -26,6 +26,13 @@
   }
 
   &__slide-down {
+    @include themify($themes) {
+      background-color: themed('navbar-background-color');
+      @include on-event {
+        background-color: themed('navbar-menu-hover-background-color');
+      }
+    }
+    
     @media only screen and (min-width: 769px) {
       @for $i from 1 through 8 {
         &:nth-child(#{$i}) {
@@ -43,7 +50,7 @@
     @include flex-shrink(0);  
   }
 
-  &__burger {        
+  &__burger {
     display: none;
     position: relative;
 
@@ -62,7 +69,7 @@
       span {
         @include themify($themes) {
           background-color: themed('burger-menu-color');
-        }        
+        }
         
         border-radius: 1rem;
         display: block;
@@ -93,7 +100,6 @@
         }        
       }
 
-      // Modifers
       &.is-active {
         display: block;
         span {
@@ -205,13 +211,15 @@
 
     &.is-active {
       position: absolute;
+      top: $grid_navbar_height;
+      left: 0;
+      width: 100%;
+      height: auto;
+      overflow: hidden;
+
       @include flexbox();
       @include flex-direction(column);
       @include align-items(flex-start);
-      top: 100%;
-      width: 100%;
-      height: auto;      
-      overflow: hidden;
       @include themify($themes) {        
         border-top: 1px solid themed('navbar-border-bottom-color');
         background-color: themed('navbar-mobile-background-color');

assets/sass/main.scss

@@ -71,6 +71,7 @@ $cursive-font: {{ .Site.Data.font.cursive_font }};
 @import 'components/box';
 @import 'components/modal';
 @import 'components/tab';
+@import 'components/ie';
 
 @import 'pages/404';
 @import 'pages/about';

layouts/_default/baseof.html

@@ -4,6 +4,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>{{ block "title" . }}{{ .Title }} – {{ .Site.Title }}{{ end }}</title>
     {{ partial "head/scripts" . }}    
     {{ partialCached "head/styles" . }}
@@ -17,7 +18,7 @@
     <script>
         var localTheme = localStorage.getItem('theme');
         if (localTheme) {
-            document.getElementById('root').className = `theme__${localTheme}`;
+            document.getElementById('root').className = 'theme__' + localTheme;
         }        
     </script>    
     

layouts/_default/list.html

@@ -33,6 +33,9 @@
 <script>
     {{ $sidebarPosition:= .Site.Params.sidebarPosition }}
     var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
+    {{ $enableSidebar:= .Site.Params.enableSidebar }}
+    var enableSidebar = JSON.parse({{ $enableSidebar | jsonify }});
+
     var listMainElem = document.querySelector('.list__main');
     var listSideElem = document.querySelector('.list__sidebar');
 
@@ -46,16 +49,38 @@
     }
     enquire.register("screen and (max-width: 769px)", {
         match: function () {
-            listMainElem.classList.remove(gridBig);
+            if (enableSidebar) {
-            listMainElem.classList.add(gridFull);
+                listMainElem.classList.remove(gridBig);
-            listSideElem.classList.remove(gridSmall);
+                listMainElem.classList.add(gridFull);
-            listSideElem.classList.add('hide');
+                listSideElem.classList.remove(gridSmall);
+                listSideElem.classList.add('hide');
+            } else {
+                if (listMainElem && !listMainElem.classList.contains(gridFull)) {
+                    listMainElem.classList.remove(gridBig);
+                    listMainElem.classList.add(gridFull);
+                }
+
+                if (listSideElem && !listSideElem.classList.contains('hide')) {
+                    listSideElem.classList.add('hide');
+                }
+            }
         },
         unmatch: function () {
-            listMainElem.classList.remove(gridFull);
+            if (enableSidebar) {
-            listMainElem.classList.add(gridBig);
+                listMainElem.classList.remove(gridFull);
-            listSideElem.classList.add(gridSmall);
+                listMainElem.classList.add(gridBig);
-            listSideElem.classList.remove('hide');
+                listSideElem.classList.add(gridSmall);
+                listSideElem.classList.remove('hide');
+            } else {
+                if (listMainElem && !listMainElem.classList.contains(gridFull)) {
+                    listMainElem.classList.remove(gridBig);
+                    listMainElem.classList.add(gridFull);
+                }
+
+                if (listSideElem && !listSideElem.classList.contains('hide')) {
+                    listSideElem.classList.add('hide');
+                }
+            }
 
             document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
             document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');

layouts/_default/taxonomy.html

@@ -32,6 +32,9 @@
 <script>
   {{ $sidebarPosition:= .Site.Params.sidebarPosition }}
   var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
+  {{ $enableSidebar:= .Site.Params.enableSidebar }}
+  var enableSidebar = JSON.parse({{ $enableSidebar | jsonify }});
+
   var listMainElem = document.querySelector('.list__main');
   var listSideElem = document.querySelector('.list__sidebar');
 
@@ -46,16 +49,38 @@
 
   enquire.register("screen and (max-width: 769px)", {
     match: function () {
-      listMainElem.classList.remove(gridBig);
+      if (enableSidebar) {
-      listMainElem.classList.add(gridFull);
+        listMainElem.classList.remove(gridBig);
-      listSideElem.classList.remove(gridSmall);
+        listMainElem.classList.add(gridFull);
-      listSideElem.classList.add('hide');
+        listSideElem.classList.remove(gridSmall);
+        listSideElem.classList.add('hide');
+      } else {
+        if (listMainElem && !listMainElem.classList.contains(gridFull)) {
+          listMainElem.classList.remove(gridBig);
+          listMainElem.classList.add(gridFull);
+        }
+
+        if (listSideElem && !listSideElem.classList.contains('hide')) {
+          listSideElem.classList.add('hide');
+        }
+      }
     },
     unmatch: function () {
-      listMainElem.classList.remove(gridFull);
+      if (enableSidebar) {
-      listMainElem.classList.add(gridBig);
+        listMainElem.classList.remove(gridFull);
-      listSideElem.classList.add(gridSmall);
+        listMainElem.classList.add(gridBig);
-      listSideElem.classList.remove('hide');
+        listSideElem.classList.add(gridSmall);
+        listSideElem.classList.remove('hide');
+      } else {
+        if (listMainElem && !listMainElem.classList.contains(gridFull)) {
+          listMainElem.classList.remove(gridBig);
+          listMainElem.classList.add(gridFull);
+        }
+
+        if (listSideElem && !listSideElem.classList.contains('hide')) {
+          listSideElem.classList.add('hide');
+        }
+      }
       
       document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
       document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');

layouts/index.html

@@ -30,6 +30,9 @@
 <script>
     {{ $sidebarPosition:= .Site.Params.sidebarPosition }}
     var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
+    {{ $enableSidebar:= .Site.Params.enableSidebar }}
+    var enableSidebar = JSON.parse({{ $enableSidebar | jsonify }});
+    
     var listMainElem = document.querySelector('.list__main');
     var listSideElem = document.querySelector('.list__sidebar');
 
@@ -44,16 +47,39 @@
 
     enquire.register("screen and (max-width: 769px)", {
         match: function () {
-            listMainElem.classList.remove(gridBig);
+            if (enableSidebar) {
-            listMainElem.classList.add(gridFull);
+                listMainElem.classList.remove(gridBig);
-            listSideElem.classList.remove(gridSmall);
+                listMainElem.classList.add(gridFull);
-            listSideElem.classList.add('hide');
+                listSideElem.classList.remove(gridSmall);
+                listSideElem.classList.add('hide');
+            } else {
+                if (listMainElem && !listMainElem.classList.contains(gridFull)) {
+                    listMainElem.classList.remove(gridBig);
+                    listMainElem.classList.add(gridFull);
+                }
+
+                if (listSideElem && !listSideElem.classList.contains('hide')) {
+                    listSideElem.classList.add('hide');
+                }
+            }
+            
         },
         unmatch: function () {
-            listMainElem.classList.remove(gridFull);
+            if (enableSidebar) {
-            listMainElem.classList.add(gridBig);
+                listMainElem.classList.remove(gridFull);
-            listSideElem.classList.add(gridSmall);
+                listMainElem.classList.add(gridBig);
-            listSideElem.classList.remove('hide');
+                listSideElem.classList.add(gridSmall);
+                listSideElem.classList.remove('hide');
+            } else {
+                if (listMainElem && !listMainElem.classList.contains(gridFull)) {
+                    listMainElem.classList.remove(gridBig);
+                    listMainElem.classList.add(gridFull);
+                }
+
+                if (listSideElem && !listSideElem.classList.contains('hide')) {
+                    listSideElem.classList.add('hide');
+                }
+            }
 
             if (document.getElementsByClassName('navbar__burger')[0]) {
                 document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');

layouts/partials/body/photoswipe.html

@@ -122,7 +122,7 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   MicroModal.init({
-    onClose: () => {
+    onClose: function () {
       if (mySwipe) {
         mySwipe.kill();
         mySwipe = null;

layouts/partials/body/share.html

@@ -31,7 +31,7 @@
           {{ else if eq (lower .) "tumblr" }}
             <a href="http://tumblr.com/widgets/share/tool?canonicalUrl={{ $ctx.Permalink | absLangURL }}&data-title={{ $ctx.Title }}&data-content={{ $ctx.Description }}" class="donation__item" target="_blank" rel="noreferer">
               {{ partial "svgs/share/tumblr.svg" (dict "width" 22 "height" 22) }}
-              {{ i18n "linkedin" | default "LinkedIn" }}
+              {{ i18n "tumblr" | default "Tumblr" }}
             </a>
           {{ else if eq (lower .) "weibo" }}
             <a href="javascript:void(function(){var d=document,e=encodeURIComponent,s1=window.getSelection,s2=d.getSelection,s3=d.selection,s=s1?s1():s2?s2():s3?s3.createRange().text:'',r='http://service.weibo.com/share/share.php?url='+e(d.location.href)+'&title='+e(d.title),x=function(){if(!window.open(r,'weibo','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r+'&r=1'};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})()" class="donation__item" target="_blank" rel="noreferer">

layouts/partials/head/scripts.html

@@ -20,6 +20,61 @@
 <script>
   "use strict";
 
+  // ========================== poiyfill ==========================
+  // forEach
+  if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+  }
+
+  // includes
+  if (!String.prototype.includes) {
+    String.prototype.includes = function (search, start) {
+      'use strict';
+
+      if (search instanceof RegExp) {
+        throw TypeError('first argument must not be a RegExp');
+      }
+      if (start === undefined) { start = 0; }
+      return this.indexOf(search, start) !== -1;
+    };
+  }
+
+  // append
+  Document.prototype.append = Element.prototype.append = function append() {
+    this.appendChild(_mutation(arguments));
+  };
+  function _mutation(nodes) {
+    if (!nodes.length) {
+      throw new Error('DOM Exception 8');
+    } else if (nodes.length === 1) {
+      return typeof nodes[0] === 'string' ? document.createTextNode(nodes[0]) : nodes[0];
+    } else {
+      var
+      fragment = document.createDocumentFragment(),
+      length = nodes.length,
+      index = -1,
+      node;
+
+      while (++index < length) {
+        node = nodes[index];
+
+        fragment.appendChild(typeof node === 'string' ? document.createTextNode(node) : node);
+      }
+
+      return fragment;
+    }
+  }
+
+  // startsWith
+  if (!String.prototype.startsWith) {
+    String.prototype.startsWith = function (searchString, position) {
+      position = position || 0;
+      return this.indexOf(searchString, position) === position;
+    };
+  }
+  // ===============================================================
+
+
   document.addEventListener('DOMContentLoaded', function () {
     // ============================ tab ============================
     document.querySelectorAll('.tab') ? 
@@ -54,7 +109,11 @@
     var gttBtn = document.getElementById("gtt");
     gttBtn.style.display = "none";
     gttBtn.addEventListener('click', function () {
-      scrollToTop(250);
+      if (window.document.documentMode) {
+        document.documentElement.scrollTop = 0;
+      } else {
+        scrollToTop(250);
+      }
     });
 
     function scrollToTop(scrollDuration) {
@@ -148,7 +207,7 @@
                 });
               }) : null;
 
-              var curElem = tableOfContentsElem.querySelector(`[href="#${id}"]`);
+              var curElem = tableOfContentsElem.querySelector("[href='#" + id + "']");
               if (curElem && curElem.nextElementSibling) {
                 curElem.nextElementSibling.style.display = 'block';
               }
@@ -193,7 +252,7 @@
                 });
               });
 
-              var curElem = tableOfContentsElem.querySelector(`[href="#${id}"]`);
+              var curElem = tableOfContentsElem.querySelector("[href='#" + id + "']");
               if (curElem && curElem.nextElementSibling) {
                 curElem.nextElementSibling.style.display = 'block';
               }
@@ -222,6 +281,8 @@
   // ========================== navbar ==========================
     var navbarBurgerElem = document.querySelector('.navbar__burger');
     var navbarMenuElem = document.querySelector('.navbar__menu');
+    console.log(navbarBurgerElem);
+    console.log(navbarMenuElem);
     navbarBurgerElem ?
     navbarBurgerElem.addEventListener('click', function () {
       if (navbarBurgerElem.classList.contains('is-active')) {
@@ -286,7 +347,8 @@
 
     mobileSearchInputElem ? 
     mobileSearchInputElem.addEventListener('keydown', function(e) {
-      if (e.key === 'Escape') {
+      var keyCode = e.which || e.keyCode;
+      if (e.key === 'Escape' || keyCode === 27) {
         if (mobileSearchContainer) {
           mobileSearchContainer.style.display = 'none';
         }
@@ -332,7 +394,7 @@
         localStorage.setItem('theme', selectedThemeVariant);
 
         rootEleme.removeAttribute('class');
-        rootEleme.classList.add(`theme__${selectedThemeVariant}`);
+        rootEleme.classList.add('theme__' + selectedThemeVariant);
         selectThemeElem.forEach(function(rootElem) {
           rootElem.querySelectorAll('a').forEach(function (elem) {
             if (elem.classList) {
@@ -445,7 +507,7 @@
           });
         }
         else {
-          console.error(`[${xhr.status}]Error:`, xhr.statusText);
+          console.error('[' + xhr.status + ']Error:', xhr.statusText);
         }
       };
       xhr.send();
@@ -464,7 +526,7 @@
           var item = document.createElement('a');
           item.setAttribute('href', result.uri);
           item.setAttribute('class', 'dropdown-item');
-          item.innerHTML = `<div class="menu-item"><div class="menu-item__title">📄 ${result.title}</div><div class="menu-item__desc">${result.description ? result.description : result.content}</div></div>`;
+          item.innerHTML = '<div class="menu-item"><div class="menu-item__title">📄 ' + result.title + '</div><div class="menu-item__desc">' + (result.description ? result.description : result.content) + '</div></div>';
           content.appendChild(item);
         });
       } else {
@@ -495,7 +557,7 @@
           var item = document.createElement('a');
           item.setAttribute('href', result.item.uri);
           item.setAttribute('class', 'dropdown-item');
-          item.innerHTML = `<div class="menu-item"><div class="menu-item__title">📄 ${generateHighlightedText(result.item.title, result.matches[0].indices)}</div><div class="menu-item__desc">${result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : ''}</div></div>`;
+          item.innerHTML = '<div class="menu-item"><div class="menu-item__title">📄 ' + generateHighlightedText(result.item.title, result.matches[0].indices) + '</div><div class="menu-item__desc">' + (result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : '') + '</div></div>';
           content.appendChild(item);
         });
       } else {
@@ -523,7 +585,7 @@
         results.forEach(function (result) {
           var item = document.createElement('a');
           item.setAttribute('href', result.uri);
-          item.innerHTML = `<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ${result.title}</div><div class="mobile-search__item--desc">${result.description ? result.description : result.content}</div></div>`;
+          item.innerHTML = '<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ' + result.title + '</div><div class="mobile-search__item--desc">' + (result.description ? result.description : result.content) + '</div></div>';
           content.appendChild(item);
         });
       } else {
@@ -548,7 +610,7 @@
         results.forEach(function (result) {
           var item = document.createElement('a');
           item.setAttribute('href', result.item.uri);
-          item.innerHTML = `<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ${generateHighlightedText(result.item.title, result.matches[0].indices)}</div><div class="mobile-search__item--desc">${result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : ''}</div></div>`;
+          item.innerHTML = '<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ' + generateHighlightedText(result.item.title, result.matches[0].indices) + '</div><div class="mobile-search__item--desc">' + (result.matches[1] ? generateHighlightedText(result.item.description, result.matches[1].indices) : result.matches[2] ? generateHighlightedText(result.item.content, result.matches[2].indices) : '') + '</div></div>';
           content.appendChild(item);
         });
       } else {
@@ -594,6 +656,7 @@
     var searchElem = document.getElementById('search');
     var searchMobile = document.getElementById('search-mobile');
 
+    searchElem ? 
     searchElem.addEventListener('input', function(e) {
       if (!e.target.value) {
         document.getElementById('search-results').setAttribute('class', 'dropdown');
@@ -611,8 +674,9 @@
       } else {
         renderSearchResults(results);
       }
-    });
+    }) : null;
 
+    searchElem ? 
     searchElem.addEventListener('blur', function() {
       if (window.innerWidth < 770) {
         return null;
@@ -620,8 +684,9 @@
       setTimeout(function () {
         document.getElementById('search-results').setAttribute('class', 'dropdown');
       }, 100);
-    });
+    }) : null;
 
+    searchElem ? 
     searchElem.addEventListener('click', function(e) {
       if (window.innerWidth < 770) {
         return null;
@@ -638,7 +703,7 @@
       } else {
         renderSearchResults(results);
       }
-    });
+    }) : null;
     
     function indexInParent(node) {
       var children = node.parentNode.childNodes;
@@ -656,14 +721,16 @@
     var items = null;
     var searchContainerMaxHeight = 350;
 
+    searchElem ? 
     searchElem.addEventListener('keydown', function(e) {
       if (window.innerWidth < 770) {
         return null;
       }
 
       var items = document.querySelectorAll('#search-menu .dropdown-item');
+      var keyCode = e.which || e.keyCode;
       
-      if (e.key === 'ArrowDown') {
+      if (e.key === 'ArrowDown' || keyCode === 40) {
         if (activeIndex === null) {
           activeIndex = 0;
           items[activeIndex].classList.remove('is-active');
@@ -679,7 +746,7 @@
         } else if (activeIndex === 0) {
           document.querySelector(".search-content").scrollTop = 0;
         }
-      } else if (e.key === 'ArrowUp') {
+      } else if (e.key === 'ArrowUp' || keyCode === 38) {
         if (activeIndex === null) {
           activeIndex = items.length - 1;
           items[activeIndex].classList.remove('is-active');
@@ -695,19 +762,20 @@
         } else {
           document.querySelector(".search-content").scrollTop = overflowedPixel + items[activeIndex].getBoundingClientRect().height;
         }
-      } else if (e.key === 'Enter') {
+      } else if (e.key === 'Enter' || keyCode === 13) {
         var currentItemLink = items[activeIndex].getAttribute('href');
         if (currentItemLink) {
           location.href = currentItemLink;
         }
-      } else if (e.key === 'Escape') {
+      } else if (e.key === 'Escape' || keyCode === 27) {
         e.target.value = null;
         if (searchResults) {
           searchResults.classList.remove('is-active');
         }
       }
-    });
+    }) : null;
 
+    searchMobile ? 
     searchMobile.addEventListener('input', function(e) {
       if (!e.target.value) {
         let wrap = document.getElementById('search-mobile-results');
@@ -725,7 +793,7 @@
       } else {
         renderSearchResultsMobile(results);
       }
-    });
+    }) : null;
   // ============================================================
   });
 </script>

layouts/partials/script/single-script.html

@@ -145,7 +145,7 @@
             });
           }) : null;
 
-          var curElem = tableOfContentsElem.querySelector(`[href="#${id}"]`);
+          var curElem = tableOfContentsElem.querySelector('[href="#' + id + '"]');
           if (curElem && curElem.nextElementSibling) {
             curElem.nextElementSibling.style.display = 'block';
           }
@@ -328,8 +328,8 @@
         var isNotAllowedIncluded = false;
         var curClassName = code.getAttribute('class');
 
-        for (let str of notAllowedClass) {
+        for (var i = 0; i < notAllowedClass.length; i++) {
-          if (curClassName && curClassName.startsWith(str)) {
+          if (curClassName && curClassName.startsWith(notAllowedClass[i])) {
             isNotAllowedIncluded = true;
             break;
           }