{{ define "title" }} {{ .Page.Title | plainify }} | {{ .Site.Title }} {{ end }} {{ define "main-class" }}--section{{ end }} {{ define "footer-scripts" }} <script> // Source: https://css-tricks.com/the-complete-guide-to-lazy-loading-images/ document.addEventListener("DOMContentLoaded", function() { var lazyloadImages; if ("IntersectionObserver" in window) { lazyloadImages = document.querySelectorAll(".lazy"); var imageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { console.log("Ding"); var image = entry.target; image.classList.remove("lazy"); imageObserver.unobserve(image); } }); }); lazyloadImages.forEach(function(image) { imageObserver.observe(image); }); } else { var lazyloadThrottleTimeout; lazyloadImages = document.querySelectorAll(".lazy"); function lazyload () { if(lazyloadThrottleTimeout) { clearTimeout(lazyloadThrottleTimeout); } lazyloadThrottleTimeout = setTimeout(function() { var scrollTop = window.pageYOffset; lazyloadImages.forEach(function(img) { if(img.offsetTop < (window.innerHeight + scrollTop)) { img.src = img.dataset.src; img.classList.remove('lazy'); } }); if(lazyloadImages.length == 0) { document.removeEventListener("scroll", lazyload); window.removeEventListener("resize", lazyload); window.removeEventListener("orientationChange", lazyload); } }, 20); } document.addEventListener("scroll", lazyload); window.addEventListener("resize", lazyload); window.addEventListener("orientationChange", lazyload); } }); </script> {{ end }} {{ define "main-header" }} <header class="site-content__header"> <h1 class="page-title">{{ .Title | safeHTML }}. {{ range .AlternativeOutputFormats -}} <a href="{{ .RelPermalink }}"> <img class="feed-icon" src="/images/feed-icon.png"> </a> {{ end }} </h1> {{ .Content }} {{ if ne .Type "portfolio" }} <nav class="page-header__minor-links"> {{ partial "years-list.html" . }} </nav> {{ end }} </header> {{ end }} {{ define "main-body" }} {{ if eq .Type "portfolio" }} <article class="site-content__body site-content__body--list"> <ul class="site-content__sections-list"> {{ range .Sections.ByWeight }} {{ if eq .Weight 10 }}<hr>{{ end }} <li><a href="{{ .RelPermalink }}"><h2>{{ .Title }}</h2></a> <p>({{ len .Pages }})</p></li> {{ end }} </ul> </article> {{ else }} {{ partial "items-grid.html" . }} {{ end }} {{ end }}