Download raw (11.9 KB)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" media="all" href="styles-django.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* .date, .hour, .venue, .type, .contributor, .title, .note { display: inline; } */ body { position: relative; } </style> </head> <body> <header> <section id="menu"> <div class="logo"> <a><img src="contour9-logo.png"/></a> </div> <nav> <ul> <li> <a>Programme</a> </li> <li> <a>Venue</a> </li> <li> <a>Contributors</a> </li> <li> <a>About</a> </li> </ul> </nav> </section> <section id="timeline"> <span class="button full-moon"> <a href="">Full moon</a> </span> <figure> <object data="timeline/timeline.svg" type="image/svg+xml"></object> </figure> </section> <section id="time-travel"> <span class="button first-crescent"> <a href="">First crescent</a> </span> <span class="button last-crescent"> <a href="">Last crescent</a> </span> </section> </header> <main> <section class="cycle loop content" id="full-moon"> <section class="loop-header"> <h3 class="loop-day-date">Fri. 17 May</h3> <h3 class="loop-day-date">Sat. 18 May</h3> <h3 class="loop-day-date">Sun. 19 May</h3> </section> <section class="loop-continuous"> <article id="thomas-more-installation-cadine-navarro" class="event"> <figure class="preview"> <img src="img/cloud/Cadine Navarro/IMG_6027.JPG"> </figure> <time class="date">17 May → 31 May</time> <span class="hour">10:00 - 16:00</span> <span class="venue">Thomas More Hogeschool</span> <span class="type">Installation </span> <h4 class="title">Black Gold</h4> <span class="contributor">Cadine Navarro</span> </article> <article id="thomas-more-installation-cadine-navarro" class="event"> <time class="date">17 May → 31 May</time> <span class="hour">10:00 - 16:00</span> <span class="venue">Thomas More Hogeschool</span> <span class="type">Installation </span> <span class="contributor">Maarten Vanden Eynde</span> </article> </section> <section class="loop-days"> <section class="day" id="friday-17-may"> <article id="thomas-more-school-presentation" class="event" style="grid-row:2/span 12;"> <time datetime="2018-05-17T10:00"> <span class="date">Friday 17 May</span> <span class="hour">10:00 - 16:00</span> </time> <span class="venue">Thomas More Hogeschool</span> <span class="type">School presentations</span> </article> <article id="thomas-more-school-lecture-performance-mark-pozlep" class="event" style="grid-row:15/span 2;"> <figure class="preview"> <img src="img/cloud/Mark Pozlep/BFR_Mark Pozlep.jpg"> </figure> <time class="date">Friday 17 May</time> <span class="hour">16:30 - 18:00</span> <span class="venue">Thomas More School to Zennegat</span> <span class="type">Lecture performance</span> <h4 class="title">Blueprint for revolution</h4> <span class="contributor">Mark Pozlep</span> </article> <article id="zennegat-flotation-school" class="event" style="grid-row:18/span 4"> <figure class="preview"> <img src="img/cloud/Maria Lucia Cruz Correia/common-dreams.jpg"> </figure> <time class="date">Friday 17 May</time> <span class="hour">18:00 - 20:00</span> <span class="venue">Zennegat</span> <span class="type">Presentation from Flotation School</span> <h4 class="title">Common Dreams “Flotation school“</h4> <span class="contributor">Maria Lucia Cruz Correira</span> </article> <article id="nona-Presentation-picha" class="event" style="grid-row:24/span 2"> <figure class="preview"> <img src="img/cloud/Enough Room for Space/picha_logo.png"> </figure> <time class="date">Fri. 17 May</time> <span class="hour">21:00 - 22:00</span> <span class="venue">Nona</span> <span class="type">Presentation</span> <span class="contributor">Picha / Narratives</span> </article> </section> <section class="day" id="saturday-18-may"> <article id="nona-lecture-workshop-léopold-lambert" class="event" style="grid-row:4/span 4;"> <figure class="preview"> <img src="img/cloud/Léopold Lambert/TheFunambulistToxicAtmospheres1.JPG"> </figure> <time class="date">Saturday 18 May</time> <p class="hour">11:00 - 13:00</p> <p class="venue">Nona - old foyer/cafe</p> <p class="type">Lecture workshop</p> <p class="title">Toxic Atmospheres</p> <p class="contributor">Léopold Lambert</p> </article> <article id="nona-lunch-welcome-in-mechelen" class="event" style="grid-row:8/span 2;"> <time class="date">Saturday 18 May</time> <p class="hour">13:00 - 14:00</p> <p class="venue">Nona - new foyer</p> <p class="type">Lunch by</p> <p class="contributor">Welcome in Mechelen</p> </article> <article id="nona-film-screening-christian-nyampeta" class="event" style="grid-row:10/span 6;"> <time class="date">Saturday 18 May</time> <p class="hour">14:00 - 17:00</p> <p class="venue">Nona - old foyer/cafe</p> <p class="type">Film screening + round table</p> <p class="contributor">Christian Nyampeta</p> </article> <article id="ROJM-diner" class="event" style="grid-row:20/22;"> <time class="date">Saturday 18 May</time> <p class="hour">19:00 - 20:00</p> <p class="venue">ROJM</p> <p class="type">Diner</p> </article> <article id="nona-film-screening-daniela-ortiz" class="event" style="grid-row:23/span 2;"> <figure class="preview"> <img src="img/cloud/Daniela Ortiz/Still_3.png"> </figure> <time class="date">Saturday 18 May</time> <p class="hour">20:30</p> <p class="venue">Nona - old theater</p> <p class="type">Film screening</p> <p class="title">The empire of law</p> <p class="contributor">Daniela Ortiz</p> </article> <article id="nona-concert-melvin-gibbs" class="event" style="grid-row:25/span 3;"> <time class="date">Saturday 18 May</time> <p class="hour">21:30</p> <p class="venue">Nona - new theater</p> <p class="type">Concert</p> <p class="contributor">Melvin Gibbs</p> </article> </section> <section class="day" id="sunday-19-may"> <article id="nona-talk-picha-tradeoff" class="event" style="grid-row:10/span 8;"> <figure class="preview"> <img src="img/cloud/Enough Room for Space/mine-a-ciel-ouvert-noyee-de-banfora-2-lieu-dextraction-miniere-artisanale-2010-80x24048-cm.jpg"> </figure> <time class="date">Sunday 19 May</time> <p class="hour">14:00 - 18:00</p> <p class="venue">Nona</p> <p class="type">Lunar Talk </p> <p class="title">"On Trade Off" project</p> <p class="contributor">Picha / Enough Room for Space</p> </article> </section> </section> </section> <!-- <section class="between-loops"> <div class="button last-crescent"> <a href="">Last <br/>crescent</a> </div> <div class="accordeon"> <a href=""> </a> </div> </section> --> </main> <!-- <aside class="content" id="last-crescent"> <section class="day" id="friday-18-october"> <div class="bloc-date"> <time class="date">Friday 18 October</p> </div> <div class="content-continious"> </div> </section> <section class="day" id="saturday-19-october"> <div class="bloc-date"> <time class="date">Saturday 19 October</p> </div> <div class="content-continious"> </div> </section> <section class="day" id="sunday-20-october"> <div class="bloc-date"> <time class="date">Sunday 20 October</p> </div> <div class="content-continious"> </div> </section> </aside> --> </main> <script> var entries = document.querySelectorAll('.event'); for (var i = 0; i < entries.length; i++) { entries[i].addEventListener('click', function () { this.classList.toggle('active'); var clone = this.cloneNode(true); var container = document.querySelector('#container'); container.classList.add('active'); while (container.hasChildNodes()) { container.removeChild(container.lastChild); } container.appendChild(clone); }); } var entries = document.querySelectorAll('.thumbnail'); for (var i = 0; i < entries.length; i++) { entries[i].addEventListener('click', function (e) { e.stopPropagation(); this.classList.toggle('active'); }); } var entries = document.querySelectorAll('#last-crescent'); for (var i = 0; i < entries.length; i++) { entries[i].addEventListener('click', function () { this.classList.toggle('active'); }); } </script> <script src="raphael.min.js"></script> <script> function getTarget(segment) { if (segment[0] == 'C') { return [segment[5], segment[6]]; } else { return [segment[1], segment[2]]; } } window.addEventListener('load', function () { const timeline = document.querySelector('#timeline').contentDocument.rootElement, paths = timeline.querySelectorAll('path'), path = paths[5]; //document.querySelector('#timeline').contentDocument.createElement('path'); var segments = Raphael.parsePathString(paths[4].getAttribute('d')); path.setAttribute("style", "stroke:#fff200; stroke-width:5.0;fill:none;"); s = 0; loop = function () { if (segments.length > 0) { if (s > 0 && s == segments.length) { s = 0; loop(); } else if (segments[s][0] !== 'C') { s++; loop(); } else { getTarget(segments[s]) path.setAttribute('d', 'M' + (getTarget(segments[s - 1])).join(' ') + segments[s].join(' ') + segments[s + 1].join(' ')) } } else { console.warn('Segments empty'); } } timeline.appendChild(path); loop(); window.addEventListener('wheel', function (e) { s += (e.deltaY > 0) ? 1 : -1; loop(); }) }); </script> </body> </html>