search.html

---
layout: default
---

<div class="search container max-width-2">
		<div id="search-container">
			<h3 class="center mb3 accent">{{ site.translation[site.language].search }}</h3>
		<input type="text" id="search-input" placeholder="{{ site.translation[site.language].search_placeholder }}">
		</div>
</div>

<div class="clearfix">
<div class="recipes xs-px1 xs-mt2 center" id="results-container">

</div>
</div>





<!-- Script pointing to search-script.js -->
<script src="{{site.baseurl}}/plugins/simple-jekyll-search.min.js" type="text/javascript"></script>

<!-- Configuration -->
<script>
SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('results-container'),
  json: '{{site.baseurl}}/search.json',
  searchResultTemplate: '<div class="sm-col sm-col-6 md-col-6 lg-col-4 xs-px1 xs-mb2 left-align"><a class="block relative bg-accent" href="{url}"><div class="image ratio bg-cover" style="background-image:url({image});"></div><h1 class="title p2 m0 absolute bold white bottom-0 left-0">{title}</h1></a></div>',
	noResultsText: '{{ site.translation[site.language].no_result }}'
})
</script>

<script>
	$( document ).ready(function() {
		var searchInput = $('#search-input');
		searchInput.focus();
    searchInput.on('input', function() {
    	currentHeight = $('#search-container').outerHeight();
      $('.search').addClass('used').css('height', currentHeight);
		});
		$(document).keyup(function(event) {
    	if (searchInput.is(":focus") && (event.key == "Enter" || event.key == "Escape")) {
				searchInput.blur();
    	}
		});
	});
	
</script>