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
mmistakes · Dec 7, 2017 · 7eb00bb · 7eb00bb
1 parent 9735207
commit 7eb00bb
Show file tree

Hide file tree

Showing 28 changed files with 722 additions and 567 deletions.
diff --git a/CHANGELOG.md b/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
 

diff --git a/_config.yml b/_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 :

diff --git a/_includes/masthead.html b/_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>

diff --git a/_includes/scripts.html b/_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 %}

diff --git a/_includes/search_form.html b/_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>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -19,7 +19,15 @@
     {% include browser-upgrade.html %}
     {% include masthead.html %}
 
-    {{ content }}
+    <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>

diff --git a/_layouts/search.html b/_layouts/search.html
@@ -23,7 +23,7 @@ <h1 class="page__title">{{ page.title }}</h1>
     {{ 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>

diff --git a/_sass/minimal-mistakes/_archive.scss b/_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);
@@ -315,4 +307,4 @@
       }
     }
   }
-}
+}
diff --git a/_sass/minimal-mistakes/_base.scss b/_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*/
   }
@@ -187,9 +212,9 @@ figure {
   display: -webkit-box;
   display: flex;
   -webkit-box-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
   -webkit-box-align: start;
-          align-items: flex-start;
+  align-items: flex-start;
   flex-wrap: wrap;
   margin: 2em 0;
 
@@ -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;
-}
+}
diff --git a/_sass/minimal-mistakes/_masthead.scss b/_sass/minimal-mistakes/_masthead.scss
@@ -6,9 +6,9 @@
   position: relative;
   border-bottom: 1px solid $border-color;
   -webkit-animation: $intro-transition;
-          animation: $intro-transition;
+  animation: $intro-transition;
   -webkit-animation-delay: 0.15s;
-          animation-delay: 0.15s;
+  animation-delay: 0.15s;
   z-index: 20;
 
   &__inner-wrap {
@@ -43,7 +43,7 @@
   padding: 0.5rem 0;
   align-self: stretch;
   -webkit-box-align: center;
-        align-items: center;
+  align-items: center;
   font-weight: bold;
   z-index: 20;
 }
@@ -80,4 +80,4 @@
     padding-right: 2em;
     font-weight: 700;
   }
-}
+}