~xdavidwu/xdavidwu.link

650dab1743e6c100406c9344a8273afdfc643d33 — xdavidwu 3 years ago db06f89
reduce div on search
2 files changed, 28 insertions(+), 33 deletions(-)

M _includes/search/search_form.html
M _sass/minimal-mistakes/_search.scss
M _includes/search/search_form.html => _includes/search/search_form.html +23 -25
@@ 1,26 1,24 @@
<div class="search-content__inner-wrap">
  {%- assign search_provider = site.search_provider | default: "lunr" -%}
  {%- case search_provider -%}
  {%- when "lunr" -%}
  <form class="search-content__form" onkeydown="return event.key != 'Enter';">
    <label class="sr-only" for="search">
      {{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }}
    </label>
    <input type="search" id="search" class="search-input" tabindex="-1" autocomplete="off" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
  </form>
  <div id="results" class="results"></div>
  {%- when "google" -%}
  <form onsubmit="return googleCustomSearchExecute();" id="cse-search-box-form-id">
    <label class="sr-only" for="cse-search-input-box-id">
      {{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }}
    </label>
    <input type="search" id="cse-search-input-box-id" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
  </form>
  <div id="results" class="results">
    <gcse:searchresults-only></gcse:searchresults-only>
  </div>
  {%- when "algolia" -%}
  <div class="search-searchbar"></div>
  <div class="search-hits"></div>
  {%- endcase -%}
{%- assign search_provider = site.search_provider | default: "lunr" -%}
{%- case search_provider -%}
{%- when "lunr" -%}
<form class="search-content__form" onkeydown="return event.key != 'Enter';">
  <label class="sr-only" for="search">
    {{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }}
  </label>
  <input type="search" id="search" class="search-input" tabindex="-1" autocomplete="off" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
</form>
<div id="results" class="results"></div>
{%- when "google" -%}
<form onsubmit="return googleCustomSearchExecute();" id="cse-search-box-form-id">
  <label class="sr-only" for="cse-search-input-box-id">
    {{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }}
  </label>
  <input type="search" id="cse-search-input-box-id" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
</form>
<div id="results" class="results">
  <gcse:searchresults-only></gcse:searchresults-only>
</div>
{%- when "algolia" -%}
<div class="search-searchbar"></div>
<div class="search-hits"></div>
{%- endcase -%}

M _sass/minimal-mistakes/_search.scss => _sass/minimal-mistakes/_search.scss +5 -8
@@ 16,15 16,12 @@
.search-content {
  display: none;
  visibility: hidden;
  padding: 1em;
  animation: $intro-transition;
  animation-delay: 0.15s;

  &__inner-wrap {
    padding: 1em;
    animation: $intro-transition;
    animation-delay: 0.15s;

    @include breakpoint($x-large) {
      max-width: $max-width;
    }
  @include breakpoint($x-large) {
    max-width: $max-width;
  }

  .search-input {