diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
new file mode 100644
index 0000000..605905c
--- /dev/null
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,53 @@
+{{- partial "partials/functions/warnings.html" .Site -}}
+{{- partial "partials/functions/init.html" . -}}
+
+
+ {{- partial "head.html" . -}}
+
+
+ {{ $header := print "partials/header/" .Site.Params.header.layout ".html" }}
+ {{ if templates.Exists $header }}
+ {{ partial $header . }}
+ {{ else }}
+ {{ partial "partials/header/basic.html" . }}
+ {{ end }}
+
+
+ {{ block "main" . }}{{ end }}
+ {{ if and (.Site.Params.footer.showScrollToTop | default true) (gt .WordCount 200) }}
+
+ {{ end }}
+
+ {{- partial "footer.html" . -}}
+ {{ if .Site.Params.enableSearch | default false }}
+ {{- partial "search.html" . -}}
+ {{ end }}
+
+
+
+
+
diff --git a/static/css/lightbox.css b/static/css/lightbox.css
new file mode 100644
index 0000000..e81a309
--- /dev/null
+++ b/static/css/lightbox.css
@@ -0,0 +1,94 @@
+#lightbox {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.85); z-index: 9999999; line-height: 0; cursor: pointer; display: none;}
+#lightbox .img {
+ position: relative;
+ top: 50%;
+ left: 50%;
+ -ms-transform: translateX(-50%) translateY(-50%);
+ -webkit-transform: translate(-50%,-50%);
+ transform: translate(-50%,-50%);
+ max-width: 100%;
+ max-height: 100%;
+}
+#lightbox .img img {opacity: 0; pointer-events: none; width: auto;}
+@media screen and (min-width: 1200px) {
+ #lightbox .img {
+ max-width: 1200px;
+ }
+}
+@media screen and (min-height: 1200px) {
+ #lightbox .img {
+ max-height: 1200px;
+ }
+}
+#lightbox span {display: block; position: fixed; bottom: 13px; height: 1.5em; line-height: 1.4em; width: 100%; text-align: center; color: white; text-shadow:
+ -1px -1px 0 #000,
+ 1px -1px 0 #000,
+ -1px 1px 0 #000,
+ 1px 1px 0 #000;
+}
+
+#lightbox span {display: none;}
+
+#lightbox .videoWrapperContainer {
+ position: relative;
+ top: 50%;
+ left: 50%;
+ -ms-transform: translateX(-50%) translateY(-50%);
+ -webkit-transform: translate(-50%,-50%);
+ transform: translate(-50%,-50%);
+ max-width: 900px;
+ max-height: 100%;
+}
+#lightbox .videoWrapperContainer .videoWrapper {
+ height: 0;
+ line-height: 0;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ padding-bottom: 56.333%; /* custom */
+ background: black;
+}
+#lightbox .videoWrapper iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ display: block;
+}
+#lightbox #prev, #lightbox #next {height: 50px; line-height: 36px; display: none; margin-top: -25px; position: fixed; top: 50%; padding: 0 15px; cursor: pointer; text-decoration: none; z-index: 99; color: white; font-size: 60px;}
+#lightbox.gallery #prev, #lightbox.gallery #next {display: block;}
+#lightbox #prev {left: 0;}
+#lightbox #next {right: 0;}
+#lightbox #close {height: 50px; width: 50px; position: fixed; cursor: pointer; text-decoration: none; z-index: 99; right: 0; top: 0;}
+#lightbox #close:after, #lightbox #close:before {position: absolute; margin-top: 22px; margin-left: 14px; content: ""; height: 3px; background: white; width: 23px;
+-webkit-transform-origin: 50% 50%;
+-moz-transform-origin: 50% 50%;
+-o-transform-origin: 50% 50%;
+transform-origin: 50% 50%;
+/* Safari */
+-webkit-transform: rotate(-45deg);
+/* Firefox */
+-moz-transform: rotate(-45deg);
+/* IE */
+-ms-transform: rotate(-45deg);
+/* Opera */
+-o-transform: rotate(-45deg);
+}
+#lightbox #close:after {
+/* Safari */
+-webkit-transform: rotate(45deg);
+/* Firefox */
+-moz-transform: rotate(45deg);
+/* IE */
+-ms-transform: rotate(45deg);
+/* Opera */
+-o-transform: rotate(45deg);
+}
+#lightbox, #lightbox * {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
\ No newline at end of file
diff --git a/static/js/lightbox.js b/static/js/lightbox.js
new file mode 100644
index 0000000..c42a289
--- /dev/null
+++ b/static/js/lightbox.js
@@ -0,0 +1,141 @@
+function is_youtubelink(url) {
+ var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
+ return (url.match(p)) ? RegExp.$1 : false;
+}
+function is_imagelink(url) {
+ var p = /([a-z\-_0-9\/\:\.]*\.(jpg|jpeg|png|gif))/i;
+ return (url.match(p)) ? true : false;
+}
+function is_vimeolink(url,el) {
+ var id = false;
+ var xmlhttp = new XMLHttpRequest();
+ xmlhttp.onreadystatechange = function() {
+ if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
+ if (xmlhttp.status == 200) {
+ var response = JSON.parse(xmlhttp.responseText);
+ id = response.video_id;
+ console.log(id);
+ el.classList.add('lightbox-vimeo');
+ el.setAttribute('data-id',id);
+
+ el.addEventListener("click", function(event) {
+ event.preventDefault();
+ document.getElementById('lightbox').innerHTML = '›‹';
+ document.getElementById('lightbox').style.display = 'block';
+
+ setGallery(this);
+ });
+ }
+ else if (xmlhttp.status == 400) {
+ alert('There was an error 400');
+ }
+ else {
+ alert('something else other than 200 was returned');
+ }
+ }
+ };
+ xmlhttp.open("GET", 'https://vimeo.com/api/oembed.json?url='+url, true);
+ xmlhttp.send();
+}
+function setGallery(el) {
+ var elements = document.body.querySelectorAll(".gallery");
+ elements.forEach(element => {
+ element.classList.remove('gallery');
+ });
+ if(el.closest('ul, p')) {
+ var link_elements = el.closest('ul, p').querySelectorAll("a[class*='lightbox-']");
+ link_elements.forEach(link_element => {
+ link_element.classList.remove('current');
+ });
+ link_elements.forEach(link_element => {
+ if(el.getAttribute('href') == link_element.getAttribute('href')) {
+ link_element.classList.add('current');
+ }
+ });
+ if(link_elements.length>1) {
+ document.getElementById('lightbox').classList.add('gallery');
+ link_elements.forEach(link_element => {
+ link_element.classList.add('gallery');
+ });
+ }
+ var currentkey;
+ var gallery_elements = document.querySelectorAll('a.gallery');
+ Object.keys(gallery_elements).forEach(function (k) {
+ if(gallery_elements[k].classList.contains('current')) currentkey = k;
+ });
+ if(currentkey==(gallery_elements.length-1)) var nextkey = 0;
+ else var nextkey = parseInt(currentkey)+1;
+ if(currentkey==0) var prevkey = parseInt(gallery_elements.length-1);
+ else var prevkey = parseInt(currentkey)-1;
+ document.getElementById('next').addEventListener("click", function() {
+ gallery_elements[nextkey].click();
+ });
+ document.getElementById('prev').addEventListener("click", function() {
+ gallery_elements[prevkey].click();
+ });
+ }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+
+ //create lightbox div in the footer
+ var newdiv = document.createElement("div");
+ newdiv.setAttribute('id',"lightbox");
+ document.body.appendChild(newdiv);
+
+ //add classes to links to be able to initiate lightboxes
+ var elements = document.querySelectorAll('a');
+ elements.forEach(element => {
+ var url = element.getAttribute('href');
+ if(url) {
+ if(url.indexOf('vimeo') !== -1 && !element.classList.contains('no-lightbox')) {
+ is_vimeolink(url,element);
+ }
+ if(is_youtubelink(url) && !element.classList.contains('no-lightbox')) {
+ element.classList.add('lightbox-youtube');
+ element.setAttribute('data-id',is_youtubelink(url));
+ }
+ if(is_imagelink(url) && !element.classList.contains('no-lightbox')) {
+ element.classList.add('lightbox-image');
+ var href = element.getAttribute('href');
+ var filename = href.split('/').pop();
+ var split = filename.split(".");
+ var name = split[0];
+ element.setAttribute('title',name);
+ }
+ }
+ });
+
+ //remove the clicked lightbox
+ document.getElementById('lightbox').addEventListener("click", function(event) {
+ if(event.target.id != 'next' && event.target.id != 'prev'){
+ this.innerHTML = '';
+ document.getElementById('lightbox').style.display = 'none';
+ }
+ });
+
+ //add the youtube lightbox on click
+ var elements = document.querySelectorAll('a.lightbox-youtube');
+ elements.forEach(element => {
+ element.addEventListener("click", function(event) {
+ event.preventDefault();
+ document.getElementById('lightbox').innerHTML = '›‹';
+ document.getElementById('lightbox').style.display = 'block';
+
+ setGallery(this);
+ });
+ });
+
+ //add the image lightbox on click
+ var elements = document.querySelectorAll('a.lightbox-image');
+ elements.forEach(element => {
+ element.addEventListener("click", function(event) {
+ event.preventDefault();
+ document.getElementById('lightbox').innerHTML = '
›‹'+this.getAttribute('title')+'';
+ document.getElementById('lightbox').style.display = 'block';
+
+ setGallery(this);
+ });
+ });
+
+});
\ No newline at end of file