Feature: Incorporate site search into masthead (#1383)

* Integrate search into masthead
* Fix cutoff descenders in archive article titles
* Remove search page from `/test` site
* Enable masthead search
* Remove dedicated search page
* Fix masthead search form padding
* Improve insertion of search content
* Speed up page transition
* Add fade transition to search content
* Rename visibility class names
* Add `site.search` to _config.yml
* Document site search feature
* Update CHANGELOG and history

CHANGELOG.md

@@ -8,6 +8,7 @@
 * Disable comments in `development` environment. [#1363](https://github.com/mmistakes/minimal-mistakes/pull/1363)
 * Exclude specific pages/posts from search index by adding `search: false` to the YAML Front Matter. [#1369](https://github.com/mmistakes/minimal-mistakes/pull/1369)
 * Add optional `description` key to masthead links for clarifying their purpose with the `title` attribute. [#1380](https://github.com/mmistakes/minimal-mistakes/pull/1380)
+* Incorporate site search into masthead. [#1383](https://github.com/mmistakes/minimal-mistakes/pull/1383)
 
 ### Bug Fixes
 

_config.yml

@@ -51,6 +51,7 @@ reCaptcha:
   secret                 :
 atom_feed:
   path                   : # blank (default) uses feed.xml
+search                   : # true, false (default)
 
 # SEO Related
 google_site_verification :

_includes/masthead.html

@@ -15,7 +15,14 @@
             </li>
           {% endfor %}
         </ul>
-        <button type="button">
+        {% if site.search == true %}
+        <button class="search__toggle" type="button">
+          <svg class="icon" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.99 16">
+            <path d="M15.5,13.12L13.19,10.8a1.69,1.69,0,0,0-1.28-.55l-0.06-.06A6.5,6.5,0,0,0,5.77,0,6.5,6.5,0,0,0,2.46,11.59a6.47,6.47,0,0,0,7.74.26l0.05,0.05a1.65,1.65,0,0,0,.5,1.24l2.38,2.38A1.68,1.68,0,0,0,15.5,13.12ZM6.4,2A4.41,4.41,0,1,1,2,6.4,4.43,4.43,0,0,1,6.4,2Z" transform="translate(-.01)"></path>
+          </svg>
+        </button>
+        {% endif %}
+        <button class="greedy-nav__toggle" type="button">
           <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle Menu" }}</span>
           <div class="navicon"></div>
         </button>

_includes/scripts.html

@@ -11,7 +11,7 @@
   <script src="{{ '/assets/js/main.min.js' | absolute_url }}"></script>
 {% endif %}
 
-{% if page.layout == 'search' %}
+{% if site.search == true or page.layout == 'search' %}
   <script src="{{ '/assets/js/lunr.min.js' | absolute_url }}"></script>
   <script src="{{ '/assets/js/lunr-en.js' | absolute_url }}"></script>
 {% endif %}

_includes/search_form.html

@@ -0,0 +1,4 @@
+<div class="search-content__inner-wrap">
+  <input type="text" id="search" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
+  <div id="results" class="results"></div>
+</div>

_layouts/default.html

@@ -19,7 +19,15 @@
     {% include browser-upgrade.html %}
     {% include masthead.html %}
 
+    <div class="initial-content">
       {{ content }}
+    </div>
+
+    {% if site.search == true %}
+      <div class="search-content">
+        {% include search_form.html %}
+      </div>
+    {% endif %}
 
     <div class="page__footer">
       <footer>

_layouts/search.html

@@ -23,7 +23,7 @@ layout: default
     {{ content }}
 
     <form>
-      <input placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: "Enter your search term..." }}" type="search" id="search" class="search-input">
+      <input type="input" id="search" class="search-input" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
     </form>
 
     <div id="results"></div>

_sass/minimal-mistakes/_archive.scss

@@ -37,6 +37,7 @@
 .archive__item-title {
   margin-bottom: 0.25em;
   font-family: $sans-serif-narrow;
+  line-height: initial;
   overflow: hidden;
   text-overflow: ellipsis;
 
@@ -47,7 +48,6 @@
 
 /* remove border*/
 .page__content {
-
   .archive__item-title {
     margin-top: 1em;
     border-bottom: none;
@@ -72,7 +72,6 @@
 }
 
 .archive__item:hover {
-
   .archive__item-teaser {
     box-shadow: 0 0 10px rgba(#000, 0.25);
   }
@@ -82,25 +81,21 @@
   }
 }
 
-
 /*
    List view
    ========================================================================== */
 
 .list__item {
-
   .page__meta {
     margin: 0 0 4px;
   }
 }
 
-
 /*
    Grid view
    ========================================================================== */
 
 .archive {
-
   .grid__wrapper {
     /* extend grid elements to the right */
 
@@ -121,12 +116,12 @@
     float: left;
     width: span(5 of 10);
 
-    &:nth-child(2n+1) {
+    &:nth-child(2n + 1) {
       clear: both;
       margin-left: 0;
     }
 
-    &:nth-child(2n+2) {
+    &:nth-child(2n + 2) {
       clear: none;
       margin-left: gutter(of 10);
     }
@@ -137,25 +132,25 @@
     margin-right: 0; /* override margin*/
     width: span(3 of 12);
 
-    &:nth-child(2n+1) {
+    &:nth-child(2n + 1) {
       clear: none;
     }
 
-    &:nth-child(4n+1) {
+    &:nth-child(4n + 1) {
       clear: both;
     }
 
-    &:nth-child(4n+2) {
+    &:nth-child(4n + 2) {
       clear: none;
       margin-left: gutter(1 of 12);
     }
 
-    &:nth-child(4n+3) {
+    &:nth-child(4n + 3) {
       clear: none;
       margin-left: gutter(1 of 12);
     }
 
-    &:nth-child(4n+4) {
+    &:nth-child(4n + 4) {
       clear: none;
       margin-left: gutter(1 of 12);
     }
@@ -180,7 +175,6 @@
   }
 
   .archive__item-teaser {
-
     @include breakpoint($small) {
       max-height: 200px;
     }
@@ -191,7 +185,6 @@
   }
 }
 
-
 /*
    Features
    ========================================================================== */
@@ -211,17 +204,17 @@
     margin-bottom: 0;
     width: span(4 of 12);
 
-    &:nth-child(3n+1) {
+    &:nth-child(3n + 1) {
       clear: both;
       margin-left: 0;
     }
 
-    &:nth-child(3n+2) {
+    &:nth-child(3n + 2) {
       clear: none;
       margin-left: gutter(of 12);
     }
 
-    &:nth-child(3n+3) {
+    &:nth-child(3n + 3) {
       clear: none;
       margin-left: gutter(of 12);
     }
@@ -245,7 +238,6 @@
     }
 
     @include breakpoint($small) {
-
       .archive__item-teaser {
         float: left;
         width: span(5 of 12);

_sass/minimal-mistakes/_base.scss

@@ -21,7 +21,12 @@ body {
   }
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin: 2em 0 0.5em;
   line-height: 1.2;
   font-family: $header-font-family;
@@ -53,7 +58,8 @@ h6 {
   font-size: $type-size-6;
 }
 
-small, .small {
+small,
+.small {
   font-size: $type-size-6;
 }
 
@@ -76,7 +82,15 @@ del a {
 
 /* reduce orphans and widows when printing */
 
-p, pre, blockquote, ul, ol, dl, figure, table, fieldset {
+p,
+pre,
+blockquote,
+ul,
+ol,
+dl,
+figure,
+table,
+fieldset {
   orphans: 3;
   widows: 3;
 }
@@ -127,9 +141,19 @@ a {
   }
 }
 
+/* buttons */
+
+button:focus {
+  @extend %tab-focus;
+}
+
 /* code */
 
-tt, code, kbd, samp, pre {
+tt,
+code,
+kbd,
+samp,
+pre {
   font-family: $monospace;
 }
 
@@ -150,7 +174,8 @@ td > code {
   border-radius: $border-radius;
   box-shadow: $box-shadow;
 
-  &:before, &:after {
+  &:before,
+  &:after {
     letter-spacing: -0.2em;
     content: "\00a0"; /* non-breaking space*/
   }
@@ -255,14 +280,12 @@ figcaption {
   }
 }
 
-
 /* Fix IE9 SVG bug */
 
 svg:not(:root) {
   overflow: hidden;
 }
 
-
 /*
    Navigation lists
    ========================================================================== */
@@ -310,7 +333,28 @@ nav {
    Global animation transition
    ========================================================================== */
 
-b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser {
+b,
+i,
+strong,
+em,
+blockquote,
+p,
+q,
+span,
+figure,
+img,
+h1,
+h2,
+header,
+input,
+a,
+tr,
+td,
+form button,
+input[type="submit"],
+.btn,
+.highlight,
+.archive__item-teaser {
   -webkit-transition: $global-transition;
   transition: $global-transition;
 }

_sass/minimal-mistakes/_navigation.scss

@@ -6,7 +6,7 @@
    Breadcrumb navigation links
    ========================================================================== */
 
-   .breadcrumbs {
+.breadcrumbs {
   @include clearfix;
   margin: 0 auto;
   max-width: 100%;
@@ -15,8 +15,8 @@
   font-family: $sans-serif;
   -webkit-animation: $intro-transition;
   animation: $intro-transition;
-    -webkit-animation-delay: 0.30s;
+  -webkit-animation-delay: 0.3s;
-            animation-delay: 0.30s;
+  animation-delay: 0.3s;
 
   @include breakpoint($large) {
     padding-left: 1em;
@@ -49,14 +49,13 @@
   .current {
     font-weight: bold;
   }
-  }
+}
 
-
+/*
-  /*
      Post pagination navigation links
      ========================================================================== */
 
-  .pagination {
+.pagination {
   @include clearfix();
   float: left;
   margin-top: 1em;
@@ -159,23 +158,22 @@
       cursor: not-allowed;
     }
   }
-  }
+}
 
-  .page__content + .pagination,
+.page__content + .pagination,
-  .page__meta + .pagination,
+.page__meta + .pagination,
-  .page__share + .pagination,
+.page__share + .pagination,
-  .page__comments + .pagination {
+.page__comments + .pagination {
   margin-top: 2em;
   padding-top: 2em;
   border-top: 1px solid $border-color;
-  }
+}
 
-
+/*
-  /*
      Priority plus navigation
      ========================================================================== */
 
-  .greedy-nav {
+.greedy-nav {
   position: relative;
   display: -webkit-box;
   display: flex;
@@ -199,7 +197,7 @@
     }
   }
 
-    button {
+  &__toggle {
     padding: 0 0.5rem;
     align-self: stretch;
     border: 0;
@@ -216,18 +214,11 @@
     justify-content: flex-end;
     -webkit-box-flex: 1;
     flex: 1;
-      padding-right: 2rem;
     overflow: hidden;
 
     li {
       -webkit-box-flex: 0;
       flex: none;
-
-        &:last-child {
-          a {
-            margin-right: 0;
-          }
-        }
     }
 
     a {
@@ -243,8 +234,8 @@
         width: 100%;
         -webkit-transition: $global-transition;
         transition: $global-transition;
-          -webkit-transform: scaleX(0) translate3d(0, 0 , 0);
+        -webkit-transform: scaleX(0) translate3d(0, 0, 0);
-                  transform: scaleX(0) translate3d(0, 0 , 0); /* hide*/
+        transform: scaleX(0) translate3d(0, 0, 0); /* hide*/
       }
 
       &:hover:before {
@@ -316,14 +307,13 @@
       }
     }
   }
-  }
+}
 
-
+/*
-  /*
      Navigation list
      ========================================================================== */
 
-  .nav__list {
+.nav__list {
   margin-bottom: 1.5em;
 
   input[type="checkbox"],
@@ -332,7 +322,6 @@
   }
 
   @include breakpoint(max-width ($large - 1px)) {
-
     label {
       position: relative;
       display: inline-block;
@@ -349,7 +338,7 @@
 
       &:before,
       &:after {
-          content: '';
+        content: "";
         position: absolute;
         right: 1em;
         top: 1.25em;
@@ -421,9 +410,9 @@
       }
     }
   }
-  }
+}
 
-  .nav__list .nav__items {
+.nav__list .nav__items {
   margin: 0;
   font-size: 1.25rem;
 
@@ -450,9 +439,9 @@
     -ms-transform: translate(0, 10%);
     transform: translate(0, 10%);
   }
-  }
+}
 
-  @include breakpoint(max-width ($large - 1px)) {
+@include breakpoint(max-width ($large - 1px)) {
   .nav__list input:checked ~ .nav__items {
     -webkit-transition: 0.5s ease-in-out;
     transition: 0.5s ease-in-out;
@@ -464,17 +453,17 @@
     -ms-transform: translate(0, 0);
     transform: translate(0, 0);
   }
-  }
+}
 
-  .nav__title {
+.nav__title {
   margin: 0;
   padding: 0.5rem 1rem;
   font-family: $sans-serif-narrow;
   font-size: $type-size-5;
   font-weight: bold;
-  }
+}
 
-  .nav__sub-title {
+.nav__sub-title {
   display: block;
   margin: 0.5rem 0;
   padding: 0.5rem 0;
@@ -483,14 +472,13 @@
   font-weight: bold;
   text-transform: uppercase;
   border-bottom: 1px solid $border-color;
-  }
+}
 
-
+/*
-  /*
      Table of contents navigation
      ========================================================================== */
 
-  .toc {
+.toc {
   font-family: $sans-serif-narrow;
   color: $gray;
   text-transform: uppercase;
@@ -507,9 +495,9 @@
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
   }
-  }
+}
 
-  .toc__menu {
+.toc__menu {
   margin: 0;
   padding: 0;
   width: 100%;
@@ -549,4 +537,4 @@
       display: block;
     }
   }
-  }
+}

_sass/minimal-mistakes/_page.scss

@@ -12,8 +12,8 @@
   -webkit-animation: $intro-transition;
   animation: $intro-transition;
   max-width: 100%;
-  -webkit-animation-delay: 0.35s;
+  -webkit-animation-delay: 0.15s;
-          animation-delay: 0.35s;
+  animation-delay: 0.15s;
 
   @include breakpoint($x-large) {
     max-width: $x-large;
@@ -21,7 +21,6 @@
 }
 
 .page {
-
   @include breakpoint($large) {
     float: right;
     width: calc(100% - #{$right-sidebar-width-narrow});
@@ -68,13 +67,14 @@
 }
 
 .page__content {
-
   h2 {
     padding-bottom: 0.5em;
     border-bottom: 1px solid $border-color;
   }
 
-  p, li, dl {
+  p,
+  li,
+  dl {
     font-size: 1em;
   }
 
@@ -92,7 +92,6 @@
   }
 
   a:not(.btn) {
-
     &:hover {
       text-decoration: underline;
 
@@ -242,7 +241,6 @@
   text-transform: uppercase;
 }
 
-
 /*
    Page meta
    ========================================================================== */
@@ -268,7 +266,6 @@
   text-transform: uppercase;
 }
 
-
 /*
    Page taxonomy
    ========================================================================== */
@@ -298,7 +295,6 @@
   }
 }
 
-
 /*
    Comments
    ========================================================================== */
@@ -397,7 +393,6 @@
   }
 }
 
-
 /*
    Related
    ========================================================================== */

_sass/minimal-mistakes/_search.scss

@@ -7,3 +7,101 @@
     margin-bottom: 0.25em;
   }
 }
+
+.search__toggle {
+  margin-left: 1rem;
+  margin-right: 1rem;
+  border: 0;
+  outline: none;
+  color: $muted-text-color;
+  background-color: transparent;
+  cursor: pointer;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+
+  &:hover {
+    color: $text-color;
+  }
+}
+
+.search-icon {
+  width: 100%;
+  height: 100%;
+}
+
+.search-content {
+  display: none;
+  visibility: hidden;
+  padding-top: 1em;
+  padding-bottom: 1em;
+
+  &__inner-wrap {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1em;
+    padding-right: 1em;
+    -webkit-animation: $intro-transition;
+    animation: $intro-transition;
+    -webkit-animation-delay: 0.15s;
+    animation-delay: 0.15s;
+
+    @include breakpoint($x-large) {
+      max-width: $x-large;
+    }
+  }
+
+  .search-input {
+    display: block;
+    margin-bottom: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    background-color: transparent;
+    font-size: $type-size-3;
+
+    @include breakpoint($large) {
+      font-size: $type-size-2;
+    }
+
+    @include breakpoint($x-large) {
+      font-size: $type-size-1;
+    }
+  }
+
+  &.is--visible {
+    display: block;
+    visibility: visible;
+
+    &::after {
+      content: "";
+      display: block;
+    }
+  }
+
+  .results__found {
+    margin-top: 0.5em;
+    font-size: $type-size-6;
+  }
+
+  .archive__item {
+    margin-bottom: 2em;
+
+    @include breakpoint($large) {
+      width: 75%;
+    }
+
+    @include breakpoint($x-large) {
+      width: 50%;
+    }
+  }
+
+  .archive__item-title {
+    margin-top: 0;
+  }
+
+  .archive__item-excerpt {
+    margin-bottom: 0;
+  }
+}

_sass/minimal-mistakes/_utilities.scss

@@ -8,7 +8,8 @@
 
 /* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
 
-.hidden {
+.hidden,
+.is--hidden {
   display: none;
   visibility: hidden;
 }
@@ -60,7 +61,6 @@ body:hover .visually-hidden button {
   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 }
 
-
 /*
    Skip links
    ========================================================================== */
@@ -79,7 +79,6 @@ body:hover .visually-hidden button {
   list-style: none;
 }
 
-
 /*
    Type
    ========================================================================== */
@@ -104,14 +103,15 @@ body:hover .visually-hidden button {
   white-space: nowrap;
 }
 
-
 /*
    Alignment
    ========================================================================== */
 
 /* clearfix */
 
-.cf { clear: both; }
+.cf {
+  clear: both;
+}
 
 .wrapper {
   margin-left: auto;
@@ -119,7 +119,6 @@ body:hover .visually-hidden button {
   width: 100%;
 }
 
-
 /*
    Images
    ========================================================================== */
@@ -161,7 +160,7 @@ body:hover .visually-hidden button {
 /* file page content container */
 
 .full {
-  @include breakpoint($large){
+  @include breakpoint($large) {
     margin-right: -1 * span(2.5 of 12) !important;
   }
 }
@@ -291,7 +290,6 @@ body:hover .visually-hidden button {
   }
 }
 
-
 /*
    Navicons
    ========================================================================== */
@@ -331,7 +329,8 @@ body:hover .visually-hidden button {
   background: transparent;
 
   /* overlay the lines by setting both their top values to 0*/
-  &:before, &:after{
+  &:before,
+  &:after {
     -webkit-transform-origin: 50% 50%;
     -ms-transform-origin: 50% 50%;
     transform-origin: 50% 50%;
@@ -340,17 +339,16 @@ body:hover .visually-hidden button {
   }
 
   /* rotate the lines to form the x shape*/
-  &:before{
+  &:before {
-    -webkit-transform: rotate3d(0,0,1,45deg);
+    -webkit-transform: rotate3d(0, 0, 1, 45deg);
-            transform: rotate3d(0,0,1,45deg);
+    transform: rotate3d(0, 0, 1, 45deg);
   }
-  &:after{
+  &:after {
-    -webkit-transform: rotate3d(0,0,1,-45deg);
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
-            transform: rotate3d(0,0,1,-45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
   }
 }
 
-
 /*
    Sticky, fixed to top content
    ========================================================================== */
@@ -368,7 +366,6 @@ body:hover .visually-hidden button {
   }
 }
 
-
 /*
    Wells
    ========================================================================== */
@@ -383,7 +380,6 @@ body:hover .visually-hidden button {
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 
-
 /*
    Modals
    ========================================================================== */
@@ -438,7 +434,6 @@ body:hover .visually-hidden button {
   }
 }
 
-
 /*
    Footnotes
    ========================================================================== */
@@ -451,7 +446,9 @@ body:hover .visually-hidden button {
 .footnotes {
   color: mix(#fff, $gray, 25%);
 
-  ol, li, p {
+  ol,
+  li,
+  p {
     margin-bottom: 0;
     font-size: $type-size-6;
   }
@@ -466,7 +463,6 @@ a.reversefootnote {
   }
 }
 
-
 /*
    Required
    ========================================================================== */
@@ -476,14 +472,14 @@ a.reversefootnote {
   font-weight: bold;
 }
 
-
 /*
    Google Custom Search Engine
    ========================================================================== */
 
 .gsc-control-cse {
-
+  table,
-  table, tr, td {
+  tr,
+  td {
     border: 0; /* remove table borders widget */
   }
 }

assets/js/_main.js

@@ -2,11 +2,10 @@
    jQuery plugin settings and other scripts
    ========================================================================== */
 
-$(document).ready(function(){
+$(document).ready(function() {
-
   // Sticky footer
   var bumpIt = function() {
-      $('body').css('margin-bottom', $('.page__footer').outerHeight(true));
+      $("body").css("margin-bottom", $(".page__footer").outerHeight(true));
     },
     didResize = false;
 
@@ -16,7 +15,7 @@ $(document).ready(function(){
     didResize = true;
   });
   setInterval(function() {
-    if(didResize) {
+    if (didResize) {
       didResize = false;
       bumpIt();
     }
@@ -31,11 +30,23 @@ $(document).ready(function(){
     $(".author__urls-wrapper button").toggleClass("open");
   });
 
+  // Search toggle
+  $(".search__toggle").on("click", function() {
+    $(".search-content").toggleClass("is--visible");
+    $(".initial-content").toggleClass("is--hidden");
+    // set focus on input
+    setTimeout(function() {
+      $("#search").focus();
+    }, 400);
+  });
+
   // init smooth scroll
-  $("a").smoothScroll({offset: -20});
+  $("a").smoothScroll({ offset: -20 });
 
   // add lightbox class to all image links
-  $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.JPG'],a[href$='.png'],a[href$='.gif']").addClass("image-popup");
+  $(
+    "a[href$='.jpg'],a[href$='.jpeg'],a[href$='.JPG'],a[href$='.png'],a[href$='.gif']"
+  ).addClass("image-popup");
 
   // Magnific-Popup options
   $(".image-popup").magnificPopup({
@@ -45,28 +56,30 @@ $(document).ready(function(){
     //   }
     //   return true;
     // },
-    type: 'image',
+    type: "image",
-    tLoading: 'Loading image #%curr%...',
+    tLoading: "Loading image #%curr%...",
     gallery: {
       enabled: true,
       navigateByImgClick: true,
-      preload: [0,1] // Will preload 0 - before current, and 1 after the current image
+      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
     },
     image: {
-      tError: '<a href="%url%">Image #%curr%</a> could not be loaded.',
+      tError: '<a href="%url%">Image #%curr%</a> could not be loaded.'
     },
     removalDelay: 500, // Delay in milliseconds before popup is removed
     // Class that is added to body when popup is open.
     // make it unique to apply your CSS animations just to this exact popup
-    mainClass: 'mfp-zoom-in',
+    mainClass: "mfp-zoom-in",
     callbacks: {
       beforeOpen: function() {
         // just a hack that adds mfp-anim class to markup
-        this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
+        this.st.image.markup = this.st.image.markup.replace(
+          "mfp-figure",
+          "mfp-figure mfp-with-anim"
+        );
       }
     },
     closeOnContentClick: true,
     midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
   });
-
 });

assets/js/lunr-en.js

@@ -59,7 +59,7 @@ $(document).ready(function() {
     var query = $(this).val();
     var result = idx.search(query);
     resultdiv.empty();
-    resultdiv.prepend('<p>'+result.length+' {{ site.data.ui-text[site.locale].results_found | default: "Result(s) found" }}</p>');
+    resultdiv.prepend('<p class="results__found">'+result.length+' {{ site.data.ui-text[site.locale].results_found | default: "Result(s) found" }}</p>');
     for (var item in result) {
       var ref = result[item].ref;
       if(store[ref].teaser){

assets/js/plugins/jquery.greedy-navigation.js

@@ -4,11 +4,10 @@ Licensed under the MIT license - http://opensource.org/licenses/MIT
 Copyright (c) 2015 Luke Jackson
 */
 
-$(document).ready(function(){
+$(document).ready(function() {
-
+  var $btn = $("nav.greedy-nav .greedy-nav__toggle");
-  var $btn = $('nav.greedy-nav button');
+  var $vlinks = $("nav.greedy-nav .visible-links");
-  var $vlinks = $('nav.greedy-nav .visible-links');
+  var $hlinks = $("nav.greedy-nav .hidden-links");
-  var $hlinks = $('nav.greedy-nav .hidden-links');
 
   var numOfItems = 0;
   var totalSpace = 0;
@@ -25,7 +24,6 @@ $(document).ready(function(){
   var availableSpace, numOfVisibleItems, requiredSpace, timer;
 
   function check() {
-
     // Get instant state
     availableSpace = $vlinks.width() - 10;
     numOfVisibleItems = $vlinks.children().length;
@@ -33,21 +31,27 @@ $(document).ready(function(){
 
     // There is not enough space
     if (requiredSpace > availableSpace) {
-      $vlinks.children().last().prependTo($hlinks);
+      $vlinks
+        .children()
+        .last()
+        .prependTo($hlinks);
       numOfVisibleItems -= 1;
       check();
       // There is more than enough space
     } else if (availableSpace > breakWidths[numOfVisibleItems]) {
-      $hlinks.children().first().appendTo($vlinks);
+      $hlinks
+        .children()
+        .first()
+        .appendTo($vlinks);
       numOfVisibleItems += 1;
       check();
     }
     // Update the button accordingly
     $btn.attr("count", numOfItems - numOfVisibleItems);
     if (numOfVisibleItems === numOfItems) {
-      $btn.addClass('hidden');
+      $btn.addClass("hidden");
     } else {
-      $btn.removeClass('hidden');
+      $btn.removeClass("hidden");
     }
   }
 
@@ -56,23 +60,24 @@ $(document).ready(function(){
     check();
   });
 
-  $btn.on('click', function() {
+  $btn.on("click", function() {
-    $hlinks.toggleClass('hidden');
+    $hlinks.toggleClass("hidden");
-    $(this).toggleClass('close');
+    $(this).toggleClass("close");
     clearTimeout(timer);
   });
 
-  $hlinks.on('mouseleave', function() {
+  $hlinks
+    .on("mouseleave", function() {
       // Mouse has left, start the timer
       timer = setTimeout(function() {
-      $hlinks.addClass('hidden');
+        $hlinks.addClass("hidden");
-      $btn.toggleClass('close');
+        $btn.toggleClass("close");
       }, closingTime);
-  }).on('mouseenter', function() {
+    })
+    .on("mouseenter", function() {
       // Mouse is back, cancel the timer
       clearTimeout(timer);
-  })
+    });
 
   check();
-
 });

docs/_config.yml

@@ -55,6 +55,8 @@ reCaptcha:
 atom_feed:
   path                   : # blank (default) uses feed.xml
 
+search                   : true # true, false (default)
+
 # SEO Related
 google_site_verification : "UQj93ERU9zgECodaaXgVpkjrFn9UrDMEzVamacSoQ8Y" # Replace this with your ID, or delete
 bing_site_verification   :

docs/_data/navigation.yml

@@ -22,8 +22,6 @@ foo:
 main:
   - title: "Quick-Start Guide"
     url: /docs/quick-start-guide/
-  - title: "Search"
-    url: /search/
   - title: "About"
     url: /about/
   - title: "Sample Posts"

docs/_docs/05-configuration.md

@@ -457,6 +457,16 @@ atom_feed:
 **Note:** By default the site feed is linked in two locations: inside the [`<head>` element](https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/head.html) and at the bottom of every page in the [site footer](https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/footer.html). 
 {: .notice--info}
 
+### Site Search
+
+Enable basic site search powered by [Lunr](https://lunrjs.com/) by adding the following to `_config.yml`:
+
+```yaml
+search: true
+```
+
+![masthead search example]({{ "/assets/images/masthead-search.gif" | absolute_url }})
+
 ### SEO, Social Sharing, and Analytics Settings
 
 All optional, but a good idea to take the time setting up to improve SEO and links shared from the site.

docs/_docs/10-layouts.md

@@ -7,7 +7,7 @@ single_layout_gallery:
     alt: "single layout with header example"
   - image_path: /assets/images/mm-layout-single-meta.png
     alt: "single layout with comments and related posts"
-last_modified_at: 2017-11-28T08:42:54-05:00
+last_modified_at: 2017-12-06T14:58:04-05:00
 toc: true
 toc_label: "Included Layouts"
 toc_icon: "columns"
@@ -275,6 +275,9 @@ A page with a search form. Add `layout: search` to the YAML Front Matter similar
 
 ![search page layout example]({{ "/assets/images/search-layout-example.png" | absolute_url }})
 
+**Note:** A page using the `layout: search` isn't compatible with the new [site search feature]({{ "/docs/configuration/#site-search" | absolute_url }}) incorporated in the masthead.
+{: .notice--warning}
+
 ### Exclusions
 
 If you would like to exclude specific pages/posts from the search index set the search flag to `false` in the YAML Front Matter for the page/post.

docs/_docs/18-history.md

@@ -4,7 +4,7 @@ permalink: /docs/history/
 excerpt: "Change log of enhancements and bug fixes made to the theme."
 sidebar:
   nav: docs
-last_modified_at: 2017-12-04T14:49:13-05:00
+last_modified_at: 2017-12-07T08:52:23-05:00
 toc: true
 ---
 
@@ -18,6 +18,7 @@ toc: true
 * Disable comments in `development` environment. [#1363](https://github.com/mmistakes/minimal-mistakes/pull/1363)
 * Exclude specific pages/posts from search index by adding `search: false` to the YAML Front Matter. [#1369](https://github.com/mmistakes/minimal-mistakes/pull/1369)
 * Add optional `description` key to masthead links for clarifying their purpose with the `title` attribute. [#1380](https://github.com/mmistakes/minimal-mistakes/pull/1380)
+* Incorporate site search into masthead. [#1383](https://github.com/mmistakes/minimal-mistakes/pull/1383)
 
 ### Bug Fixes
 

docs/_pages/search.md

@@ -1,5 +0,0 @@
----
-layout: search
-title: "Search"
-permalink: /search/
----

test/_config.yml

@@ -49,6 +49,7 @@ staticman:
         format           : "iso8601" # "iso8601" (default), "timestamp-seconds", "timestamp-milliseconds"
 atom_feed:
   path                   : # blank (default) uses feed.xml
+search                   : true # true, false (default)
 
 # SEO Related
 google_site_verification :

test/_data/navigation.yml

@@ -2,8 +2,6 @@
 main:
   - title: "Quick-Start Guide"
     url: https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/
-  - title: "Search"
-    url: /search/
   - title: "About"
     url: https://mmistakes.github.io/minimal-mistakes/about/
   - title: "Sample Posts"

test/_pages/search.md

@@ -1,5 +0,0 @@
----
-layout: search
-title: "Search"
-permalink: /search/
----