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.
104 lines
3.5 KiB
104 lines
3.5 KiB
<!DOCTYPE html>
|
|
<html class="clearScroll" 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="slideshowContainer">
|
|
<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>
|
|
</div>
|
|
|
|
{%- if page.cardTitle -%}
|
|
<div class="topCard">
|
|
<div>
|
|
<h1>{{ page.cardTitle | upcase }}</h1>
|
|
<p>{{ page.cardDesc }}</p>
|
|
</div>
|
|
</div>
|
|
{%- endif -%}
|
|
|
|
{% assign itemArray = page.content | markdownify | split: site.item_separator %}
|
|
<div id="bannerContent" class="content">
|
|
{% assign itemArray = page.content | markdownify | split: site.item_separator %}
|
|
{%- for item in itemArray -%}
|
|
{%- assign pair = item | split:'<p><img' -%}
|
|
{%- assign imod2 = forloop.index0 | modulo:2 -%}
|
|
{%- if forloop.first -%}
|
|
{{ item }}
|
|
{%- elsif forloop.last -%}
|
|
{{ continue }}
|
|
{%- else -%}
|
|
<div class="item">
|
|
{%- if forloop.index == 2 -%}
|
|
<svg height="100%" width="100%" viewBox="0 0 5 2" class="upAccent" preserveAspectRatio="none">
|
|
<path d="M 0 0 V 0.2 C 1 0.5 4 0.5 5 0.2 V 0">
|
|
</svg>
|
|
{%- endif -%}
|
|
{%- if imod2 == 0 -%}
|
|
<svg height="100%" width="100%" viewBox="0 0 5 1" class="upAccent" preserveAspectRatio="none">
|
|
<path d="M 0 1 V 0.8 C 1 0.5 4 0.5 5 0.8 V 1">
|
|
</svg>
|
|
<svg height="100%" width="100%" viewBox="0 0 5 1" class="downAccent" preserveAspectRatio="none">
|
|
<path d="M 0 0 V 0.2 C 1 0.5 4 0.5 5 0.2 V 0">
|
|
</svg>
|
|
{%- endif -%}
|
|
<div class="itemScroll clearScroll">
|
|
<div class="itemInner">
|
|
<div class="description">
|
|
{{ pair[0] }}
|
|
</div>
|
|
<div class="image">
|
|
{{ pair[1] | prepend: "<img" | remove: "</p>" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
{%- if itemArray.size != 1 -%}
|
|
<div id="afterItems">
|
|
{{ itemArray.last }}
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
{% include foot.html %}
|
|
</body>
|
|
</html>
|
|
|