WebsiteDev/_includes/hero.html
2021-01-26 16:38:24 +01:00

53 lines
2.5 KiB
HTML

{% if page.header.image %}
{% assign image = page.header.image %}
{% endif %}
{% if page.header.align %}
{% assign align = page.header.align %}
{% else %}
{% assign align = "center" %}
{% endif %}
<header class="uk-background-{{ align }}-center uk-background-cover" style="{% if page.header.background %}background-color: {{ page.header.background }};{% endif %}{% if page.header.image %} background-image: url({% if image contains 'http' %}{{ image }}{% else %}{{ site.uploads | absolute_url }}{{ image }}{% endif %});{% endif %}">
<div class="uk-overlay-header" style="{% if page.header.overlay %}background: {{ page.header.overlay }};{% endif %}">
{% include navbar.html %}
<div class="uk-section section-hero uk-position-relative" data-uk-scrollspy="cls: uk-animation-slide-bottom-medium; repeat: true">
<div class="uk-container uk-container-small">
<h1 class="uk-heading-primary uk-text-center uk-margin-remove-top">{{ page.hero.title }}</h1>
{% if page.hero.search %}
<div class="hero-search">
<!-- Html Elements for Search -->
<div class="uk-position-relative">
<form class="uk-search uk-search-default uk-width-1-1" name="search-hero" onsubmit="return false;">
<span class="uk-search-icon-flip" data-uk-search-icon></span>
<input id="search-hero" class="uk-search-input uk-box-shadow-large" type="search" placeholder="{{ site.data.translation[site.lang].search_placeholder | default: "Search for answers" }}" autocomplete="off">
</form>
<ul id="search-hero-results" class="uk-position-absolute uk-width-1-1 uk-list"></ul>
</div>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-hero'),
resultsContainer: document.getElementById('search-hero-results'),
noResultsText: '<li class="no-results">{{ site.data.translation[site.lang].search_no_results | default: "No results found" }}</li>',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>',
json: '/search.json'
});
searchResults("search-hero");
</script>
</div>
{% endif %}
</div>
</div>
</div>
</header>