You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.9 KiB
65 lines
1.9 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
{% include head.html %}
|
||
|
|
|
||
|
|
<body>
|
||
|
|
{% include navigation.html %}
|
||
|
|
|
||
|
|
{% assign count = site.data.slideshow.images | size %}
|
||
|
|
{% assign count_f = count | times: 1.0 %}
|
||
|
|
{% assign img_percent = 100 | divided_by: count_f %}
|
||
|
|
{% assign img_time_f = site.data.slideshow.img_time | times: 1.0 %}
|
||
|
|
|
||
|
|
{% assign fade_percent = site.data.slideshow.fade_time | divided_by: img_time_f | times: img_percent %}
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#slideshow img, span {
|
||
|
|
animation: slideshow {{ site.data.slideshow.img_time | times: count }}s infinite;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideshow {
|
||
|
|
{{ fade_percent }}% {opacity: 1;}
|
||
|
|
{{ img_percent }}% {opacity: 1;}
|
||
|
|
{{ img_percent | plus: fade_percent }}% {opacity: 0;}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#slideshow .orange {
|
||
|
|
position: relative;
|
||
|
|
top: 100%;
|
||
|
|
}
|
||
|
|
{% for item in site.data.slideshow.images %}
|
||
|
|
#slideshow img:nth-child({{ forloop.index }}) { animation-delay: {{ forloop.index0 | times: site.data.slideshow.img_time }}s; }
|
||
|
|
#slideshow span:nth-child({{ forloop.index | plus: count }}) { animation-delay: {{ forloop.index0 | times: site.data.slideshow.img_time }}s; }
|
||
|
|
{% endfor %}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div id="slideshow">
|
||
|
|
{%- for item in site.data.slideshow.images -%}
|
||
|
|
<img src="/assets/images/slideshow/{{ item.filename }}" alt="{{ item.caption }}">
|
||
|
|
{%- endfor -%}
|
||
|
|
{%- for item in site.data.slideshow.images -%}
|
||
|
|
<span alt="{{ item.caption }}">{{ item.caption }}</span>
|
||
|
|
{%- endfor -%}
|
||
|
|
<div class="separator orange"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{%- if page.cardTitle -%}
|
||
|
|
<div class="topCard">
|
||
|
|
<div>
|
||
|
|
<h1>{{ page.cardTitle | upcase }}</h1>
|
||
|
|
<p>{{ page.cardDesc }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
<div id="content" class="banner">
|
||
|
|
<img id="bessel" src="/assets/images/bessel.svg"></img>
|
||
|
|
<div>
|
||
|
|
{{ content }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|