Fetch upstream (#5)

* fix(#744): Escape special characters in title (#745)

* add matt artist as sponsor

* Fix margin top alignment issue on Safari (#750)

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Remove references to any public Staticman API instance (#775)

* Update CHANGELOG.md

* Adding option for Medium Social Link at footer  (#784)

* Itch.io social link (#788)

* Update CHANGELOG.md

* Add support for Cloudflare analytics (#798)

* Include Reddit in share options of posts (#815)

* add search to the navbar using 'post_search' config param

* Update CHANGELOG.md

* ui: make sure search results dont have underline until hovered

* search feature: make sure page scrollbar disappears when searching but a scrollbar for search items shows if needed

* update changelog

Co-authored-by: Dmitry <dmitry.b.danilov@gmail.com>
Co-authored-by: Dean Attali <dean@attalitech.com>
Co-authored-by: Amy Troschinetz <lexicalunit@lexicalunit.com>
Co-authored-by: Dean Attali <daattali@gmail.com>
Co-authored-by: Vincent Tam <VincentTam@users.noreply.github.com>
Co-authored-by: Diksha Verma <112dikshaverma@gmail.com>
Co-authored-by: Emaleth <Emaleth@protonmail.com>
Co-authored-by: Ari Kalfus <dev@artis3nal.com>
Co-authored-by: Leedan <l33d4n@gmail.com>
Co-authored-by: Marco Blessing <marco.blessing@komm.one>

assets/css/beautifuljekyll.css

@@ -993,3 +993,104 @@ pre {
   display: block;
   margin: 0 auto;
 }
+
+/* Search bar */
+#beautifuljekyll-search-overlay {
+  display: none;
+  z-index: 999999;
+  position: fixed;
+  background: rgba(0,0,0,0.9);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  text-align: center;
+  padding: 1rem;
+}
+#nav-search-exit {
+  position: absolute;
+  top: 1.5rem;
+  cursor: pointer;
+  right: 25%;
+  margin-right: 2rem;
+  color: #555;
+  font-size: 2rem;
+  line-height: 2rem;
+  font-weight: bold;
+}
+#nav-search-exit:hover {
+  color: #000;
+}
+#nav-search-input {
+  text-align: center;
+  background: #e7edee;
+  margin: auto;
+  display: block;
+  font-size: 2rem;
+  width: 50%;
+  transition: width 300ms ease;
+  color: #222;
+  border-radius: 5rem;
+  outline: none;
+  border: none;
+  padding: 0 3rem;
+}
+@media (max-width: 1199px) {
+  #nav-search-input {
+    width: 75%;
+  }
+  #nav-search-exit {
+    right: 12.5%;
+  }
+}
+@media (max-width: 767px) {
+  #nav-search-input {
+    width: 100%;
+  }
+  #nav-search-exit {
+    right: 0;
+  }
+}
+#nav-search-input:focus {
+  background: #f3f8fe;
+  box-shadow: 0px 0.15rem 1rem #e7f4ff;
+  outline: none;
+}
+
+#nav-search-input::placeholder {
+  color: #777;
+}
+
+#search-results-container {
+  list-style: none;
+  padding-left: unset;
+  margin-top: 1.5rem;
+  color: #fff;
+  font-size: 1.5rem;
+  max-height: calc(100vh - 6.5rem);
+  overflow-y: auto;
+}
+#search-results-container a {
+  color: #fff;
+  text-decoration: none;
+}
+#search-results-container a:hover {
+  color: #fff;
+  text-decoration: underline;
+}
+
+#nav-search-icon {
+  display: inline-block;
+}
+#nav-search-text {
+  display: none;
+}
+
+@media (max-width: 1199px) {
+  #nav-search-icon {
+    display: none;
+  }
+  #nav-search-text {
+    display: inline-block;
+  }
+}

assets/js/beautifuljekyll.js

@@ -27,6 +27,8 @@ var BeautifulJekyllJS = {
 
     // show the big header image
     BeautifulJekyllJS.initImgs();
+
+    BeautifulJekyllJS.initSearch();
   },
 
   initNavbar : function() {
@@ -108,6 +110,30 @@ var BeautifulJekyllJS = {
     } else {
       $(".img-desc").hide();
     }
+  },
+
+  initSearch : function() {
+    if (!document.getElementById("beautifuljekyll-search-overlay")) {
+      return;
+    }
+
+    $("#nav-search-link").click(function(e) {
+      e.preventDefault();
+      $("#beautifuljekyll-search-overlay").show();
+      $("#nav-search-input").focus().select();
+      $("body").addClass("overflow-hidden");
+    });
+    $("#nav-search-exit").click(function(e) {
+      e.preventDefault();
+      $("#beautifuljekyll-search-overlay").hide();
+      $("body").removeClass("overflow-hidden");
+    });
+    $(document).on('keyup', function(e) {
+      if (e.key == "Escape") {
+        $("#beautifuljekyll-search-overlay").hide();
+        $("body").removeClass("overflow-hidden");
+      }
+    });
   }
 };