diff --git a/content/images/arrow_next.svg b/content/images/arrow_next.svg
new file mode 100644
index 0000000..4b47ef9
--- /dev/null
+++ b/content/images/arrow_next.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/arrow_prev.svg b/content/images/arrow_prev.svg
new file mode 100644
index 0000000..e06ac0e
--- /dev/null
+++ b/content/images/arrow_prev.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/bg3.jpg b/content/images/bg3.jpg
index c912fd3..b5871b6 100644
Binary files a/content/images/bg3.jpg and b/content/images/bg3.jpg differ
diff --git a/content/index.erb b/content/index.erb
index f5f264d..444f00e 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -34,8 +34,9 @@ show_dj_registrations: false
<%= render '/parts/separator.*', sid: 'separator1', sclass: 'bg2' %>
<%= render '/parts/wedstrijd.*' %>
-<%# render '/parts/separator.*', sid: 'separator2', sclass: 'bg3' %>
-<%= render '/parts/separator.*', sid: 'separator3', sclass: 'bg4' %>
+<%= render '/parts/separator.*', sid: 'separator2', sclass: 'bg3' %>
<%= render '/parts/animatie.*' %>
+<%= render '/parts/separator.*', sid: 'separator3', sclass: 'bg4' %>
+<%= render '/parts/history.*' %>
<%= render '/parts/separator.*', sid: 'separator4', sclass: 'bg5' %>
<%= render '/parts/contact.*' %>
diff --git a/content/javascripts/timeline.js b/content/javascripts/timeline.js
new file mode 100644
index 0000000..3f05060
--- /dev/null
+++ b/content/javascripts/timeline.js
@@ -0,0 +1,123 @@
+(function() {
+
+ // VARIABLES
+ const timeline = document.querySelector(".timeline ol"),
+ elH = document.querySelectorAll(".timeline li > div"),
+ arrows = document.querySelectorAll(".timeline .arrows .arrow"),
+ arrowPrev = document.querySelector(".timeline .arrows .arrow__prev"),
+ arrowNext = document.querySelector(".timeline .arrows .arrow__next"),
+ firstItem = document.querySelector(".timeline li:first-child"),
+ lastItem = document.querySelector(".timeline li:last-child"),
+ xScrolling = 380,
+ disabledClass = "disabled";
+
+ // START
+ window.addEventListener("load", init);
+
+ function init() {
+ setEqualHeights(elH);
+ animateTl(xScrolling, arrows, timeline);
+ setSwipeFn(timeline, arrowPrev, arrowNext);
+ setKeyboardFn(arrowPrev, arrowNext);
+ }
+
+ // SET EQUAL HEIGHTS
+ function setEqualHeights(el) {
+ let counter = 0;
+ for (let i = 0; i < el.length; i++) {
+ const singleHeight = el[i].offsetHeight;
+
+ if (counter < singleHeight) {
+ counter = singleHeight;
+ }
+ }
+
+ counter -= 20;
+
+ for (let i = 0; i < el.length; i++) {
+ el[i].style.height = `${counter}px`;
+ }
+ }
+
+ // CHECK IF AN ELEMENT IS IN VIEWPORT
+ // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
+ function isElementInViewport(el) {
+ const rect = el.getBoundingClientRect();
+ return (
+ rect.top >= 0 &&
+ rect.left >= 0 &&
+ rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+ rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+ );
+ }
+
+ // SET STATE OF PREV/NEXT ARROWS
+ function setBtnState(el, flag = true) {
+ if (flag) {
+ el.classList.add(disabledClass);
+ } else {
+ if (el.classList.contains(disabledClass)) {
+ el.classList.remove(disabledClass);
+ }
+ el.disabled = false;
+ }
+ }
+
+ // ANIMATE TIMELINE
+ function animateTl(scrolling, el, tl) {
+ let counter = 0;
+ for (let i = 0; i < el.length; i++) {
+ el[i].addEventListener("click", function() {
+ if (!arrowPrev.disabled) {
+ arrowPrev.disabled = true;
+ }
+ if (!arrowNext.disabled) {
+ arrowNext.disabled = true;
+ }
+ const sign = (this.classList.contains("arrow__prev")) ? "" : "-";
+ if (counter === 0) {
+ tl.style.transform = `translateX(-${scrolling}px)`;
+ } else {
+ const tlStyle = getComputedStyle(tl);
+ // add more browser prefixes if needed here
+ const tlTransform = tlStyle.getPropertyValue("-webkit-transform") || tlStyle.getPropertyValue("transform");
+ const values = parseInt(tlTransform.split(",")[4]) + parseInt(`${sign}${scrolling}`);
+ tl.style.transform = `translateX(${values}px)`;
+ }
+
+ setTimeout(() => {
+ isElementInViewport(firstItem) ? setBtnState(arrowPrev) : setBtnState(arrowPrev, false);
+ isElementInViewport(lastItem) ? setBtnState(arrowNext) : setBtnState(arrowNext, false);
+ }, 1100);
+
+ counter++;
+ });
+ }
+ }
+
+ // ADD SWIPE SUPPORT FOR TOUCH DEVICES
+ function setSwipeFn(tl, prev, next) {
+ const hammer = new Hammer(tl);
+ hammer.on("swipeleft", () => next.click());
+ hammer.on("swiperight", () => prev.click());
+ }
+
+ // ADD BASIC KEYBOARD FUNCTIONALITY
+ function setKeyboardFn(prev, next) {
+ document.addEventListener("keydown", (e) => {
+ if ((e.which === 37) || (e.which === 39)) {
+ const timelineOfTop = timeline.offsetTop;
+ const y = window.pageYOffset;
+ if (timelineOfTop !== y) {
+ window.scrollTo(0, timelineOfTop);
+ }
+ if (e.which === 37) {
+ prev.click();
+ } else if (e.which === 39) {
+ next.click();
+ }
+ }
+ });
+ }
+
+})();
\ No newline at end of file
diff --git a/content/stylesheets/layout.scss b/content/stylesheets/layout.scss
index 9029f9b..c228c1c 100644
--- a/content/stylesheets/layout.scss
+++ b/content/stylesheets/layout.scss
@@ -254,7 +254,7 @@ p.separator {
padding-top: 240px;
}
-.bg1, .bg2, .bg3, .bg4, .bg5 {
+.bg1, .bg2, .bg3, .bg4, .bg5, .bg6 {
width: 100%; height: 100%;
margin: 0; padding: 0;
background-position: 50% 50%;
@@ -505,6 +505,16 @@ p.mid-text {
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
}
+#history {
+ background: url(../images/bg-dark.jpg) repeat;
+ position: relative;
+ z-index: 300;
+ padding-top: 40px;
+ padding-bottom: 40px;
+ -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
+ box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
+}
+
.done {
font-family: 'Source Sans Pro', sans-serif;
color: #fff;
@@ -518,6 +528,10 @@ p.mid-text {
width: 80%;
}
+.history {
+ width: 80%;
+}
+
.contact-form {
width: 80%;
padding-left: 10%;
diff --git a/content/stylesheets/timeline.css b/content/stylesheets/timeline.css
new file mode 100644
index 0000000..441debc
--- /dev/null
+++ b/content/stylesheets/timeline.css
@@ -0,0 +1,208 @@
+/* .section SECTION
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+.section {
+ background: #fc0;
+ padding: 50px 0;
+}
+
+.section .container {
+ width: 90%;
+ max-width: 1200px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.section h1 {
+ font-size: 2.5rem;
+}
+
+.section h2 {
+ font-size: 1.3rem;
+}
+
+
+/* TIMELINE
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+.timeline {
+ white-space: nowrap;
+ overflow-x: hidden;
+ padding-right: 40px;
+}
+
+.timeline-btn {
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ outline: none;
+}
+
+.timeline ol {
+ font-size: 0;
+ width: 100vw;
+ padding: 250px 0;
+ transition: all 1s;
+}
+
+.timeline ol li {
+ position: relative;
+ display: inline-block;
+ list-style-type: none;
+ width: 100px;
+ height: 3px;
+ background: #fff;
+}
+
+.timeline ol li:last-child {
+ width: 280px;
+}
+
+.timeline ol li:not(:first-child) {
+ margin-left: 14px;
+}
+
+.timeline ol li:not(:last-child)::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: calc(100% + 1px);
+ bottom: 0;
+ width: 12px;
+ height: 12px;
+ transform: translateY(-50%);
+ border-radius: 50%;
+ background: #fc0;
+}
+
+.timeline ol li div {
+ position: absolute;
+ left: calc(100% + 7px);
+ width: 160px;
+ padding: 15px;
+ font-size: 1rem;
+ white-space: normal;
+ color: black;
+ background: white;
+}
+
+.timeline ol li div::before {
+ content: '';
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 0;
+ height: 0;
+ border-style: solid;
+}
+
+.timeline ol li:nth-child(odd) div {
+ top: -16px;
+ transform: translateY(-100%);
+}
+
+.timeline ol li:nth-child(odd) div::before {
+ top: 100%;
+ border-width: 8px 8px 0 0;
+ border-color: white transparent transparent transparent;
+}
+
+.timeline ol li:nth-child(even) div {
+ top: calc(100% + 16px);
+}
+
+.timeline ol li:nth-child(even) div::before {
+ top: -8px;
+ border-width: 8px 0 0 8px;
+ border-color: transparent transparent transparent white;
+}
+
+.timeline time {
+ display: block;
+ font-size: 1.2rem;
+ font-weight: bold;
+ margin-bottom: 8px;
+}
+
+
+/* TIMELINE ARROWS
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+.timeline .arrows {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 20px;
+}
+
+.timeline .arrows .arrow__prev {
+ margin-right: 20px;
+}
+
+.timeline .disabled {
+ opacity: .5;
+}
+
+.timeline .arrows img {
+ width: 45px;
+ height: 45px;
+}
+
+
+/* GENERAL MEDIA QUERIES
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+@media screen and (max-width: 599px) {
+ .timeline ol,
+ .timeline ol li {
+ width: auto;
+ }
+
+ .timeline ol {
+ padding: 0;
+ transform: none !important;
+ }
+
+ .timeline ol li {
+ display: block;
+ height: auto;
+ background: transparent;
+ }
+
+ .timeline ol li:first-child {
+ margin-top: 25px;
+ }
+
+ .timeline ol li:not(:first-child) {
+ margin-left: auto;
+ }
+
+ .timeline ol li div {
+ width: 94%;
+ height: auto !important;
+ margin: 0 auto 25px;
+ }
+
+ .timeline ol li div {
+ position: static;
+ }
+
+ .timeline ol li:nth-child(odd) div {
+ transform: none;
+ }
+
+ .timeline ol li:nth-child(odd) div::before,
+ .timeline ol li:nth-child(even) div::before {
+ left: 50%;
+ top: 100%;
+ transform: translateX(-50%);
+ border: none;
+ border-left: 1px solid white;
+ height: 25px;
+ }
+
+ .timeline ol li:last-child,
+ .timeline ol li:nth-last-child(2) div::before,
+ .timeline ol li:not(:last-child)::after,
+ .timeline .arrows {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/data/history.yaml b/data/history.yaml
new file mode 100644
index 0000000..3a3f191
--- /dev/null
+++ b/data/history.yaml
@@ -0,0 +1,117 @@
+-
+ date: 7 maart 1984
+ team: Rijksnormaalschool Gent (RNS)
+-
+ date: 13 februari 1985
+ team: Rijksnormaalschool Gent (RNS)
+-
+ date: 13 november 1985
+ team: Rijksnormaalschool Gent (RNS)
+-
+ date: 29 oktober 1986
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 28 oktober 1987
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 26 oktober 1988
+ team: Koninklijke Militaire School
+-
+ date: 25 oktober 1989
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 7 november 1990
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 19 februari 1992
+ team: Hoger Instituut voor Lich. Opv. en Kinesitherapie (HILOK)
+-
+ date: 21 oktober 1992
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 93-94
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 9 november 1994
+ team: Hoger Instituut voor Lich. Opv. en Kinesitherapie (HILOK)
+-
+ date: 8 november 1995
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 96-97
+ team: Hoger Instituut voor Lich. Opv. en Kinesitherapie (HILOK)
+-
+ date: 26 november 1997
+ team: Hoger Instituut voor Lich. Opv. en Kinesitherapie (HILOK)
+-
+ date: 98-99
+ team: (niet doorgegaan)
+-
+ date: 17 november 1999
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 25 oktober 2000
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 4 oktober 2001
+ team: Hoger Instituut voor Lich. Opv. en Kinesitherapie (HILOK)
+-
+ date: 23 oktober 2002
+ team: Hoger Instituut voor Lich. Opv. en Kinesitherapie (HILOK)
+-
+ date: 22 oktober 2003
+ team: ???
+-
+ date: 27 oktober 2004
+ team: Hoger Instituut voor Lich. Opv. en Kinesitherapie (HILOK)
+-
+ date: 1 maart 2006
+ team: ???
+-
+ date: 28 februari 2007
+ team: Hoger Instituut voor Lich. Opv. en Kinesitherapie (HILOK)
+-
+ date: 9 april 2008
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 4 maart 2009
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 21 april 2010
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 4 mei 2011
+ team: Hoger Instituut voor Lich. Opv. en Kinesitherapie (HILOK)
+-
+ date: 25 april 2012
+ team: Hoger Instituut voor Lich. Opv. en Kinesitherapie (HILOK)
+-
+ date: 24 april 2013
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 30 april 2014
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 29 april 2015
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 15-16
+ team: ???
+-
+ date: 26 april 2017
+ team: Hoger Instituut voor Lich. Opv. en Kinesitherapie (HILOK)
+-
+ date: 26 april 2018
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 29 april 2019
+ team: Vlaamse Technische Kring (VTK)
+-
+ date: 29 april 2020
+ team: (niet doorgegaan door COVID-19)
+-
+ date: 26-29 april 2021
+ team: (niet doorgegaan door COVID-19)
+-
+ date: 27 april 2022
+ team: Hoger Instituut voor Lich. Opv. en Kinesitherapie (HILOK)
diff --git a/layouts/default.html b/layouts/default.html
index 58db15c..f9dca8a 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -20,6 +20,7 @@
+
diff --git a/layouts/parts/nav.erb b/layouts/parts/nav.erb
index c8b6f0e..03d4a83 100644
--- a/layouts/parts/nav.erb
+++ b/layouts/parts/nav.erb
@@ -3,6 +3,7 @@
Home
Wedstrijd
Animatie
+ Historiek
Contact
@@ -11,6 +12,7 @@
+