-
Notifications
You must be signed in to change notification settings - Fork 27
/
Copy pathhero.html
56 lines (44 loc) · 2.82 KB
/
hero.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
{% 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>