<!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 -%} <div class="nonItems"> <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> <div> {{ item }} </div> </div> {%- elsif forloop.last -%} {%- assign strippedItem = item | strip -%} {%- if strippedItem != "" -%} <div class="nonItems"> {%- 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> {%- endif -%} <div> {{ item }} </div> </div> {%- endif -%} {%- else -%} <div class="item"> {%- 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 -%} </div> {% include foot.html %} </body> </html>