hero.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">
                {% if page.hero.image %}
                <p class="hero-image uk-text-center"><img src="{{ site.uploads | absolute_url }}{{ page.hero.image }}" alt="Hero"></p>
                {% endif %}
                <h1 class="uk-heading-primary uk-text-center uk-margin-remove-top">{{ page.hero.title }}</h1>
                {% if page.hero.subtitle %}<p class="uk-text-lead uk-text-center">{{ page.hero.subtitle }}</p>{% endif %}

                {% 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>