90 lines
3.9 KiB
HTML
90 lines
3.9 KiB
HTML
{{ if and .IsHome (and (.Site.Params.enableJumbotron | default false) .Site.Data.jumbotron) }}
|
|
{{
|
|
$jumbo_fullscreen := (or
|
|
(.Site.Data.jumbotron.fullscreen | default false)
|
|
(.Site.Data.jumbotron.backgroundVideo)
|
|
)
|
|
}}
|
|
{{ if .Site.Data.jumbotron.backgroundVideo }}
|
|
<div class="video_container">
|
|
<video
|
|
class="jumbotron_video"
|
|
id="jumbotron_video"
|
|
src="{{ .Site.Data.jumbotron.backgroundVideo }}"
|
|
playsinline
|
|
autoplay mute loop>
|
|
{{ if .Site.Data.jumbotron.backgroundVideoMp4 }}
|
|
<source src="{{ .Site.Data.jumbotron.backgroundVideoMp4 }}" type="video/mp4">
|
|
{{ end }}
|
|
{{ if .Site.Data.jumbotron.backgroundVideoWebm }}
|
|
<source src="{{ .Site.Data.jumbotron.backgroundVideoWebm }}" type="video/webm">
|
|
{{ end }}
|
|
</video>
|
|
</div>
|
|
{{ end }}
|
|
<div class="jumbotron">
|
|
{{ if .Site.Data.jumbotron.image }}
|
|
<img src="{{ .Site.Data.jumbotron.image }}" />
|
|
{{ end }}
|
|
<div class="main_box">
|
|
<h2 class="
|
|
{{ if (.Site.Data.jumbotron.hugeTitle | default false) }}
|
|
huge
|
|
{{ end }}
|
|
">{{ .Site.Data.jumbotron.title }}</h2>
|
|
<h3>{{ .Site.Data.jumbotron.subtitle }}</h3>
|
|
{{ if .Site.Data.jumbotron.backgroundVideo }}
|
|
<ul id="play_button_container" style="display: none">
|
|
<li>
|
|
<a title="Play" style="border-radius: 100%; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center;" class="shareBtn" onclick="playvideo();"> </a>
|
|
</li>
|
|
</ul>
|
|
<script>
|
|
var jumbotron_video = document.getElementById('jumbotron_video');
|
|
var play_button_container = document.getElementById('play_button_container');
|
|
window.onload = function() {
|
|
setTimeout(function() {
|
|
if (jumbotron_video.paused) {
|
|
play_button_container.style.display = 'block';
|
|
}
|
|
}, 1000);
|
|
};
|
|
function playvideo() {
|
|
jumbotron_video.play();
|
|
play_button_container.style.display = 'none';
|
|
}
|
|
</script>
|
|
{{ end }}
|
|
{{ if .Site.Data.jumbotron.links }}
|
|
<ul>
|
|
{{ range .Site.Data.jumbotron.links }}
|
|
<li>
|
|
<a class="{{ if .huge }}huge{{ end }}" href="{{ .link | safeURL }}">
|
|
{{ .title }}
|
|
</a>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ if (
|
|
and
|
|
$jumbo_fullscreen
|
|
(.Site.Data.jumbotron.downArrow | default false)
|
|
) }}
|
|
<div class="arrow" onclick="jumpdown();">
|
|
<svg version="1.1" viewBox="0 0 33.867 33.867" xmlns="http://www.w3.org/2000/svg">
|
|
<path transform="scale(.26459)" d="m16 34.346v8c0 2.3545 1.0067 4.4663 2.6152 5.9277l45.385 45.385 45.385-45.385c1.6086-1.4614 2.6152-3.5732 2.6152-5.9277v-8h-8c-2.335 0-4.4287 0.99084-5.8887 2.5762l-0.037109 0.039063-34.074 34.074-34.074-34.074c-0.012103-0.013323-0.024917-0.025824-0.037109-0.039063-1.4599-1.5853-3.5537-2.5762-5.8887-2.5762h-8z" />
|
|
</svg>
|
|
</div>
|
|
<script>
|
|
function jumpdown() {
|
|
window.scrollTo({
|
|
top: window.innerHeight, left: 0, behavior: 'smooth'
|
|
});
|
|
}
|
|
</script>
|
|
{{ end }}
|
|
{{ end }}
|