<!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="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"> <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>