Update with custom theme files

layouts/blog/section.html

@@ -0,0 +1,111 @@
+{{ define "title" }}
+  {{ .Page.Title | plainify }} | {{ .Site.Title }}
+{{ end }}
+
+{{ define "main-class" }}--section{{ end }}
+
+{{ define "main-type" }}{{ .Params.mainType }}{{ 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 }}
+    {{ if eq .Type "blog" }}
+       {{ with .GetPage "blog/posts" }}
+          {{ range .AlternativeOutputFormats -}}
+            <a href="{{ .RelPermalink }}">
+               <img class="feed-icon" src="{{ $.Site.Params.feedIcon }}">
+            </a>
+          {{ end }}
+       {{ end }}
+    {{ else }}
+      {{ range .AlternativeOutputFormats -}}
+         <a href="{{ .RelPermalink }}">
+            <img class="feed-icon" src="{{ $.Site.Params.feedIcon }}">
+         </a>
+       {{ end }}
+    {{ end }}
+    </h1>
+    {{ .Content }}
+    
+    <nav class="page-header__minor-links">
+      <ul class="minor-links__categories">
+          <li><a href="/series"><h2>Series’</h2></a> <p>({{ len .Site.Taxonomies.series }})</p></li>
+          {{ range .Site.Taxonomies.categories }}
+          <li><a href="{{ .Page.RelPermalink }}"><h2>{{ .Page.Title | safeHTML }}</h2></a> <p>({{ len . }})</p></li>  
+          {{ end }}
+      </ul>
+      {{ if eq .Type "blog" }}
+        {{ with .GetPage "blog/posts" }}
+          {{ partial "years-list.html" . }}
+        {{ end }}
+      {{ else }}
+          {{ partial "years-list.html" . }}
+      {{ end }}
+    </nav>
+  </header>
+{{ end }}
+
+{{ define "main-body" }}
+  {{ if eq .Type "blog" }}
+     {{ with .GetPage "blog/posts" }}
+        {{ partial "items-grid.html" . }}
+     {{ end }}
+  {{ else }}
+      {{ partial "items-grid.html" . }}
+  {{ end }}
+{{ end }}