Fix link handling

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

.gitignore

@@ -12,6 +12,3 @@ hugo.linux
 
 # Temporary lock file while building
 /.hugo_build.lock
-
-# JavaScript
-node_modules/

Makefile

@@ -1,8 +1,8 @@
-.PHONY: default update update-inter node-modules format
+.PHONY: default update update-inter update-photoswipe format
 
-default: node-modules
+default:
 
-update: update-inter format
+update: update-inter update-photoswipe format
 
 update-inter:
 	@tmp_zip=$$(mktemp) && \
@@ -16,10 +16,19 @@ update-inter:
 	cp -r $$tmp_dir/web/{InterVariable*.woff2,Inter-*.woff2} static/font/inter && \
 	rm -rf $$tmp_zip $$tmp_dir
 
-node-modules:
+update-photoswipe:
-	npm install && \
+	@tmp_zip=$$(mktemp) && \
-	cd ../.. && \
+	tmp_dir=$$(mktemp -d) && \
-	ln -s ./themes/caldwell/node_modules node_modules
+	curl -s https://api.github.com/repos/dimsemenov/photoswipe/releases/latest \
+	| jq -r '.zipball_url' \
+	| xargs curl -Ls -o $$tmp_zip && \
+	unzip -q -o $$tmp_zip -d $$tmp_dir && \
+	rm -rf assets/js/photoswipe assets/css/photoswipe && \
+	mkdir -p assets/js/photoswipe assets/css/photoswipe && \
+	cp $$tmp_dir/*PhotoSwipe*/dist/photoswipe-lightbox.esm.js assets/js/photoswipe && \
+	cp $$tmp_dir/*PhotoSwipe*/dist/photoswipe.esm.js assets/js/photoswipe && \
+	cp $$tmp_dir/*PhotoSwipe*/dist/photoswipe.css assets/css/photoswipe && \
+	rm -rf $$tmp_zip $$tmp_dir
 
 format:
 	nix fmt

assets/css/photoswipe/photoswipe.css

@@ -0,0 +1,417 @@
+/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
+
+.pswp {
+  --pswp-bg: #000;
+  --pswp-placeholder-bg: #222;
+
+  --pswp-root-z-index: 100000;
+
+  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
+  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
+
+  /* defined via js:
+  --pswp-transition-duration: 333ms; */
+
+  --pswp-icon-color: #fff;
+  --pswp-icon-color-secondary: #4f4f4f;
+  --pswp-icon-stroke-color: #4f4f4f;
+  --pswp-icon-stroke-width: 2px;
+
+  --pswp-error-text-color: var(--pswp-icon-color);
+}
+
+/*
+	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
+*/
+
+.pswp {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--pswp-root-z-index);
+  display: none;
+  touch-action: none;
+  outline: 0;
+  opacity: 0.003;
+  contain: layout style size;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* Prevents focus outline on the root element,
+  (it may be focused initially) */
+.pswp:focus {
+  outline: 0;
+}
+
+.pswp * {
+  box-sizing: border-box;
+}
+
+.pswp img {
+  max-width: none;
+}
+
+.pswp--open {
+  display: block;
+}
+
+.pswp,
+.pswp__bg {
+  transform: translateZ(0);
+  will-change: opacity;
+}
+
+.pswp__bg {
+  opacity: 0.005;
+  background: var(--pswp-bg);
+}
+
+.pswp,
+.pswp__scroll-wrap {
+  overflow: hidden;
+}
+
+.pswp__scroll-wrap,
+.pswp__bg,
+.pswp__container,
+.pswp__item,
+.pswp__content,
+.pswp__img,
+.pswp__zoom-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.pswp__img,
+.pswp__zoom-wrap {
+  width: auto;
+  height: auto;
+}
+
+.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
+  cursor: -webkit-zoom-in;
+  cursor: -moz-zoom-in;
+  cursor: zoom-in;
+}
+
+.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
+  cursor: move;
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab;
+}
+
+.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
+}
+
+/* :active to override grabbing cursor */
+.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
+.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
+.pswp__img {
+  cursor: -webkit-zoom-out;
+  cursor: -moz-zoom-out;
+  cursor: zoom-out;
+}
+
+/* Prevent selection and tap highlights */
+.pswp__container,
+.pswp__img,
+.pswp__button,
+.pswp__counter {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.pswp__item {
+  /* z-index for fade transition */
+  z-index: 1;
+  overflow: hidden;
+}
+
+.pswp__hidden {
+  display: none !important;
+}
+
+/* Allow to click through pswp__content element, but not its children */
+.pswp__content {
+  pointer-events: none;
+}
+.pswp__content > * {
+  pointer-events: auto;
+}
+
+/*
+
+  PhotoSwipe UI
+
+*/
+
+/*
+	Error message appears when image is not loaded
+	(JS option errorMsg controls markup)
+*/
+.pswp__error-msg-container {
+  display: grid;
+}
+.pswp__error-msg {
+  margin: auto;
+  font-size: 1em;
+  line-height: 1;
+  color: var(--pswp-error-text-color);
+}
+
+/*
+class pswp__hide-on-close is applied to elements that
+should hide (for example fade out) when PhotoSwipe is closed
+and show (for example fade in) when PhotoSwipe is opened
+ */
+.pswp .pswp__hide-on-close {
+  opacity: 0.005;
+  will-change: opacity;
+  transition: opacity var(--pswp-transition-duration)
+    cubic-bezier(0.4, 0, 0.22, 1);
+  z-index: 10; /* always overlap slide content */
+  pointer-events: none; /* hidden elements should not be clickable */
+}
+
+/* class pswp--ui-visible is added when opening or closing transition starts */
+.pswp--ui-visible .pswp__hide-on-close {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* <button> styles, including css reset */
+.pswp__button {
+  position: relative;
+  display: block;
+  width: 50px;
+  height: 60px;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  box-shadow: none;
+  opacity: 0.85;
+  -webkit-appearance: none;
+  -webkit-touch-callout: none;
+}
+
+.pswp__button:hover,
+.pswp__button:active,
+.pswp__button:focus {
+  transition: none;
+  padding: 0;
+  background: none;
+  border: 0;
+  box-shadow: none;
+  opacity: 1;
+}
+
+.pswp__button:disabled {
+  opacity: 0.3;
+  cursor: auto;
+}
+
+.pswp__icn {
+  fill: var(--pswp-icon-color);
+  color: var(--pswp-icon-color-secondary);
+}
+
+.pswp__icn {
+  position: absolute;
+  top: 14px;
+  left: 9px;
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.pswp__icn-shadow {
+  stroke: var(--pswp-icon-stroke-color);
+  stroke-width: var(--pswp-icon-stroke-width);
+  fill: none;
+}
+
+.pswp__icn:focus {
+  outline: 0;
+}
+
+/*
+	div element that matches size of large image,
+	large image loads on top of it,
+	used when msrc is not provided
+*/
+div.pswp__img--placeholder,
+.pswp__img--with-bg {
+  background: var(--pswp-placeholder-bg);
+}
+
+.pswp__top-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  z-index: 10;
+
+  /* allow events to pass through top bar itself */
+  pointer-events: none !important;
+}
+.pswp__top-bar > * {
+  pointer-events: auto;
+  /* this makes transition significantly more smooth,
+     even though inner elements are not animated */
+  will-change: opacity;
+}
+
+/*
+
+  Close button
+
+*/
+.pswp__button--close {
+  margin-right: 6px;
+}
+
+/*
+
+  Arrow buttons
+
+*/
+.pswp__button--arrow {
+  position: absolute;
+  top: 0;
+  width: 75px;
+  height: 100px;
+  top: 50%;
+  margin-top: -50px;
+}
+
+.pswp__button--arrow:disabled {
+  display: none;
+  cursor: default;
+}
+
+.pswp__button--arrow .pswp__icn {
+  top: 50%;
+  margin-top: -30px;
+  width: 60px;
+  height: 60px;
+  background: none;
+  border-radius: 0;
+}
+
+.pswp--one-slide .pswp__button--arrow {
+  display: none;
+}
+
+/* hide arrows on touch screens */
+.pswp--touch .pswp__button--arrow {
+  visibility: hidden;
+}
+
+/* show arrows only after mouse was used */
+.pswp--has_mouse .pswp__button--arrow {
+  visibility: visible;
+}
+
+.pswp__button--arrow--prev {
+  right: auto;
+  left: 0px;
+}
+
+.pswp__button--arrow--next {
+  right: 0px;
+}
+.pswp__button--arrow--next .pswp__icn {
+  left: auto;
+  right: 14px;
+  /* flip horizontally */
+  transform: scale(-1, 1);
+}
+
+/*
+
+  Zoom button
+
+*/
+.pswp__button--zoom {
+  display: none;
+}
+
+.pswp--zoom-allowed .pswp__button--zoom {
+  display: block;
+}
+
+/* "+" => "-" */
+.pswp--zoomed-in .pswp__zoom-icn-bar-v {
+  display: none;
+}
+
+/*
+
+  Loading indicator
+
+*/
+.pswp__preloader {
+  position: relative;
+  overflow: hidden;
+  width: 50px;
+  height: 60px;
+  margin-right: auto;
+}
+
+.pswp__preloader .pswp__icn {
+  opacity: 0;
+  transition: opacity 0.2s linear;
+  animation: pswp-clockwise 600ms linear infinite;
+}
+
+.pswp__preloader--active .pswp__icn {
+  opacity: 0.85;
+}
+
+@keyframes pswp-clockwise {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/*
+
+  "1 of 10" counter
+
+*/
+.pswp__counter {
+  height: 30px;
+  margin-top: 15px;
+  margin-inline-start: 20px;
+  font-size: 14px;
+  line-height: 30px;
+  color: var(--pswp-icon-color);
+  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
+  opacity: 0.85;
+}
+
+.pswp--one-slide .pswp__counter {
+  display: none;
+}

assets/js/main.js

@@ -1,50 +0,0 @@
-import PhotoSwipeLightbox from "photoswipe/lightbox";
-import Masonry from "masonry-layout";
-
-const lightbox = new PhotoSwipeLightbox({
-  gallery: ".lightbox",
-  children: ".pswp-image",
-  bgOpacity: 1,
-  showAnimationDuration: 300,
-  hideAnimationDuration: 300,
-  initialZoomLevel: "fit",
-  pswpModule: () => import("photoswipe"),
-  paddingFn: () => {
-    const captionHeight =
-      5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
-    return {
-      top: captionHeight,
-      bottom: captionHeight,
-      left: 0,
-      right: 0,
-    };
-  },
-});
-
-lightbox.on("uiRegister", function () {
-  lightbox.pswp.ui.registerElement({
-    name: "caption",
-    order: 9,
-    isButton: false,
-    appendTo: "root",
-    onInit: (el, _) => {
-      lightbox.pswp.on("change", () => {
-        const element = lightbox.pswp.currSlide.data.element;
-        el.innerHTML =
-          element?.parentElement.querySelector(".pswp-caption-content")
-            ?.innerHTML || "";
-      });
-    },
-  });
-});
-
-lightbox.init();
-
-const masonryContainers = document.querySelectorAll(".masonry");
-masonryContainers.forEach((container) => {
-  new Masonry(container, {
-    itemSelector: ".grid-item",
-    columnWidth: ".grid-sizer",
-    percentPosition: true,
-  });
-});

assets/js/photoswipe.js

@@ -0,0 +1,10 @@
+import PhotoSwipeLightbox from "js/photoswipe/photoswipe-lightbox.esm.js";
+
+new PhotoSwipeLightbox({
+  gallery: ".gallery",
+  children: "a",
+  showAnimationDuration: 300,
+  hideAnimationDuration: 300,
+  initialZoomLevel: "fit",
+  pswpModule: () => import("js/photoswipe/photoswipe.esm.js"),
+}).init();

assets/sass/blockquote.scss

@@ -1,21 +0,0 @@
-blockquote {
-  border-left: 0.15rem solid
-    color-mix(in srgb, var(--text) 30%, var(--background));
-
-  .alert-heading {
-    font-weight: bold;
-    margin: 0 0 0.5rem 0;
-  }
-
-  .alert-emoji {
-    margin-right: 0.5rem;
-  }
-
-  p {
-    margin: 0.5rem 0 0.5rem 0;
-  }
-
-  p:last-child {
-    margin: 0;
-  }
-}

assets/sass/code.scss

@@ -1,423 +0,0 @@
-pre {
-  color: var(--text);
-  background-color: var(--background-50);
-  padding: 1rem;
-  border-radius: 0.5rem;
-  overflow-x: auto;
-}
-
-/* PreWrapper */
-.chroma {
-  .line.prompt::before {
-    content: "$ ";
-  }
-
-  /* Error */
-  .err {
-    color: var(--accent-600);
-  }
-
-  /* LineLink */
-  .lnlinks {
-    outline: none;
-    text-decoration: none;
-    color: inherit;
-  }
-
-  /* LineTableTD */
-  .lntd {
-    vertical-align: top;
-    padding: 0;
-    margin: 0;
-    border: 0;
-  }
-
-  /* LineTable */
-  .lntable {
-    border-spacing: 0;
-    padding: 0;
-    margin: 0;
-    border: 0;
-  }
-
-  /* LineHighlight */
-  .hl {
-    background-color: var(--background-100);
-  }
-
-  /* LineNumbersTable */
-  .lnt {
-    white-space: pre;
-    -webkit-user-select: none;
-    user-select: none;
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-  }
-
-  /* LineNumbers */
-  .ln {
-    white-space: pre;
-    -webkit-user-select: none;
-    user-select: none;
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-  }
-
-  /* Line */
-  .line {
-    display: flex;
-  }
-
-  /* Keyword */
-  .k {
-    color: var(--secondary-700);
-  }
-
-  /* KeywordConstant */
-  .kc {
-    color: var(--primary-600);
-  }
-
-  /* KeywordDeclaration */
-  .kd {
-    color: var(--secondary-700);
-  }
-
-  /* KeywordNamespace */
-  .kn {
-    color: var(--secondary-700);
-  }
-
-  /* KeywordPseudo */
-  .kp {
-    color: var(--primary-600);
-  }
-
-  /* KeywordReserved */
-  .kr {
-    color: var(--secondary-700);
-  }
-
-  /* KeywordType */
-  .kt {
-    color: var(--secondary-700);
-  }
-
-  /* Name */
-  .nc {
-    color: var(--accent-700);
-    font-weight: bold;
-  }
-
-  /* NameConstant */
-  .no {
-    color: var(--primary-600);
-    font-weight: bold;
-  }
-
-  /* NameDecorator */
-  .nd {
-    color: var(--secondary-800);
-    font-weight: bold;
-  }
-
-  /* NameEntity */
-  .ni {
-    color: var(--accent-700);
-  }
-
-  /* NameException */
-  .ne {
-    color: var(--accent-700);
-    font-weight: bold;
-  }
-
-  /* NameLabel */
-  .nl {
-    color: var(--primary-600);
-    font-weight: bold;
-  }
-
-  /* NameNamespace */
-  .nn {
-    color: var(--secondary-700);
-  }
-
-  /* NameProperty */
-  .py {
-    color: var(--primary-600);
-  }
-
-  /* NameTag */
-  .nt {
-    color: var(--primary-700);
-  }
-
-  /* NameVariable */
-  .nv {
-    color: var(--primary-600);
-  }
-
-  /* NameVariableClass */
-  .vc {
-    color: var(--primary-600);
-  }
-
-  /* NameVariableGlobal */
-  .vg {
-    color: var(--primary-600);
-  }
-
-  /* NameVariableInstance */
-  .vi {
-    color: var(--primary-600);
-  }
-
-  /* NameVariableMagic */
-  .vm {
-    color: var(--primary-600);
-  }
-
-  /* NameFunction */
-  .nf {
-    color: var(--secondary-800);
-    font-weight: bold;
-  }
-
-  /* NameFunctionMagic */
-  .fm {
-    color: var(--secondary-800);
-    font-weight: bold;
-  }
-
-  /* Literal */
-  .l {
-    color: var(--primary-700);
-  }
-
-  /* LiteralDate */
-  .ld {
-    color: var(--primary-600);
-  }
-
-  /* LiteralString */
-  .s {
-    color: var(--primary-700);
-  }
-
-  /* LiteralStringAffix */
-  .sa {
-    color: var(--primary-600);
-  }
-
-  /* LiteralStringBacktick */
-  .sb {
-    color: var(--primary-700);
-  }
-
-  /* LiteralStringChar */
-  .sc {
-    color: var(--primary-700);
-  }
-
-  /* LiteralStringDelimiter */
-  .dl {
-    color: var(--primary-600);
-  }
-
-  /* LiteralStringDoc */
-  .sd {
-    color: var(--primary-700);
-  }
-
-  /* LiteralStringDouble */
-  .s2 {
-    color: var(--primary-700);
-  }
-
-  /* LiteralStringEscape */
-  .se {
-    color: var(--primary-600);
-  }
-
-  /* LiteralStringHeredoc */
-  .sh {
-    color: var(--primary-600);
-  }
-
-  /* LiteralStringInterpol */
-  .si {
-    color: var(--primary-700);
-  }
-
-  /* LiteralStringOther */
-  .sx {
-    color: var(--primary-700);
-  }
-
-  /* LiteralStringRegex */
-  .sr {
-    color: var(--primary-600);
-  }
-
-  /* LiteralStringSingle */
-  .s1 {
-    color: var(--primary-700);
-  }
-
-  /* LiteralStringSymbol */
-  .ss {
-    color: var(--primary-700);
-  }
-
-  /* LiteralNumber */
-  .m {
-    color: var(--primary-700);
-  }
-
-  /* LiteralNumberBin */
-  .mb {
-    color: var(--primary-700);
-  }
-
-  /* LiteralNumberFloat */
-  .mf {
-    color: var(--primary-700);
-  }
-
-  /* LiteralNumberHex */
-  .mh {
-    color: var(--primary-700);
-  }
-
-  /* LiteralNumberInteger */
-  .mi {
-    color: var(--primary-700);
-  }
-
-  /* LiteralNumberIntegerLong */
-  .il {
-    color: var(--primary-700);
-  }
-
-  /* LiteralNumberOct */
-  .mo {
-    color: var(--primary-700);
-  }
-
-  /* Operator */
-  .o {
-    color: var(--secondary-700);
-    font-weight: bold;
-  }
-
-  /* OperatorWord */
-  .ow {
-    color: var(--secondary-700);
-    font-weight: bold;
-  }
-
-  /* Comment */
-  .c {
-    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-    font-style: italic;
-  }
-
-  /* CommentHashbang */
-  .ch {
-    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-    font-style: italic;
-  }
-
-  /* CommentMultiline */
-  .cm {
-    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-    font-style: italic;
-  }
-
-  /* CommentSingle */
-  .c1 {
-    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-    font-style: italic;
-  }
-
-  /* CommentSpecial */
-  .cs {
-    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-    font-weight: bold;
-    font-style: italic;
-  }
-
-  /* CommentPreproc */
-  .cp {
-    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-    font-weight: bold;
-    font-style: italic;
-  }
-
-  /* CommentPreprocFile */
-  .cpf {
-    color: color-mix(in srgb, var(--text) 50%, var(--background-50));
-    font-weight: bold;
-    font-style: italic;
-  }
-
-  /* GenericDeleted */
-  .gd {
-    color: var(--accent-900);
-    background-color: var(--accent-300);
-  }
-
-  /* GenericEmph */
-  .ge {
-    font-style: italic;
-  }
-
-  /* GenericError */
-  .gr {
-    color: var(--accent-600);
-  }
-
-  /* GenericHeading */
-  .gh {
-    color: var(--primary-600);
-    font-weight: bold;
-  }
-
-  /* GenericInserted */
-  .gi {
-    color: var(--primary-800);
-    background-color: var(--primary-200);
-  }
-
-  /* GenericOutput */
-  .go {
-    color: color-mix(in srgb, var(--text) 70%, var(--background-50));
-  }
-
-  /* GenericPrompt */
-  .gp {
-    color: color-mix(in srgb, var(--text) 70%, var(--background-50));
-  }
-
-  /* GenericStrong */
-  .gs {
-    font-weight: bold;
-  }
-
-  /* GenericSubheading */
-  .gu {
-    color: var(--primary-600);
-  }
-
-  /* GenericTraceback */
-  .gt {
-    color: var(--secondary-700);
-  }
-
-  /* GenericUnderline */
-  .gl {
-    text-decoration: underline;
-  }
-}

assets/sass/colors.scss

@@ -1,71 +1,143 @@
-// https://www.realtimecolors.com/
-
 :root {
-  --text: #0d1416;
+  --text: #050c0e;
-  --background: #fdfdfd;
+  --background: #f1f8fa;
-  --primary: #669ca3;
+  --primary: #51a9c3;
-  --secondary: #a5abc9;
+  --secondary: #d88fb9;
-  --accent: #8d8cba;
+  --accent: #ce7f71;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #f0f8fa;
+    --background: #050d0f;
+    --primary: #3c94af;
+    --secondary: #712853;
+    --accent: #8d3e30;
+  }
 }
 
 :root {
-  --text-50: #eff4f6;
+  --text-50: #ecf6f8;
-  --text-100: #dfe9ec;
+  --text-100: #daecf1;
-  --text-200: #bfd4d9;
+  --text-200: #b4dae4;
-  --text-300: #9fbec6;
+  --text-300: #8fc7d6;
-  --text-400: #7ea8b4;
+  --text-400: #69b4c9;
-  --text-500: #5e92a1;
+  --text-500: #44a1bb;
-  --text-600: #4b7581;
+  --text-600: #368196;
-  --text-700: #395860;
+  --text-700: #296170;
-  --text-800: #263b40;
+  --text-800: #1b414b;
-  --text-900: #131d20;
+  --text-900: #0e2025;
-  --text-950: #090f10;
+  --text-950: #071013;
 
-  --background-50: #f0f5f5;
+  --background-50: #ecf6f8;
-  --background-100: #e0ebeb;
+  --background-100: #daecf1;
-  --background-200: #c2d6d6;
+  --background-200: #b4dae4;
-  --background-300: #a3c2c2;
+  --background-300: #8fc7d6;
-  --background-400: #85adad;
+  --background-400: #69b4c9;
-  --background-500: #669999;
+  --background-500: #44a1bb;
-  --background-600: #527a7a;
+  --background-600: #368196;
-  --background-700: #3d5c5c;
+  --background-700: #296170;
-  --background-800: #293d3d;
+  --background-800: #1b414b;
-  --background-900: #141f1f;
+  --background-900: #0e2025;
-  --background-950: #0a0f0f;
+  --background-950: #071013;
 
-  --primary-50: #eff5f5;
+  --primary-50: #ecf6f8;
-  --primary-100: #dfeaec;
+  --primary-100: #d9ecf2;
-  --primary-200: #bfd6d9;
+  --primary-200: #b3d9e5;
-  --primary-300: #9fc1c6;
+  --primary-300: #8dc6d8;
-  --primary-400: #80adb3;
+  --primary-400: #67b4cb;
-  --primary-500: #60989f;
+  --primary-500: #41a1be;
-  --primary-600: #4d7a80;
+  --primary-600: #348198;
-  --primary-700: #395b60;
+  --primary-700: #276072;
-  --primary-800: #263d40;
+  --primary-800: #1a404c;
-  --primary-900: #131e20;
+  --primary-900: #0d2026;
-  --primary-950: #0a0f10;
+  --primary-950: #071013;
 
-  --secondary-50: #eff0f5;
+  --secondary-50: #f8ecf3;
-  --secondary-100: #dfe1ec;
+  --secondary-100: #f2d9e8;
-  --secondary-200: #bfc4d9;
+  --secondary-200: #e4b4d0;
-  --secondary-300: #9fa6c6;
+  --secondary-300: #d78eb9;
-  --secondary-400: #8088b3;
+  --secondary-400: #ca68a1;
-  --secondary-500: #606a9f;
+  --secondary-500: #bd428a;
-  --secondary-600: #4d5580;
+  --secondary-600: #97356e;
-  --secondary-700: #394060;
+  --secondary-700: #712853;
-  --secondary-800: #262b40;
+  --secondary-800: #4b1b37;
-  --secondary-900: #131520;
+  --secondary-900: #260d1c;
-  --secondary-950: #0a0b10;
+  --secondary-950: #13070e;
 
-  --accent-50: #efeff5;
+  --accent-50: #f8eeec;
-  --accent-100: #dfdfec;
+  --accent-100: #f2ddd9;
-  --accent-200: #c0bfd9;
+  --accent-200: #e5bbb3;
-  --accent-300: #a09fc6;
+  --accent-300: #d8988d;
-  --accent-400: #8080b3;
+  --accent-400: #cb7667;
-  --accent-500: #61609f;
+  --accent-500: #be5441;
-  --accent-600: #4d4d80;
+  --accent-600: #984334;
-  --accent-700: #3a3960;
+  --accent-700: #723227;
-  --accent-800: #272640;
+  --accent-800: #4c221a;
-  --accent-900: #131320;
+  --accent-900: #26110d;
-  --accent-950: #0a0a10;
+  --accent-950: #130807;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-50: #061113;
+    --text-100: #0d2126;
+    --text-200: #19424d;
+    --text-300: #266373;
+    --text-400: #338599;
+    --text-500: #40a6bf;
+    --text-600: #66b8cc;
+    --text-700: #8cc9d9;
+    --text-800: #b3dbe6;
+    --text-900: #d9edf2;
+    --text-950: #ecf6f9;
+
+    --background-50: #061113;
+    --background-100: #0d2126;
+    --background-200: #19424d;
+    --background-300: #266373;
+    --background-400: #338599;
+    --background-500: #40a6bf;
+    --background-600: #66b8cc;
+    --background-700: #8cc9d9;
+    --background-800: #b3dbe6;
+    --background-900: #d9edf2;
+    --background-950: #ecf6f9;
+
+    --primary-50: #071013;
+    --primary-100: #0d2026;
+    --primary-200: #1a404c;
+    --primary-300: #276072;
+    --primary-400: #348198;
+    --primary-500: #41a1be;
+    --primary-600: #67b4cb;
+    --primary-700: #8dc6d8;
+    --primary-800: #b3d9e5;
+    --primary-900: #d9ecf2;
+    --primary-950: #ecf6f8;
+
+    --secondary-50: #13070e;
+    --secondary-100: #260d1c;
+    --secondary-200: #4b1b37;
+    --secondary-300: #712853;
+    --secondary-400: #97356e;
+    --secondary-500: #bd428a;
+    --secondary-600: #ca68a1;
+    --secondary-700: #d78eb9;
+    --secondary-800: #e4b4d0;
+    --secondary-900: #f2d9e8;
+    --secondary-950: #f8ecf3;
+
+    --accent-50: #130807;
+    --accent-100: #26110d;
+    --accent-200: #4c221a;
+    --accent-300: #723227;
+    --accent-400: #984334;
+    --accent-500: #be5441;
+    --accent-600: #cb7667;
+    --accent-700: #d8988d;
+    --accent-800: #e5bbb3;
+    --accent-900: #f2ddd9;
+    --accent-950: #f8eeec;
+  }
 }

assets/sass/common.scss

@@ -12,37 +12,20 @@ a {
   color: var(--text-600);
 }
 
-a:hover {
-  color: var(--text-800);
-}
-
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
+  margin: 0;
   font-weight: 500;
-  overflow-wrap: break-word;
-  word-break: break-word;
-}
-
-hr {
-  margin: 1rem 0 1rem 0;
-  border: none;
-  height: 0.15rem;
-  background-color: color-mix(in srgb, var(--text) 30%, var(--background));
 }
 
 figure {
   margin: 0;
 }
 
-blockquote {
-  margin: 1rem 0 1rem 0;
-  padding: 0.5rem 1rem 0.5rem 1rem;
-}
-
 body {
   margin: 0.5rem;
   min-height: calc(100vh - 1rem);
@@ -54,43 +37,3 @@ body {
     flex: 1;
   }
 }
-
-p {
-  margin: 1.5rem 0 1.5rem 0;
-}
-
-li {
-  margin: 0.5rem 0 0.5rem 0;
-}
-
-details {
-  background-color: var(--background-50);
-  padding: 1rem 1.5rem 1rem 1.5rem;
-  border-radius: 0.5rem;
-
-  p {
-    margin: 0.5rem 0 0.5rem 0;
-  }
-
-  summary {
-    margin: 0.5rem;
-    font-weight: bold;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: pointer;
-  }
-
-  summary::before {
-    content: "";
-    border-width: 0.4rem;
-    border-style: solid;
-    border-color: transparent transparent transparent var(--text);
-    transition: transform 0.3s ease;
-    transform-origin: 25% 50%;
-  }
-
-  &[open] summary::before {
-    transform: rotate(90deg);
-  }
-}

assets/sass/content.scss

@@ -4,10 +4,6 @@
   padding: 2rem;
 }
 
-.content.wide {
-  max-width: $width-wide;
-}
-
 @media (max-width: $width-mobile) {
   .content {
     padding: 1rem;

assets/sass/details.scss

@@ -1,55 +0,0 @@
-main.with-details {
-  max-width: $width-wide;
-  margin: 0 auto;
-  padding: 2rem;
-
-  > .content {
-    width: 100%;
-    padding: 0;
-  }
-
-  $width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
-  display: grid;
-  grid-template-columns: $width-sidebar $width-content $width-sidebar;
-  column-gap: 2rem;
-
-  .title {
-    font-size: 1.75rem;
-    margin: 0;
-  }
-
-  .length {
-    color: color-mix(in srgb, var(--text) 70%, var(--background));
-    margin: 0.5rem 0 0.5rem 0;
-    font-size: 0.8rem;
-  }
-}
-
-@media (max-width: $width-wide) {
-  main.with-details {
-    display: block;
-    padding: 0;
-
-    > .details {
-      max-width: $width-content;
-      margin: 0 auto;
-      padding: 2rem;
-    }
-
-    > .content {
-      padding: 2rem;
-    }
-  }
-}
-
-@media (max-width: $width-mobile) {
-  main.with-details {
-    > .details {
-      padding: 1rem;
-    }
-
-    > .content {
-      padding: 0 1rem 1rem 1rem;
-    }
-  }
-}

assets/sass/footer.scss

@@ -13,14 +13,15 @@
 
     font-size: 0.85rem;
 
-    color: color-mix(in srgb, var(--text) 50%, var(--background));
+    color: color-mix(in srgb, var(--text) 30%, var(--background));
 
     a {
+      text-decoration: none;
       color: inherit;
     }
 
     a:hover {
-      color: var(--text-800);
+      color: var(--text-900);
     }
 
     .footer-nav {
@@ -36,7 +37,6 @@
         list-style: none;
 
         li {
-          margin: 0;
           font-size: 0.85rem;
         }
       }

assets/sass/gallery.scss

@@ -1,45 +0,0 @@
-.gallery {
-  margin: -0.75rem;
-
-  .grid-sizer {
-    width: calc(25% - 1.5rem);
-    margin: 0 0.75rem;
-  }
-
-  .grid-item {
-    width: calc(25% - 1.5rem);
-    margin: 0.75rem;
-  }
-}
-
-@media (max-width: $width-content) {
-  .gallery {
-    margin: -0.5rem;
-
-    .grid-sizer {
-      width: calc(33% - 1rem);
-      margin: 0 0.5rem;
-    }
-
-    .grid-item {
-      width: calc(33% - 1rem);
-      margin: 0.5rem;
-    }
-  }
-}
-
-@media (max-width: $width-mobile) {
-  .gallery {
-    margin: -0.375rem;
-
-    .grid-sizer {
-      width: calc(50% - 0.75rem);
-      margin: 0 0.375rem;
-    }
-
-    .grid-item {
-      width: calc(50% - 0.75rem);
-      margin: 0.375rem;
-    }
-  }
-}

assets/sass/header.scss

@@ -12,11 +12,12 @@
     align-items: center;
 
     a {
+      text-decoration: none;
       color: inherit;
     }
 
     a:hover {
-      color: var(--text-800);
+      color: var(--text-900);
     }
 
     .site-title {
@@ -58,11 +59,10 @@
 
     .header-container {
       .site-title {
-        z-index: 2;
+        z-index: 1;
       }
 
       .nav {
-        z-index: 1;
         position: fixed;
         inset: 0;
 
@@ -82,13 +82,13 @@
           gap: 2rem;
 
           li a {
-            font-size: 1.5rem;
+            font-size: 1.25rem;
           }
         }
       }
 
       .nav-toggle-label {
-        z-index: 2;
+        z-index: 1;
 
         display: flex;
         flex-direction: column;

assets/sass/hero.scss

@@ -3,10 +3,25 @@
   margin: 0 auto;
   padding: 2rem 2rem 0 2rem;
 
-  .title {
+  h1 {
-    margin: 0;
     font-size: 2.5rem;
   }
+
+  .meta {
+    font-size: 0.8rem;
+
+    .date {
+      color: var(--text-600);
+    }
+
+    .duration {
+      color: color-mix(in srgb, var(--text) 50%, var(--background));
+    }
+  }
+
+  .image {
+    padding-top: 1.5rem;
+  }
 }
 
 .hero + .content {
@@ -15,6 +30,6 @@
 
 @media (max-width: $width-mobile) {
   .hero {
-    padding: 1rem 1rem 0 1rem;
+    padding: 1rem 1em 0 1rem;
   }
 }

assets/sass/image.scss

@@ -1,16 +1,16 @@
-img {
+.image {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-
-.captioned-image {
   width: 100%;
   padding: 1rem 0;
 
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
   figcaption {
     text-align: center;
-    padding-top: 1rem;
+    padding-top: 0.5rem;
-    color: color-mix(in srgb, var(--text) 70%, var(--background));
+    color: color-mix(in srgb, var(--text) 50%, var(--background));
   }
 }

assets/sass/list.scss

@@ -1,43 +1,95 @@
-.list {
+main.with-meta {
-  .post {
+  max-width: $width-wide;
+  margin: 0 auto;
+  padding: 2rem;
+
+  > .content {
+    padding: 0;
+  }
+
+  $width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
+  display: grid;
+  grid-template-columns: $width-sidebar $width-content $width-sidebar;
+  column-gap: 2rem;
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  .length {
+    color: color-mix(in srgb, var(--text) 50%, var(--background));
+    margin: 0.25rem 0;
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: $width-wide) {
+  main.with-meta {
     display: block;
+    padding: 0;
 
-    > a {
+    > .meta {
-      color: inherit;
+      max-width: $width-content;
+      margin: 0 auto;
+      padding: 2rem;
     }
 
-    > a:hover {
+    > .content {
-      color: var(--text-800);
+      padding: 2rem;
-    }
-
-    &:not(:first-child) {
-      margin: 4rem 0 4rem 0;
-    }
-
-    .title {
-      margin: 0;
-      font-size: 2.25rem;
-    }
-
-    .summary {
-      margin: 0.5rem 0 0.5rem 0;
-    }
-
-    .heading-anchor {
-      display: none;
     }
   }
 }
 
 @media (max-width: $width-mobile) {
-  .list {
+  main.with-meta {
-    .post {
+    > .meta {
-      &:not(:first-child) {
+      padding: 1rem;
-        margin: 2rem 0 2rem 0;
+    }
+
+    > .content {
+      padding: 0 1rem 1rem 1rem;
+    }
+  }
+}
+
+.posts-list {
+  .post {
+    display: block;
+    color: inherit;
+    text-decoration: none;
+
+    &:not(:first-child) {
+      margin-top: 4rem;
+    }
+
+    .title {
+      font-size: 2.25rem;
+    }
+
+    .meta {
+      font-size: 0.8rem;
+
+      .date {
+        color: var(--text-600);
       }
 
-      .title {
+      .duration {
-        font-size: 1.5rem;
+        color: color-mix(in srgb, var(--text) 50%, var(--background));
+      }
+    }
+  }
+
+  .post:hover .title,
+  .post:hover .summary {
+    color: var(--text-900);
+  }
+}
+
+@media (max-width: $width-mobile) {
+  .posts-list {
+    .post {
+      &:not(:first-child) {
+        margin-top: 2rem;
       }
     }
   }

assets/sass/main.scss

@@ -8,19 +8,12 @@ $width-wide: 75rem;
 
 @import "heading";
 @import "image";
-@import "blockquote";
-@import "code";
-@import "table";
-@import "meta";
 
-@import "details";
 @import "list";
-@import "gallery";
 
 @import "header";
-@import "hero";
 @import "content";
-@import "postnav";
+@import "hero";
 @import "footer";
 
 @import "photoswipe";

assets/sass/meta.scss

@@ -1,20 +0,0 @@
-.meta {
-  margin: 1rem 0 1rem 0;
-  font-size: 0.8rem;
-
-  .date {
-    color: var(--text);
-  }
-
-  .tag {
-    color: var(--primary-600);
-  }
-
-  .tag:hover {
-    color: var(--primary-800);
-  }
-
-  .duration {
-    color: color-mix(in srgb, var(--text) 70%, var(--background));
-  }
-}

assets/sass/photoswipe.scss

@@ -1,37 +1,5 @@
-@import "photoswipe/dist/photoswipe";
-
 .pswp {
   --pswp-bg: var(--background);
   --pswp-icon-color: var(--text);
-  --pswp-icon-color-secondary: color-mix(
+  --pswp-icon-color-secondary: color-mix(in srgb, var(--text) 30%, var(--background));
-    in srgb,
-    var(--text) 30%,
-    var(--background)
-  );
-}
-
-.pswp-caption-content {
-  display: none;
-}
-
-.pswp__caption {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  height: auto;
-  padding: 1rem 2rem;
-  text-align: center;
-  line-height: 1.5rem;
-
-  .meta {
-    margin: 0;
-  }
-
-  a {
-    color: inherit;
-  }
-
-  a:hover {
-    color: var(--text-800);
-  }
 }

assets/sass/postnav.scss

@@ -1,59 +0,0 @@
-.postnav {
-  max-width: $width-content;
-  margin: 0 auto;
-  padding: 2rem;
-
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-
-  a {
-    flex: 50%;
-    color: inherit;
-  }
-
-  a:hover {
-    color: var(--text-800);
-  }
-
-  p {
-    margin: 0.5rem 0 0.5rem 0;
-  }
-
-  .caption {
-    font-weight: 500;
-  }
-
-  .title {
-    overflow-wrap: break-word;
-    word-break: break-word;
-  }
-
-  .next {
-    text-align: right;
-  }
-
-  .previous .caption::before {
-    content: "‹ ";
-  }
-
-  .next .caption::after {
-    content: " ›";
-  }
-}
-
-.content + .postnav {
-  padding-top: 0;
-}
-
-@media (max-width: $width-mobile) {
-  .postnav {
-    padding: 1rem;
-
-    flex-direction: column;
-
-    a {
-      flex: auto;
-    }
-  }
-}

assets/sass/table.scss

@@ -1,30 +0,0 @@
-.table-wrapper {
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  thead th {
-    border-bottom: 0.1rem solid
-      color-mix(in srgb, var(--text) 20%, var(--background));
-  }
-
-  tr + tr td {
-    border-top: 0.1rem solid
-      color-mix(in srgb, var(--text) 10%, var(--background));
-  }
-
-  th,
-  td {
-    padding: 0.5rem;
-    border-right: 0.1rem solid
-      color-mix(in srgb, var(--text) 10%, var(--background));
-  }
-
-  th:last-child,
-  td:last-child {
-    border-right: none;
-  }
-}

flake.nix

@@ -27,7 +27,6 @@
         devShells.${system}.default = pkgs.mkShell {
           packages = with pkgs; [
             hugo
-            nodejs
             jq
             unzip
           ];

layouts/404.html

@@ -4,7 +4,8 @@
       <h1>404</h1>
       <p>This is a dead link. Whatever was here, it&apos;s gone now.</p>
       <p>
-        <a href="{{- relURL "" -}}">Let&apos;s pretend this never happened</a>.
+        <a href="{{- relURL "" -}}">Let&apos;s pretend this never happened</a
+        >.
       </p>
     </div>
   </main>

layouts/_default/_markup/render-blockquote.html

@@ -1,26 +0,0 @@
-{{ $emoji := dict
-  "caution" ":exclamation:"
-  "warning" ":warning:"
-  "important" ":information_source:"
-  "tip" ":bulb:"
-}}
-{{- if eq .Type "alert" -}}
-  <blockquote class="alert alert-{{ .AlertType }}">
-    <p class="alert-heading">
-      <span class="alert-emoji">
-        {{- transform.Emojify (index $emoji .AlertType) -}}
-      </span>
-      {{ if .AlertTitle }}
-        {{- .AlertTitle -}}
-      {{ else }}
-        {{- .AlertType | title -}}
-      {{ end }}
-    </p>
-    {{- .Text -}}
-  </blockquote>
-{{- else -}}
-  <blockquote>
-    {{- .Text -}}
-  </blockquote>
-{{- end -}}
-{{- /* chomp trailing newline */ -}}

layouts/_default/_markup/render-codeblock-bash.html

@@ -1,4 +0,0 @@
-{{ $result := transform.HighlightCodeBlock . }}
-{{ $pattern := `(?s)<span class="line"([^>]*)>(\s*<span[^>]*>)?\$ (.*?)(</span>\s*)</span>` }}
-{{ $processed := replaceRE $pattern `<span class="line prompt"$1>$2$3$4</span>` $result.Wrapped }}
-{{ $processed | safeHTML }}

layouts/_default/_markup/render-heading.html

@@ -2,4 +2,3 @@
   {{ .Text | safeHTML }}
   <a href="#{{- .Anchor | safeURL -}}" class="heading-anchor">#</a>
 </h{{ .Level }}>
-{{- /* chomp trailing newline */ -}}

layouts/_default/_markup/render-image.html

@@ -1,3 +1,6 @@
-{{ $data := partial "components/image/process.html" (dict "page" .Page "src" .Destination) }}
+{{ partial "image.html" (dict
-{{ partial "components/image/index.html" (merge $data (dict "caption" .Text "title" .Title)) }}
+  "path" .Destination
-{{- /* chomp trailing newline */ -}}
+  "caption" .Text
+  "alt" .Title
+  )
+}}

layouts/_default/_markup/render-link.html

@@ -5,6 +5,5 @@
     target="_blank" rel="noopener"
   {{ end }}
 >
-  {{- .Text -}}
+  {{ .Text | safeHTML }}
 </a>
-{{- /* chomp trailing newline */ -}}

layouts/_default/_markup/render-table.html

@@ -1,41 +0,0 @@
-<div class="table-wrapper">
-  <table
-    {{- range $k, $v := .Attributes }}
-      {{- if $v }}
-        {{- printf " %s=%q" $k $v | safeHTMLAttr }}
-      {{- end }}
-    {{- end }}
-  >
-    <thead>
-      {{- range .THead }}
-        <tr>
-          {{- range . }}
-            <th
-              {{- with .Alignment }}
-                {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
-              {{- end -}}
-            >
-              {{- .Text -}}
-            </th>
-          {{- end }}
-        </tr>
-      {{- end }}
-    </thead>
-    <tbody>
-      {{- range .TBody }}
-        <tr>
-          {{- range . }}
-            <td
-              {{- with .Alignment }}
-                {{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
-              {{- end -}}
-            >
-              {{- .Text -}}
-            </td>
-          {{- end }}
-        </tr>
-      {{- end }}
-    </tbody>
-  </table>
-</div>
-{{- /* chomp trailing newline */ -}}

layouts/_default/baseof.html

@@ -1,14 +1,39 @@
 <!doctype html>
 <html lang="{{- .Site.LanguageCode -}}">
-  {{ partial "components/head/index.html" . }}
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+    <title>
+      {{- if .IsHome -}}
+        {{ .Site.Title }}
+      {{- else -}}
+        {{ .Site.Title }} &middot;
+        {{ .Title }}
+      {{- end -}}
+    </title>
+
+    {{ with .Site.Params.description }}
+      <meta name="description" content="{{- . -}}" />
+    {{ end }}
+
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    {{ partial "head/bots.html" }}
+    {{ partial "head/rss.html" }}
+    {{ partial "head/opengraph.html" . }}
+    {{ partial "head/twitter.html" . }}
+    {{ partial "head/photoswipe.html" }}
+    {{ partial "head/styles.html" }}
+  </head>
 
   <body>
-    {{ partial "components/header.html" . }}
+    {{ partial "header.html" . }}
 
     {{ block "main" . }}
     {{ end }}
 
-    {{ partial "components/footer.html" . }}
+    {{ partial "footer.html" . }}
   </body>
 </html>

layouts/_default/list.html

@@ -1,9 +1,10 @@
 {{ define "main" }}
-  {{ $details := default true .Params.details }}
+  <main class="with-meta">
-  <main class="{{- if $details -}}with-details{{- end -}}">
+    <section class="meta">
-    {{ if $details }}
+      <h1>{{ .Page.Title }}</h1>
-      {{ partial "components/list/details.html" . }}
+      <p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
-    {{ end }}
+      {{ .Content }}
+    </section>
     <div class="content">
       {{ partial "posts/list.html" . }}
     </div>

layouts/_default/single.html

@@ -1,13 +1,8 @@
 {{ define "main" }}
   <main>
-    {{ partial "components/hero/index.html" . }}
+    {{ partial (printf "posts/%s.html" (.Params.heroType | default "hero")) . }}
     <div class="content">
       {{ .Content }}
-
-      {{ if (default true .Params.comments) }}
-        {{ partial "comments.html" . }}
-      {{ end }}
     </div>
-    {{ partial "components/postnav/index.html" . }}
   </main>
 {{ end }}

layouts/_shortcodes/contents.html

@@ -1,5 +0,0 @@
-<details class="toc">
-  <summary>Post Contents</summary>
-  {{ .Page.TableOfContents }}
-</details>
-{{- /* chomp trailing newline */ -}}

layouts/_shortcodes/exif-image.html

@@ -1,25 +0,0 @@
-{{ $src := "" }}
-{{ if .IsNamedParams }}
-  {{ $src = .Get "src" }}
-{{ else }}
-  {{ $src = .Get 0 }}
-{{ end }}
-
-{{ $title := "" }}
-{{ if .IsNamedParams }}
-  {{ $title = .Get "title" }}
-{{ else }}
-  {{ $title = .Get 1 }}
-{{ end }}
-
-{{ $alt := "" }}
-{{ if .IsNamedParams }}
-  {{ $alt = .Get "alt" }}
-{{ else }}
-  {{ $alt = .Get 1 }}
-{{ end }}
-
-{{ $data := partial "components/image/process.html" (dict "page" .Page "src" $src) }}
-{{ $caption := partial "components/image/exif.html" $data.original }}
-{{ partial "components/image/index.html" (merge $data (dict "caption" $caption "title" $title "alt" $alt)) }}
-{{- /* chomp trailing newline */ -}}

layouts/_shortcodes/sub.html

@@ -1 +0,0 @@
-<sub>{{ .Get 0 | markdownify }}</sub> {{- /* chomp trailing newline */ -}}

layouts/_shortcodes/sup.html

@@ -1 +0,0 @@
-<sup>{{ .Get 0 | markdownify }}</sup> {{- /* chomp trailing newline */ -}}

layouts/gallery/list.html

@@ -1,17 +0,0 @@
-{{ define "main" }}
-  {{ $details := default true .Params.details }}
-  <main class="{{- if $details -}}with-details{{- end -}}">
-    {{ if $details }}
-      {{ partial "components/list/details.html" . }}
-    {{ end }}
-    <div
-      class="{{- if $details -}}
-        content
-      {{- else -}}
-        content wide
-      {{- end -}}"
-    >
-      {{ partial "gallery/list.html" . }}
-    </div>
-  </main>
-{{ end }}

layouts/partials/components/head/index.html

@@ -1,29 +0,0 @@
-<head>
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-
-  <title>
-    {{- if .IsHome -}}
-      {{ .Site.Title }}
-    {{- else -}}
-      {{ .Site.Title }} &middot;
-      {{ .Title }}
-    {{- end -}}
-  </title>
-
-  {{ with .Site.Params.description }}
-    <meta name="description" content="{{- . -}}" />
-  {{ end }}
-
-
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-  {{ partial "components/head/bots.html" . }}
-  {{ partial "components/head/rss.html" . }}
-
-  {{ partial "components/head/opengraph.html" . }}
-  {{ partial "components/head/twitter.html" . }}
-
-  {{ partial "components/head/js.html" . }}
-  {{ partial "components/head/css.html" . }}
-</head>

layouts/partials/components/head/js.html

@@ -1,9 +0,0 @@
-{{ $opts := dict "minify" true }}
-{{ with resources.Get "js/main.js" | js.Build $opts | minify | fingerprint }}
-  <script
-    src="{{ .RelPermalink }}"
-    integrity="{{ .Data.Integrity }}"
-    crossorigin="anonymous"
-    defer
-  ></script>
-{{ end }}

layouts/partials/components/head/rss.html

@@ -1,8 +0,0 @@
-{{ with .OutputFormats.Get "RSS" }}
-  <link
-    href="{{- .Permalink -}}"
-    rel="{{- .Rel -}}"
-    type="{{- .MediaType.Type -}}"
-    title="{{- $.Site.Title -}}"
-  />
-{{ end }}

layouts/partials/components/hero/index.html

@@ -1,17 +0,0 @@
-<section class="hero">
-  <h1 class="title">{{ .Title }}</h1>
-  {{ partial "components/meta/index.html" . }}
-
-  {{ $hero := partial "components/hero/process.html" .Params.hero }}
-  {{ if $hero.src }}
-    {{ $data := partial "components/image/process.html" (dict "page" .Page "src" $hero.src) }}
-
-    {{ $final := merge $data $hero }}
-    {{ if $hero.exif }}
-      {{ $caption := partial "components/image/exif.html" $data.original }}
-      {{ $final = merge $final (dict "caption" $caption) }}
-    {{ end }}
-
-    {{ partial "components/image/index.html" $final }}
-  {{ end }}
-</section>

layouts/partials/components/hero/process.html

@@ -1,17 +0,0 @@
-{{- $src := "" -}}
-{{- $caption := "" -}}
-{{- $title := "" -}}
-{{- $alt := "" -}}
-{{- $exif := false -}}
-
-{{- if reflect.IsMap . -}}
-  {{- $src = .src -}}
-  {{- $caption = .caption -}}
-  {{- $title = .title -}}
-  {{- $alt = .alt -}}
-  {{- $exif = .exif | default false -}}
-{{- else -}}
-  {{- $src = . -}}
-{{- end -}}
-
-{{- return dict "src" $src "caption" $caption "title" $title "alt" $alt "exif" $exif -}}

layouts/partials/components/image/exif.html

@@ -1,22 +0,0 @@
-{{ $exif := .Exif.Tags }}
-
-{{ $make := $exif.Make }}
-{{ $model := $exif.Model }}
-
-{{ $lensMake := $exif.LensMake }}
-{{ $lensModel := $exif.LensModel }}
-
-{{ $lens := "" }}
-{{ if ne $make $lensMake }}
-  {{ $lens = printf "%s %s" $lensMake $lensModel }}
-{{ else }}
-  {{ $lens = $lensModel }}
-{{ end }}
-
-{{ $focal := printf "%.1f" (float $exif.FocalLength) }}
-{{ $focal35 := printf "%.1f" (float $exif.FocalLengthIn35mmFormat) }}
-{{ $shutter := printf "%d" $exif.ExposureTime }}
-{{ $aperture := printf "%d" $exif.FNumber }}
-{{ $iso := printf "%d" $exif.ISO }}
-
-{{ return printf "%s %s, %s @ %s mm (%s mm), %s s, f/%s, ISO %s" $make $model $lens $focal $focal35 $shutter $aperture $iso }}

layouts/partials/components/image/index.html

@@ -1,26 +0,0 @@
-{{- $caption := .caption | default "" -}}
-{{- $title := .title | default $caption | plainify -}}
-{{- $alt := .alt | default $title | plainify -}}
-
-
-<figure class="captioned-image lightbox">
-  <a
-    href="{{- .full.RelPermalink -}}"
-    data-pswp-src="{{- .full.RelPermalink -}}"
-    data-pswp-width="{{- .full.Width -}}"
-    data-pswp-height="{{- .full.Height -}}"
-    class="pswp-image"
-  >
-    <img
-      src="{{- .thumb.RelPermalink -}}"
-      width="{{- .thumb.Width -}}"
-      height="{{- .thumb.Height -}}"
-      loading="lazy"
-      {{ with $title }}title="{{- . -}}"{{ end }}
-      {{ with $alt }}alt="{{- . -}}"{{ end }}
-    />
-  </a>
-  {{ with $caption }}
-    <figcaption>{{ . | safeHTML }}</figcaption>
-  {{ end }}
-</figure>

layouts/partials/components/image/process.html

@@ -1,27 +0,0 @@
-{{- $page := .page -}}
-{{- $src := .src -}}
-
-{{- $original := "" -}}
-
-{{- $isRemote := strings.HasPrefix $src "http" -}}
-{{- if $isRemote -}}
-  {{- $remote := resources.GetRemote $src -}}
-  {{- $original = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
-{{- else -}}
-  {{- $original = ($page.Resources.Get $src) | default (resources.Get $src) -}}
-{{- end -}}
-
-{{- $rotate := images.AutoOrient -}}
-
-{{- $processFull := images.Process "webp q90" -}}
-{{- $full := $original | images.Filter (slice $rotate $processFull) -}}
-
-{{- $processThumb := "" -}}
-{{- if gt $original.Width 2000 -}}
-  {{- $processThumb = images.Process "resize 2000x webp q75" -}}
-{{- else -}}
-  {{- $processThumb = images.Process "webp q75" -}}
-{{- end -}}
-{{- $thumb := $original | images.Filter (slice $rotate $processThumb) -}}
-
-{{- return dict "original" $original "full" $full "thumb" $thumb -}}

layouts/partials/components/list/details.html

@@ -1,5 +0,0 @@
-<section class="details">
-  <h1 class="title">{{ .Page.Title }}</h1>
-  <p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
-  {{ .Content }}
-</section>

layouts/partials/components/meta/index.html

@@ -1,22 +0,0 @@
-<div class="meta">
-  <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
-
-  {{ if eq .Kind "page" }}
-    {{ range .Params.tags }}
-      &middot;
-      <a href="/tags/{{ . | urlize }}" class="tag">{{ . }}</a>
-    {{ end }}
-
-    {{ if ge .ReadingTime 1 }}
-      &middot;
-      <span class="duration">
-        {{ printf "%d min. read" .ReadingTime }}
-      </span>
-    {{ end }}
-  {{ else }}
-    {{ $count := len .Pages }}
-    <span class="duration">
-      {{ printf "%d %s" $count (cond (eq $count 1) "item" "items") }}
-    </span>
-  {{ end }}
-</div>

layouts/partials/components/postnav/index.html

@@ -1,26 +0,0 @@
-{{ $pages := .CurrentSection.Pages.ByDate.Reverse }}
-
-
-<div class="postnav">
-  {{ with $pages.Prev . }}
-    {{ if eq .Kind "page" }}
-      <a href="{{ .RelPermalink }}">
-        <div class="previous">
-          <p class="caption">Previous Post</p>
-          <p class="title">{{ .Title }}</p>
-        </div>
-      </a>
-    {{ end }}
-  {{ end }}
-
-  {{ with $pages.Next . }}
-    {{ if eq .Kind "page" }}
-      <a href="{{ .RelPermalink }}">
-        <div class="next">
-          <p class="caption">Next Post</p>
-          <p class="title">{{ .Title }}</p>
-        </div>
-      </a>
-    {{ end }}
-  {{ end }}
-</div>

layouts/partials/gallery/list.html

@@ -1,41 +0,0 @@
-<div class="gallery masonry lightbox">
-  <div class="grid-sizer"></div>
-  {{ range sort .Pages "Date" "desc" }}
-    {{ if not .Params.private }}
-      {{ $hero := partial "components/hero/process.html" .Params.hero }}
-      {{ if $hero.src }}
-        {{ $data := partial "components/image/process.html" (dict "page" . "src" $hero.src) }}
-
-        {{- $caption := .Title -}}
-        {{- $title := $hero.title | default $caption | plainify -}}
-        {{- $alt := $hero.alt | default $title | plainify -}}
-
-
-        <div class="image grid-item">
-          <a
-            href="{{- .RelPermalink -}}"
-            data-pswp-src="{{- $data.full.RelPermalink -}}"
-            data-pswp-width="{{- $data.full.Width -}}"
-            data-pswp-height="{{- $data.full.Height -}}"
-            class="pswp-image"
-          >
-            <img
-              src="{{- $data.thumb.RelPermalink -}}"
-              width="{{- $data.thumb.Width -}}"
-              height="{{- $data.thumb.Height -}}"
-              loading="lazy"
-              {{ with $title }}title="{{- . -}}"{{ end }}
-              {{ with $alt }}alt="{{- . -}}"{{ end }}
-            />
-          </a>
-          <div class="pswp-caption-content">
-            <div>
-              <a href="{{- .RelPermalink -}}">{{ $caption }}</a>
-              {{ partial "components/meta/index.html" . }}
-            </div>
-          </div>
-        </div>
-      {{ end }}
-    {{ end }}
-  {{ end }}
-</div>

layouts/partials/head/photoswipe.html

@@ -0,0 +1,17 @@
+{{ with resources.Get "css/photoswipe/photoswipe.css" | minify | fingerprint }}
+  <link
+    rel="stylesheet"
+    href="{{- .RelPermalink -}}"
+    integrity="{{- .Data.Integrity -}}"
+  />
+{{ end }}
+
+{{ $opts := dict "minify" true }}
+{{ with resources.Get "js/photoswipe.js" | js.Build $opts | minify | fingerprint }}
+  <script
+    src="{{ .RelPermalink }}"
+    integrity="{{ .Data.Integrity }}"
+    crossorigin="anonymous"
+    async
+  ></script>
+{{ end }}

layouts/partials/head/rss.html

@@ -0,0 +1,5 @@
+{{ with .OutputFormats.Get "RSS" }}
+  {{ printf `
+    <link href="%s" rel="%s" type="%s" title="%s" />` .Permalink .Rel .MediaType.Type $.Site.Title | safeHTML
+  }}
+{{ end }}

layouts/partials/head/styles.html

@@ -1,4 +1,4 @@
-{{ $opts := dict "targetPath" "css/main.css" "includePaths" (slice "node_modules") }}
+{{ $opts := dict "targetPath" "css/main.css" }}
 {{ with resources.Get "sass/main.scss" | css.Sass $opts | minify | fingerprint }}
   <link
     rel="stylesheet"

layouts/partials/image.html

@@ -0,0 +1,29 @@
+{{- $path := .path -}}
+{{- $caption := .caption -}}
+{{- $alt := default .caption .alt -}}
+
+{{- if $path -}}
+  {{- $isRemote := strings.HasPrefix $path "http" -}}
+  {{- $image := cond $isRemote (resources.GetRemote $path) (resources.Get $path) -}}
+
+  {{- if $image -}}
+    <figure class="image gallery">
+      <a
+        href="{{- $image.RelPermalink -}}"
+        data-pswp-width="{{- $image.Width -}}"
+        data-pswp-height="{{- $image.Height -}}"
+      >
+        <img
+          src="{{- $image.RelPermalink -}}"
+          width="{{- $image.Width -}}"
+          height="{{- $image.Height -}}"
+          {{ with $caption }}title="{{- . -}}"{{ end }}
+          {{ with $alt }}alt="{{- . -}}"{{ end }}
+        />
+      </a>
+      {{ with $caption }}
+        <figcaption>{{ . }}</figcaption>
+      {{ end }}
+    </figure>
+  {{- end -}}
+{{- end -}}

layouts/partials/posts/hero.html

@@ -0,0 +1,16 @@
+<section class="hero">
+  <h1>{{ .Title }}</h1>
+  <div class="meta">
+    <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
+    &middot;
+    <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
+  </div>
+  {{ with .Params.heroImage }}
+    {{ partial "image.html" (dict
+      "path" .path
+      "alt" .alt
+      "caption" .caption
+      )
+    }}
+  {{ end }}
+</section>

layouts/partials/posts/list.html

@@ -1,13 +1,15 @@
-<div class="list">
+<div class="posts-list">
   {{ range sort .Pages "Date" "desc" }}
     {{ if not .Params.private }}
-      <div class="post">
+      <a href="{{- .RelPermalink -}}" class="post">
-        <a href="{{- .RelPermalink -}}">
+        <h1 class="title">{{ .Title }}</h1>
-          <h1 class="title">{{ .Title }}</h1>
+        <div class="summary">{{ .Summary }}</div>
-          <div class="summary">{{ .Summary | plainify }}</div>
+        <div class="meta">
-        </a>
+          <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
-        {{ partial "components/meta/index.html" . }}
+          &middot;
-      </div>
+          <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
+        </div>
+      </a>
     {{ end }}
   {{ end }}
 </div>

package-lock.json

@@ -1,104 +0,0 @@
-{
-  "name": "caldwell",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "caldwell",
-      "version": "1.0.0",
-      "license": "GPL-3.0-or-later",
-      "dependencies": {
-        "masonry-layout": "^4.2.2",
-        "photoswipe": "^5.4.4"
-      },
-      "devDependencies": {
-        "@types/masonry-layout": "^4.2.8"
-      }
-    },
-    "node_modules/@types/jquery": {
-      "version": "3.5.32",
-      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.32.tgz",
-      "integrity": "sha512-b9Xbf4CkMqS02YH8zACqN1xzdxc3cO735Qe5AbSUFmyOiaWAbcpqh9Wna+Uk0vgACvoQHpWDg2rGdHkYPLmCiQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/sizzle": "*"
-      }
-    },
-    "node_modules/@types/masonry-layout": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/@types/masonry-layout/-/masonry-layout-4.2.8.tgz",
-      "integrity": "sha512-Et2to22C31FG1UFaHRBL6BznMOhrur3Ckr9gvR7fRVmPgxqiwCEKZtV8GpFscHyNAKhZ0QlkwXJRPnJvxZUKQw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/jquery": "*"
-      }
-    },
-    "node_modules/@types/sizzle": {
-      "version": "2.3.9",
-      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.9.tgz",
-      "integrity": "sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/desandro-matches-selector": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
-      "integrity": "sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==",
-      "license": "MIT"
-    },
-    "node_modules/ev-emitter": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
-      "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==",
-      "license": "MIT"
-    },
-    "node_modules/fizzy-ui-utils": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
-      "integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
-      "license": "MIT",
-      "dependencies": {
-        "desandro-matches-selector": "^2.0.0"
-      }
-    },
-    "node_modules/get-size": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz",
-      "integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==",
-      "license": "MIT"
-    },
-    "node_modules/masonry-layout": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/masonry-layout/-/masonry-layout-4.2.2.tgz",
-      "integrity": "sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==",
-      "license": "MIT",
-      "dependencies": {
-        "get-size": "^2.0.2",
-        "outlayer": "^2.1.0"
-      }
-    },
-    "node_modules/outlayer": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
-      "integrity": "sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==",
-      "license": "MIT",
-      "dependencies": {
-        "ev-emitter": "^1.0.0",
-        "fizzy-ui-utils": "^2.0.0",
-        "get-size": "^2.0.2"
-      }
-    },
-    "node_modules/photoswipe": {
-      "version": "5.4.4",
-      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.4.tgz",
-      "integrity": "sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.12.0"
-      }
-    }
-  }
-}

package.json

@@ -1,19 +0,0 @@
-{
-  "name": "caldwell",
-  "main": "main.js",
-  "dependencies": {
-    "masonry-layout": "^4.2.2",
-    "photoswipe": "^5.4.4"
-  },
-  "version": "1.0.0",
-  "description": "A minimal Hugo theme",
-  "repository": {
-    "type": "git",
-    "url": "https://git.karaolidis.com/karaolidis/caldwell.git"
-  },
-  "author": "Nikolaos Karaolidis <nick@karaolidis.com>",
-  "license": "GPL-3.0-or-later",
-  "devDependencies": {
-    "@types/masonry-layout": "^4.2.8"
-  }
-}