Add styling on links

themes/hugo-theme-notrack/static/css/fonts.css

@@ -0,0 +1,99 @@
+@font-face 
+{
+    font-family: FreeSans;
+    src: url(../fonts/FreeSans-small.woff);
+}
+
+@font-face 
+{
+    font-family: FreeSans;
+    src: url(../fonts/FreeSansBoldOblique.woff);
+    font-weight: bold;
+    font-style: oblique;
+}
+
+@font-face 
+{
+    font-family: FreeSans;
+    src: url(../fonts/FreeSansBold-small.woff);
+    font-weight: bold;
+}
+
+@font-face 
+{
+    font-family: FreeSans;
+    src: url(../fonts/FreeSansOblique.woff);
+    font-style: oblique;
+}
+
+@font-face 
+{
+    font-family: FreeSerif;
+    src: url(../fonts/FreeSerif-small.woff);
+}
+
+@font-face 
+{
+    font-family: FreeSerif;
+    src: url(../fonts/FreeSerifItalic-small.woff);
+    font-style: italic;
+}
+
+@font-face 
+{
+    font-family: FreeSerif;
+    src: url(../fonts/FreeSerifBoldItalic-small.woff);
+    font-style: italic;
+    font-weight: bold;
+}
+
+@font-face 
+{
+    font-family: FreeSerif;
+    src: url(../fonts/FreeSerifBold-small.woff);
+    font-weight: bold;
+}
+
+@font-face 
+{
+    font-family: Mononoki;
+    src: url(../fonts/mononoki-Regular.woff2);
+}
+
+/* Copied from Font Awesome and modified for filepath and filetype*/
+
+/*!
+ * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@font-face 
+{
+  font-family: 'Font Awesome 5 Brands';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("../fonts/fa-brands-400.woff2") format("woff2");
+}
+
+.fab 
+{
+  font-family: 'Font Awesome 5 Brands';
+  font-weight: 400; 
+}
+
+/*!
+ * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+@font-face {
+  font-family: 'Font Awesome 5 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src: url("../fonts/fa-solid-900.woff2") format("woff2");
+}
+
+.fa,
+.fas {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900; }

themes/hugo-theme-notrack/static/js/gallery.js

@@ -0,0 +1,139 @@
+// MODALS FOR PHOTO GALLERY
+
+// Get the modal
+var modal = document.getElementById("myModal");
+var modalImg = document.getElementById("modal-img");
+var captionText = document.getElementById("caption");
+var loader = document.getElementById("loader");
+
+// Get the <span> element that closes the modal
+var span = document.getElementsByClassName("close")[0];
+
+// Array of all images in gallery
+const imgs = [...document.querySelectorAll('.gallery-photo > img')];
+
+// Add index and event listener to all gallery images
+imgs.forEach((img, i) => {
+  img.dataset.index = i;
+  img.addEventListener('click', e => { openModal(e.target); });
+});
+
+preloadModalImage = index => {
+  let loadingImg = new Image();
+  loadingImg.src = imgs[index].src.replace("thumbnails", "fullsize");
+}
+
+// Returns indices of current and surrounding images
+getSurroundingIndices = img => {
+  let i = parseInt(img.dataset.index);
+  let prevIndex = i != 0 ? (i - 1) % imgs.length : imgs.length - 1;
+  let nextIndex = (i + 1) % imgs.length;
+  return {prev: prevIndex, current: i, next: nextIndex};
+};
+
+// Image currently shown in modal
+let currentImage; 
+
+openModal = img => {
+  // Get the image and insert it inside the modal - use 
+  // its "alt" text as a caption
+  currentImage = img;
+  modalImg.src = currentImage.src.replace("thumbnails", "fullsize");
+  captionText.innerHTML = img.alt;
+
+  // While loading, show loader and hide image and text
+  modal.style.display = 'block';
+  loader.style.display = 'block';
+  modalImg.style.display = 'none';
+  captionText.style.display = 'none';
+
+  // After image is loaded, show image and text and hide loader
+  modalImg.addEventListener('load', () => {
+    console.log("loaded image");
+    captionText.style.display = 'block';
+    modalImg.style.display = 'block';
+    loader.style.display = 'none';
+  });
+
+  // Preload for faster display of images
+  const indices = getSurroundingIndices(currentImage);
+  preloadModalImage(indices.next);
+  preloadModalImage(indices.prev);
+};
+
+closeModal = () => {
+  modal.style.display = "none";
+  modalImg.src = "";
+
+  // Image get selected upon closing on mobile so deselect
+  if(window.getSelection) {
+    window.getSelection().removeAllRanges();
+  }
+  if (document.selection) {
+    document.selection.empty();
+  }
+};
+
+changeModalImage = direction => {
+  if (modal.style.display == "block") {
+    const indices = getSurroundingIndices(currentImage);
+    switch (direction) {
+      case 'ArrowRight':
+        openModal(imgs[indices.next]);
+        break;
+      case 'ArrowLeft':
+        openModal(imgs[indices.prev]);
+        break;
+    }
+  }
+};
+
+
+// CLOSING MODAL
+
+// When <span> (x) is clicked, close the modal
+span.onclick = function() {
+  closeModal();
+};
+
+// Pressing escape closes modal
+document.onkeydown = event => {
+  switch (event.key) {
+    case 'Escape':     closeModal(); break;
+    case 'ArrowRight': changeModalImage(event.key); break;
+    case 'ArrowLeft':  changeModalImage(event.key); break;
+  }
+};
+
+// Close modal when it is clicked
+modal.addEventListener('click', closeModal, false);
+
+
+// SWITCH IMAGE BY SWIPING OR MOUSE DRAG
+
+// Unify touch and click cases
+unify = e => { return e.changedTouches ? e.changedTouches[0] : e };
+
+// Where swipe or mousedown starts
+let x0 = null;
+
+lock = event => { x0 = unify(event).clientX };
+
+move = event => {
+  if (x0 || x0 === 0) {
+    let dx = unify(event).clientX - x0;
+    sign = Math.sign(dx);
+
+    switch (sign) {
+      case -1: changeModalImage('ArrowRight'); break;
+      case  1: changeModalImage('ArrowLeft'); break;
+    }
+  }
+};
+
+modal.addEventListener('mousedown', lock, false);
+modal.addEventListener('touchstart', lock, false);
+modal.addEventListener('mouseup', move, false);
+modal.addEventListener('touchend', move, false);
+modal.addEventListener('touchmove', e => {e.preventDefault()}, false);
+modal.addEventListener('mousemove', e => {e.preventDefault()}, false);