mobile responsive, silence search error

sass/_home.scss

@@ -1,7 +1,6 @@
 .home-page {
     width: 100%;
     height: 100%;
-    min-width: 600px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -11,4 +10,9 @@
             margin: 0;
         }
     }
+
+    @media (max-width: $sm-breakpoint) {
+        text-align: center;
+        flex-direction: column;
+    }
 }

sass/_layout.scss

@@ -5,15 +5,16 @@
 }
 
 html, body {
-    height: 100%;
     width: 100%;
+    height: 100%;   
 }
 
 .container {
     width: 100%;
-    min-width: 600px;
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
     padding-bottom: 2rem;
 }

sass/_search.scss

@@ -1,4 +1,4 @@
-.search-container {
+#search {
     input {
         padding: 0.5rem 0.75rem;
         border: none;
@@ -7,7 +7,7 @@
         border-radius: 4px;
     }
 
-    .search-results {
+    .results-container {
         display: none;
     }
 }

sass/_site-nav.scss

@@ -12,18 +12,17 @@
     li {
         display: inline-block;
         padding: 0 0.2rem;
-
-        color: $grey;
-
-        & > a.active {
-            color: $white;
-        }
     }
 
     a {
-        color: inherit;
+        display: inline-block;
+        color: $grey;
         border: none;
         text-decoration: none;
+
+        &:hover, &.active {
+            color: $white;
+        }
     }
 
     .main-menu {
@@ -31,7 +30,6 @@
     }
 
     .sub-menu {
-        color: $grey;
         font-size: 0.65rem;
     }
 }

sass/site.scss

@@ -95,6 +95,14 @@ small {
     font-size: 0.5em;
 }
 
+ul, ol {
+    padding-left: 1rem;
+
+    li {
+        padding-bottom: 0.2rem;
+    }
+}
+
 hr {
     border: none;
     height: 2px;

static/search.js

@@ -34,13 +34,13 @@ function makeTeaser(body, terms) {
   });
   var termFound = false;
   var index = 0;
-  var weighted = []; // contains elements of ["word", weight, index_in_document]
+  var weighted = []; // contains elements of ['word', weight, index_in_document]
 
   // split in sentences, then words
-  var sentences = body.toLowerCase().split(". ");
+  var sentences = body.toLowerCase().split('. ');
 
   for (var i in sentences) {
-    var words = sentences[i].split(" ");
+    var words = sentences[i].split(' ');
     var value = FIRST_WORD_WEIGHT;
 
     for (var j in words) {
@@ -108,73 +108,76 @@ function makeTeaser(body, terms) {
 
     // add <em/> around search terms
     if (word[1] === TERM_WEIGHT) {
-      teaser.push("<b>");
+      teaser.push('<b>');
     }
     startIndex = word[2] + word[0].length;
     teaser.push(body.substring(word[2], startIndex));
 
     if (word[1] === TERM_WEIGHT) {
-      teaser.push("</b>");
+      teaser.push('</b>');
     }
   }
-  teaser.push("…");
-  return teaser.join("");
+  teaser.push('…');
+  return teaser.join('');
 }
 
 function formatSearchResultItem(item, terms) {
-  return '<div class="search-results__item">'
-  + `<a href="${item.ref}">${item.doc.title}</a>`
-  + `<div>${makeTeaser(item.doc.body, terms)}</div>`
-  + '</div>';
+  return '<div class="result">'
+    + `<a href="${item.ref}">${item.doc.title}</a>`
+    + `<div class="summary">${makeTeaser(item.doc.body, terms)}</div>`
+    + '</div>';
 }
 
 function initSearch() {
-  var $searchInput = document.getElementById("search");
-  var $searchResults = document.querySelector(".search-results");
-  var $searchResultsItems = document.querySelector(".search-results__items");
+  var $searchComponent = document.getElementById('search');
+  if ($searchComponent === null) {
+    return;
+  }
+  var $searchInput = $searchComponent.querySelector('input');
+  var $searchResults = $searchComponent.querySelector('.results-container');
+  var $searchResultsItems = $searchComponent.querySelector('.results');
   var MAX_ITEMS = 10;
 
   var options = {
     bool: "AND",
     fields: {
-      title: {boost: 2},
-      body: {boost: 1},
+      title: { boost: 2 },
+      body: { boost: 1 },
     }
   };
-  var currentTerm = "";
+  var currentTerm = '';
   var index = elasticlunr.Index.load(window.searchIndex);
 
-  $searchInput.addEventListener("keyup", debounce(function() {
+  $searchInput.addEventListener("keyup", debounce(function () {
     var term = $searchInput.value.trim();
     if (term === currentTerm || !index) {
       return;
     }
-    $searchResults.style.display = term === "" ? "none" : "block";
-    $searchResultsItems.innerHTML = "";
-    if (term === "") {
+    $searchResults.style.display = term === '' ? 'none' : 'block';
+    $searchResultsItems.innerHTML = '';
+    if (term === '') {
       return;
     }
 
     var results = index.search(term, options);
     if (results.length === 0) {
-      $searchResults.style.display = "none";
+      $searchResults.style.display = 'none';
       return;
     }
 
     currentTerm = term;
     for (var i = 0; i < Math.min(results.length, MAX_ITEMS); i++) {
-      var item = document.createElement("li");
-      item.innerHTML = formatSearchResultItem(results[i], term.split(" "));
+      var item = document.createElement('li');
+      item.innerHTML = formatSearchResultItem(results[i], term.split(' '));
       $searchResultsItems.appendChild(item);
     }
   }, 150));
 }
 
-
-if (document.readyState === "complete" ||
-    (document.readyState !== "loading" && !document.documentElement.doScroll)
+if (document.readyState === 'complete' ||
+  (document.readyState !== 'loading' && !document.documentElement.doScroll)
 ) {
   initSearch();
 } else {
-  document.addEventListener("DOMContentLoaded", initSearch);
+  document.addEventListener('DOMContentLoaded', initSearch);
 }

templates/partials/search.html

@@ -1,6 +1,6 @@
-<div class="search-container">
-    <input id="search" type="search" placeholder="🔎 Search">
-    <div class="search-results">
-        <div class="search-results__items"></div>
+<div id="search">
+    <input type="search" placeholder="🔎 Search">
+    <div class="results-container">
+        <div class="results"></div>
     </div>
 </div>

templates/root.html

@@ -6,7 +6,7 @@
     <meta name="theme-color" content="#111111"/>
     <meta name="author" content="{{ config.extra.author }}">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0">
     <meta name="description" content="{% block meta_description %}
         {%- if section -%}{{ macros::meta_desc(ctx=section) }}{%- endif -%}
         {%- if page -%}{{ macros::meta_desc(ctx=page) }}{%- endif -%}