Update with custom theme files

layouts/portfolio/section.html

@@ -0,0 +1,94 @@
+{{ 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 }}