Fix layout bugs

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
Add image processing
2025-09-11 17:43:07 +00:00 · 2025-09-11 17:42:53 +00:00
33 changed files with 766 additions and 837 deletions
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -4,7 +4,6 @@ import Masonry from "masonry-layout";
 const lightbox = new PhotoSwipeLightbox({
  gallery: ".lightbox",
  children: ".pswp-image",
-  bgOpacity: 1,
  showAnimationDuration: 300,
  hideAnimationDuration: 300,
  initialZoomLevel: "fit",
--- a/assets/sass/blockquote.scss
+++ b/assets/sass/blockquote.scss
@@ -12,7 +12,7 @@ blockquote {
  }

  p {
-    margin: 0.5rem 0 0.5rem 0;
+    margin: 0 0 0.5rem 0;
  }

  p:last-child {
--- a/assets/sass/code.scss
+++ b/assets/sass/code.scss
@@ -1,4 +1,5 @@
-pre {
+/* PreWrapper */
+.chroma {
  color: var(--text);
  background-color: var(--background-50);
  padding: 1rem;
@@ -6,26 +7,20 @@ pre {
  overflow-x: auto;
 }

-/* PreWrapper */
-.chroma {
-  .line.prompt::before {
-    content: "$ ";
-  }
-
 /* Error */
-  .err {
-    color: var(--accent-600);
+.chroma .err {
+  color: var(--accent-500);
 }

 /* LineLink */
-  .lnlinks {
+.chroma .lnlinks {
  outline: none;
  text-decoration: none;
  color: inherit;
 }

 /* LineTableTD */
-  .lntd {
+.chroma .lntd {
  vertical-align: top;
  padding: 0;
  margin: 0;
@@ -33,7 +28,7 @@ pre {
 }

 /* LineTable */
-  .lntable {
+.chroma .lntable {
  border-spacing: 0;
  padding: 0;
  margin: 0;
@@ -41,12 +36,12 @@ pre {
 }

 /* LineHighlight */
-  .hl {
-    background-color: var(--background-100);
+.chroma .hl {
+  background-color: var(--background-200);
 }

 /* LineNumbersTable */
-  .lnt {
+.chroma .lnt {
  white-space: pre;
  -webkit-user-select: none;
  user-select: none;
@@ -55,7 +50,7 @@ pre {
 }

 /* LineNumbers */
-  .ln {
+.chroma .ln {
  white-space: pre;
  -webkit-user-select: none;
  user-select: none;
@@ -65,359 +60,358 @@ pre {
 }

 /* Line */
-  .line {
+.chroma .line {
  display: flex;
 }

 /* Keyword */
-  .k {
-    color: var(--secondary-700);
+.chroma .k {
+  color: var(--secondary-600);
 }

 /* KeywordConstant */
-  .kc {
-    color: var(--primary-600);
+.chroma .kc {
+  color: var(--primary-500);
 }

 /* KeywordDeclaration */
-  .kd {
-    color: var(--secondary-700);
+.chroma .kd {
+  color: var(--secondary-600);
 }

 /* KeywordNamespace */
-  .kn {
-    color: var(--secondary-700);
+.chroma .kn {
+  color: var(--secondary-600);
 }

 /* KeywordPseudo */
-  .kp {
-    color: var(--primary-600);
+.chroma .kp {
+  color: var(--primary-500);
 }

 /* KeywordReserved */
-  .kr {
-    color: var(--secondary-700);
+.chroma .kr {
+  color: var(--secondary-600);
 }

 /* KeywordType */
-  .kt {
-    color: var(--secondary-700);
+.chroma .kt {
+  color: var(--secondary-600);
 }

 /* Name */
-  .nc {
-    color: var(--accent-700);
+.chroma .nc {
+  color: var(--accent-600);
  font-weight: bold;
 }

 /* NameConstant */
-  .no {
-    color: var(--primary-600);
+.chroma .no {
+  color: var(--primary-500);
  font-weight: bold;
 }

 /* NameDecorator */
-  .nd {
-    color: var(--secondary-800);
+.chroma .nd {
+  color: var(--secondary-700);
  font-weight: bold;
 }

 /* NameEntity */
-  .ni {
-    color: var(--accent-700);
+.chroma .ni {
+  color: var(--accent-600);
 }

 /* NameException */
-  .ne {
-    color: var(--accent-700);
+.chroma .ne {
+  color: var(--accent-600);
  font-weight: bold;
 }

 /* NameLabel */
-  .nl {
-    color: var(--primary-600);
+.chroma .nl {
+  color: var(--primary-500);
  font-weight: bold;
 }

 /* NameNamespace */
-  .nn {
-    color: var(--secondary-700);
+.chroma .nn {
+  color: var(--secondary-600);
 }

 /* NameProperty */
-  .py {
-    color: var(--primary-600);
+.chroma .py {
+  color: var(--primary-500);
 }

 /* NameTag */
-  .nt {
-    color: var(--primary-700);
+.chroma .nt {
+  color: var(--primary-600);
 }

 /* NameVariable */
-  .nv {
-    color: var(--primary-600);
+.chroma .nv {
+  color: var(--primary-500);
 }

 /* NameVariableClass */
-  .vc {
-    color: var(--primary-600);
+.chroma .vc {
+  color: var(--primary-500);
 }

 /* NameVariableGlobal */
-  .vg {
-    color: var(--primary-600);
+.chroma .vg {
+  color: var(--primary-500);
 }

 /* NameVariableInstance */
-  .vi {
-    color: var(--primary-600);
+.chroma .vi {
+  color: var(--primary-500);
 }

 /* NameVariableMagic */
-  .vm {
-    color: var(--primary-600);
+.chroma .vm {
+  color: var(--primary-500);
 }

 /* NameFunction */
-  .nf {
-    color: var(--secondary-800);
+.chroma .nf {
+  color: var(--secondary-700);
  font-weight: bold;
 }

 /* NameFunctionMagic */
-  .fm {
-    color: var(--secondary-800);
+.chroma .fm {
+  color: var(--secondary-700);
  font-weight: bold;
 }

 /* Literal */
-  .l {
-    color: var(--primary-700);
+.chroma .l {
+  color: var(--primary-600);
 }

 /* LiteralDate */
-  .ld {
-    color: var(--primary-600);
+.chroma .ld {
+  color: var(--primary-500);
 }

 /* LiteralString */
-  .s {
-    color: var(--primary-700);
+.chroma .s {
+  color: var(--primary-600);
 }

 /* LiteralStringAffix */
-  .sa {
-    color: var(--primary-600);
+.chroma .sa {
+  color: var(--primary-500);
 }

 /* LiteralStringBacktick */
-  .sb {
-    color: var(--primary-700);
+.chroma .sb {
+  color: var(--primary-600);
 }

 /* LiteralStringChar */
-  .sc {
-    color: var(--primary-700);
+.chroma .sc {
+  color: var(--primary-600);
 }

 /* LiteralStringDelimiter */
-  .dl {
-    color: var(--primary-600);
+.chroma .dl {
+  color: var(--primary-500);
 }

 /* LiteralStringDoc */
-  .sd {
-    color: var(--primary-700);
+.chroma .sd {
+  color: var(--primary-600);
 }

 /* LiteralStringDouble */
-  .s2 {
-    color: var(--primary-700);
+.chroma .s2 {
+  color: var(--primary-600);
 }

 /* LiteralStringEscape */
-  .se {
-    color: var(--primary-600);
+.chroma .se {
+  color: var(--primary-500);
 }

 /* LiteralStringHeredoc */
-  .sh {
-    color: var(--primary-600);
+.chroma .sh {
+  color: var(--primary-500);
 }

 /* LiteralStringInterpol */
-  .si {
-    color: var(--primary-700);
-  }
-
-  /* LiteralStringOther */
-  .sx {
-    color: var(--primary-700);
-  }
-
-  /* LiteralStringRegex */
-  .sr {
+.chroma .si {
  color: var(--primary-600);
 }

+/* LiteralStringOther */
+.chroma .sx {
+  color: var(--primary-600);
+}
+
+/* LiteralStringRegex */
+.chroma .sr {
+  color: var(--primary-500);
+}
+
 /* LiteralStringSingle */
-  .s1 {
-    color: var(--primary-700);
+.chroma .s1 {
+  color: var(--primary-600);
 }

 /* LiteralStringSymbol */
-  .ss {
-    color: var(--primary-700);
+.chroma .ss {
+  color: var(--primary-600);
 }

 /* LiteralNumber */
-  .m {
-    color: var(--primary-700);
+.chroma .m {
+  color: var(--primary-600);
 }

 /* LiteralNumberBin */
-  .mb {
-    color: var(--primary-700);
+.chroma .mb {
+  color: var(--primary-600);
 }

 /* LiteralNumberFloat */
-  .mf {
-    color: var(--primary-700);
+.chroma .mf {
+  color: var(--primary-600);
 }

 /* LiteralNumberHex */
-  .mh {
-    color: var(--primary-700);
+.chroma .mh {
+  color: var(--primary-600);
 }

 /* LiteralNumberInteger */
-  .mi {
-    color: var(--primary-700);
+.chroma .mi {
+  color: var(--primary-600);
 }

 /* LiteralNumberIntegerLong */
-  .il {
-    color: var(--primary-700);
+.chroma .il {
+  color: var(--primary-600);
 }

 /* LiteralNumberOct */
-  .mo {
-    color: var(--primary-700);
+.chroma .mo {
+  color: var(--primary-600);
 }

 /* Operator */
-  .o {
-    color: var(--secondary-700);
+.chroma .o {
+  color: var(--secondary-600);
  font-weight: bold;
 }

 /* OperatorWord */
-  .ow {
-    color: var(--secondary-700);
+.chroma .ow {
+  color: var(--secondary-600);
  font-weight: bold;
 }

 /* Comment */
-  .c {
+.chroma .c {
  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
  font-style: italic;
 }

 /* CommentHashbang */
-  .ch {
+.chroma .ch {
  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
  font-style: italic;
 }

 /* CommentMultiline */
-  .cm {
+.chroma .cm {
  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
  font-style: italic;
 }

 /* CommentSingle */
-  .c1 {
+.chroma .c1 {
  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
  font-style: italic;
 }

 /* CommentSpecial */
-  .cs {
+.chroma .cs {
  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
  font-weight: bold;
  font-style: italic;
 }

 /* CommentPreproc */
-  .cp {
+.chroma .cp {
  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
  font-weight: bold;
  font-style: italic;
 }

 /* CommentPreprocFile */
-  .cpf {
+.chroma .cpf {
  color: color-mix(in srgb, var(--text) 50%, var(--background-50));
  font-weight: bold;
  font-style: italic;
 }

 /* GenericDeleted */
-  .gd {
+.chroma .gd {
  color: var(--accent-900);
  background-color: var(--accent-300);
 }

 /* GenericEmph */
-  .ge {
+.chroma .ge {
  font-style: italic;
 }

 /* GenericError */
-  .gr {
-    color: var(--accent-600);
+.chroma .gr {
+  color: var(--accent-500);
 }

 /* GenericHeading */
-  .gh {
-    color: var(--primary-600);
+.chroma .gh {
+  color: var(--primary-500);
  font-weight: bold;
 }

 /* GenericInserted */
-  .gi {
+.chroma .gi {
  color: var(--primary-800);
  background-color: var(--primary-200);
 }

 /* GenericOutput */
-  .go {
+.chroma .go {
  color: color-mix(in srgb, var(--text) 70%, var(--background-50));
 }

 /* GenericPrompt */
-  .gp {
+.chroma .gp {
  color: color-mix(in srgb, var(--text) 70%, var(--background-50));
 }

 /* GenericStrong */
-  .gs {
+.chroma .gs {
  font-weight: bold;
 }

 /* GenericSubheading */
-  .gu {
-    color: var(--primary-600);
+.chroma .gu {
+  color: var(--primary-500);
 }

 /* GenericTraceback */
-  .gt {
-    color: var(--secondary-700);
+.chroma .gt {
+  color: var(--secondary-600);
 }

 /* GenericUnderline */
-  .gl {
+.chroma .gl {
  text-decoration: underline;
 }
-}
--- a/assets/sass/colors.scss
+++ b/assets/sass/colors.scss
@@ -1,71 +1,143 @@
-// https://www.realtimecolors.com/
-
 :root {
-  --text: #0d1416;
-  --background: #fdfdfd;
-  --primary: #669ca3;
-  --secondary: #a5abc9;
-  --accent: #8d8cba;
+  --text: #050c0e;
+  --background: #f1f8fa;
+  --primary: #51a9c3;
+  --secondary: #d88fb9;
+  --accent: #ce7f71;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #f0f8fa;
+    --background: #050d0f;
+    --primary: #3c94af;
+    --secondary: #712853;
+    --accent: #8d3e30;
+  }
 }

 :root {
-  --text-50: #eff4f6;
-  --text-100: #dfe9ec;
-  --text-200: #bfd4d9;
-  --text-300: #9fbec6;
-  --text-400: #7ea8b4;
-  --text-500: #5e92a1;
-  --text-600: #4b7581;
-  --text-700: #395860;
-  --text-800: #263b40;
-  --text-900: #131d20;
-  --text-950: #090f10;
+  --text-50: #ecf6f8;
+  --text-100: #daecf1;
+  --text-200: #b4dae4;
+  --text-300: #8fc7d6;
+  --text-400: #69b4c9;
+  --text-500: #44a1bb;
+  --text-600: #368196;
+  --text-700: #296170;
+  --text-800: #1b414b;
+  --text-900: #0e2025;
+  --text-950: #071013;

-  --background-50: #f0f5f5;
-  --background-100: #e0ebeb;
-  --background-200: #c2d6d6;
-  --background-300: #a3c2c2;
-  --background-400: #85adad;
-  --background-500: #669999;
-  --background-600: #527a7a;
-  --background-700: #3d5c5c;
-  --background-800: #293d3d;
-  --background-900: #141f1f;
-  --background-950: #0a0f0f;
+  --background-50: #ecf6f8;
+  --background-100: #daecf1;
+  --background-200: #b4dae4;
+  --background-300: #8fc7d6;
+  --background-400: #69b4c9;
+  --background-500: #44a1bb;
+  --background-600: #368196;
+  --background-700: #296170;
+  --background-800: #1b414b;
+  --background-900: #0e2025;
+  --background-950: #071013;

-  --primary-50: #eff5f5;
-  --primary-100: #dfeaec;
-  --primary-200: #bfd6d9;
-  --primary-300: #9fc1c6;
-  --primary-400: #80adb3;
-  --primary-500: #60989f;
-  --primary-600: #4d7a80;
-  --primary-700: #395b60;
-  --primary-800: #263d40;
-  --primary-900: #131e20;
-  --primary-950: #0a0f10;
+  --primary-50: #ecf6f8;
+  --primary-100: #d9ecf2;
+  --primary-200: #b3d9e5;
+  --primary-300: #8dc6d8;
+  --primary-400: #67b4cb;
+  --primary-500: #41a1be;
+  --primary-600: #348198;
+  --primary-700: #276072;
+  --primary-800: #1a404c;
+  --primary-900: #0d2026;
+  --primary-950: #071013;

-  --secondary-50: #eff0f5;
-  --secondary-100: #dfe1ec;
-  --secondary-200: #bfc4d9;
-  --secondary-300: #9fa6c6;
-  --secondary-400: #8088b3;
-  --secondary-500: #606a9f;
-  --secondary-600: #4d5580;
-  --secondary-700: #394060;
-  --secondary-800: #262b40;
-  --secondary-900: #131520;
-  --secondary-950: #0a0b10;
+  --secondary-50: #f8ecf3;
+  --secondary-100: #f2d9e8;
+  --secondary-200: #e4b4d0;
+  --secondary-300: #d78eb9;
+  --secondary-400: #ca68a1;
+  --secondary-500: #bd428a;
+  --secondary-600: #97356e;
+  --secondary-700: #712853;
+  --secondary-800: #4b1b37;
+  --secondary-900: #260d1c;
+  --secondary-950: #13070e;

-  --accent-50: #efeff5;
-  --accent-100: #dfdfec;
-  --accent-200: #c0bfd9;
-  --accent-300: #a09fc6;
-  --accent-400: #8080b3;
-  --accent-500: #61609f;
-  --accent-600: #4d4d80;
-  --accent-700: #3a3960;
-  --accent-800: #272640;
-  --accent-900: #131320;
-  --accent-950: #0a0a10;
+  --accent-50: #f8eeec;
+  --accent-100: #f2ddd9;
+  --accent-200: #e5bbb3;
+  --accent-300: #d8988d;
+  --accent-400: #cb7667;
+  --accent-500: #be5441;
+  --accent-600: #984334;
+  --accent-700: #723227;
+  --accent-800: #4c221a;
+  --accent-900: #26110d;
+  --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;
+  }
 }
--- a/assets/sass/common.scss
+++ b/assets/sass/common.scss
@@ -59,38 +59,6 @@ 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);
-  }
+li:not(:last-child) {
+  margin-bottom: 0.5rem;
 }
--- a/assets/sass/details.scss
+++ b/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;
-    }
-  }
-}
--- a/assets/sass/footer.scss
+++ b/assets/sass/footer.scss
@@ -13,7 +13,7 @@

    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 {
      color: inherit;
@@ -36,7 +36,6 @@
        list-style: none;

        li {
-          margin: 0;
          font-size: 0.85rem;
        }
      }
--- a/assets/sass/hero.scss
+++ b/assets/sass/hero.scss
@@ -7,6 +7,22 @@
    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));
+    }
+  }
+
+  .captioned-image {
+    padding-top: 1.5rem;
+  }
 }

 .hero + .content {
@@ -15,6 +31,6 @@

@media (max-width: $width-mobile) {
  .hero {
-    padding: 1rem 1rem 0 1rem;
+    padding: 1rem;
  }
 }
--- a/assets/sass/image.scss
+++ b/assets/sass/image.scss
@@ -10,7 +10,7 @@ img {

  figcaption {
    text-align: center;
-    padding-top: 1rem;
-    color: color-mix(in srgb, var(--text) 70%, var(--background));
+    padding-top: 0.5rem;
+    color: color-mix(in srgb, var(--text) 50%, var(--background));
  }
 }
--- a/assets/sass/list.scss
+++ b/assets/sass/list.scss
@@ -1,17 +1,64 @@
+main.with-meta {
+  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;
+
+    > .meta {
+      max-width: $width-content;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    > .content {
+      padding: 2rem;
+    }
+  }
+}
+
+@media (max-width: $width-mobile) {
+  main.with-meta {
+    > .meta {
+      padding: 1rem;
+    }
+
+    > .content {
+      padding: 0 1rem 1rem 1rem;
+    }
+  }
+}
+
 .list {
  .post {
    display: block;
-
-    > a {
    color: inherit;
-    }
-
-    > a:hover {
-      color: var(--text-800);
-    }

    &:not(:first-child) {
-      margin: 4rem 0 4rem 0;
+      margin-top: 4rem;
    }

    .title {
@@ -20,20 +67,38 @@
    }

    .summary {
-      margin: 0.5rem 0 0.5rem 0;
+      margin-top: 0.5rem;
+    }
+
+    .meta {
+      margin-top: 1rem;
+      font-size: 0.8rem;
+
+      .date {
+        color: var(--text-600);
+      }
+
+      .duration {
+        color: color-mix(in srgb, var(--text) 50%, var(--background));
+      }
    }

    .heading-anchor {
      display: none;
    }
  }
+
+  .post:hover .title,
+  .post:hover .summary {
+    color: var(--text-800);
+  }
 }

@media (max-width: $width-mobile) {
  .list {
    .post {
      &:not(:first-child) {
-        margin: 2rem 0 2rem 0;
+        margin-top: 2rem;
      }

      .title {
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -11,9 +11,7 @@ $width-wide: 75rem;
@import "blockquote";
@import "code";
@import "table";
-@import "meta";

-@import "details";
@import "list";
@import "gallery";

--- a/assets/sass/meta.scss
+++ b/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));
-  }
-}
--- a/assets/sass/photoswipe.scss
+++ b/assets/sass/photoswipe.scss
@@ -18,13 +18,13 @@
  position: fixed;
  bottom: 0;
  width: 100%;
-  height: auto;
+  height: 5rem;
  padding: 1rem 2rem;
  text-align: center;
  line-height: 1.5rem;

  .meta {
-    margin: 0;
+    font-size: 0.7rem;
  }

  a {
--- a/layouts/_default/_markup/render-codeblock-bash.html
+++ b/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 }}
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,3 +1,7 @@
-{{ $data := partial "components/image/process.html" (dict "page" .Page "src" .Destination) }}
-{{ partial "components/image/index.html" (merge $data (dict "caption" .Text "title" .Title)) }}
+{{ partial "components/image/index.html" (dict "page" .Page "image" (dict
+  "src" .Destination
+  "caption" .Text
+  "alt" .Title
+  ))
+}}
 {{- /* chomp trailing newline */ -}}
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,8 +1,8 @@
 {{ define "main" }}
-  {{ $details := default true .Params.details }}
-  <main class="{{- if $details -}}with-details{{- end -}}">
-    {{ if $details }}
-      {{ partial "components/list/details.html" . }}
+  {{ $withMeta := default true .Params.withMeta }}
+  <main class="{{- if $withMeta -}}with-meta{{- end -}}">
+    {{ if $withMeta }}
+      {{ partial "components/list/meta.html" . }}
    {{ end }}
    <div class="content">
      {{ partial "posts/list.html" . }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -3,10 +3,6 @@
    {{ partial "components/hero/index.html" . }}
    <div class="content">
      {{ .Content }}
-
-      {{ if (default true .Params.comments) }}
-        {{ partial "comments.html" . }}
-      {{ end }}
    </div>
    {{ partial "components/postnav/index.html" . }}
  </main>
--- a/layouts/_shortcodes/contents.html
+++ b/layouts/_shortcodes/contents.html
@@ -1,5 +0,0 @@
-<details class="toc">
-  <summary>Post Contents</summary>
-  {{ .Page.TableOfContents }}
-</details>
-{{- /* chomp trailing newline */ -}}
--- a/layouts/_shortcodes/exif-image.html
+++ b/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 */ -}}
--- a/layouts/_shortcodes/sub.html
+++ b/layouts/_shortcodes/sub.html
@@ -1 +1,2 @@
-<sub>{{ .Get 0 | markdownify }}</sub> {{- /* chomp trailing newline */ -}}
+<sub>{{ .Get 0 | markdownify }}</sub>
+{{- /* chomp trailing newline */ -}}
--- a/layouts/_shortcodes/sup.html
+++ b/layouts/_shortcodes/sup.html
@@ -1 +1,2 @@
-<sup>{{ .Get 0 | markdownify }}</sup> {{- /* chomp trailing newline */ -}}
+<sup>{{ .Get 0 | markdownify }}</sup>
+{{- /* chomp trailing newline */ -}}
--- a/layouts/gallery/list.html
+++ b/layouts/gallery/list.html
@@ -1,16 +1,10 @@
 {{ define "main" }}
-  {{ $details := default true .Params.details }}
-  <main class="{{- if $details -}}with-details{{- end -}}">
-    {{ if $details }}
-      {{ partial "components/list/details.html" . }}
+  {{ $withMeta := default true .Params.withMeta }}
+  <main class="{{- if $withMeta -}}with-meta{{- end -}}">
+    {{ if $withMeta }}
+      {{ partial "components/list/meta.html" . }}
    {{ end }}
-    <div
-      class="{{- if $details -}}
-        content
-      {{- else -}}
-        content wide
-      {{- end -}}"
-    >
+    <div class="{{- if $withMeta -}}content{{- else -}}content wide{{- end -}}">
      {{ partial "gallery/list.html" . }}
    </div>
  </main>
--- a/layouts/partials/comments.html
+++ b/layouts/partials/comments.html
--- a/layouts/partials/components/hero/index.html
+++ b/layouts/partials/components/hero/index.html
@@ -1,17 +1,9 @@
 <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 }}
+  <div class="meta">
+    <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
+    &middot;
+    <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
+  </div>
+  {{ partial "components/image/index.html" (dict "page" .Page "image" .Params.hero) }}
 </section>
--- a/layouts/partials/components/hero/process.html
+++ b/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 -}}
--- a/layouts/partials/components/image/exif.html
+++ b/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 }}
--- a/layouts/partials/components/image/index.html
+++ b/layouts/partials/components/image/index.html
@@ -1,20 +1,51 @@
-{{- $caption := .caption | default "" -}}
-{{- $title := .title | default $caption | plainify -}}
-{{- $alt := .alt | default $title | plainify -}}
+{{- $page := .page -}}
+{{- $image := .image -}}

+{{- $src := $image -}}
+{{- $caption := "" -}}
+{{- $title := "" -}}
+{{- $alt := "" -}}
+
+{{- if reflect.IsMap $image -}}
+  {{- $src = $image.src | default "" -}}
+  {{- $caption = $image.caption | default "" -}}
+  {{- $title = $image.title | default $caption | default "" -}}
+  {{- $alt = $image.alt | default $title | default "" -}}
+{{- end -}}
+
+{{- if $src -}}
+  {{- $isRemote := strings.HasPrefix $src "http" -}}
+
+  {{- if $isRemote -}}
+    {{- $remote := resources.GetRemote $src -}}
+    {{- $image = resources.Copy (printf "static/3rd-party/%s" $remote.Name) $remote -}}
+  {{- else -}}
+    {{- $image = ($page.Resources.Get $src) | default (resources.Get $src) -}}
+  {{- end -}}
+{{- end -}}
+
+{{- with $image -}}
+  {{ $full := . | images.Filter (images.Process "webp q90") }}
+
+  {{ $thumb := . }}
+  {{- if gt .Width 2000 -}}
+    {{- $thumb = . | images.Filter (images.Process "resize 2000x webp q75") -}}
+  {{- else -}}
+    {{- $thumb = . | images.Filter (images.Process "webp q75") -}}
+  {{- end -}}

  <figure class="captioned-image lightbox">
    <a
-    href="{{- .full.RelPermalink -}}"
-    data-pswp-src="{{- .full.RelPermalink -}}"
-    data-pswp-width="{{- .full.Width -}}"
-    data-pswp-height="{{- .full.Height -}}"
+      href="{{- .RelPermalink -}}"
+      data-pswp-src="{{- .RelPermalink -}}"
+      data-pswp-width="{{- .Width -}}"
+      data-pswp-height="{{- .Height -}}"
      class="pswp-image"
    >
      <img
-      src="{{- .thumb.RelPermalink -}}"
-      width="{{- .thumb.Width -}}"
-      height="{{- .thumb.Height -}}"
+        src="{{- $thumb.RelPermalink -}}"
+        width="{{- .Width -}}"
+        height="{{- .Height -}}"
        loading="lazy"
        {{ with $title }}title="{{- . -}}"{{ end }}
        {{ with $alt }}alt="{{- . -}}"{{ end }}
@@ -24,3 +55,4 @@
      <figcaption>{{ . | safeHTML }}</figcaption>
    {{ end }}
  </figure>
+{{- end -}}
--- a/layouts/partials/components/image/process.html
+++ b/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 -}}
--- a/layouts/partials/components/list/details.html
+++ b/layouts/partials/components/list/details.html
@@ -1,5 +1,5 @@
-<section class="details">
-  <h1 class="title">{{ .Page.Title }}</h1>
+<section class="meta">
+  <h1>{{ .Page.Title }}</h1>
  <p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
  {{ .Content }}
 </section>
--- a/layouts/partials/components/meta/index.html
+++ b/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>
--- a/layouts/partials/components/postnav/index.html
+++ b/layouts/partials/components/postnav/index.html
@@ -1,9 +1,7 @@
 {{ $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>
@@ -11,10 +9,8 @@
      </div>
    </a>
  {{ end }}
-  {{ end }}

  {{ with $pages.Next . }}
-    {{ if eq .Kind "page" }}
    <a href="{{ .RelPermalink }}">
      <div class="next">
        <p class="caption">Next Post</p>
@@ -22,5 +18,4 @@
      </div>
    </a>
  {{ end }}
-  {{ end }}
 </div>
--- a/layouts/partials/gallery/list.html
+++ b/layouts/partials/gallery/list.html
@@ -2,36 +2,34 @@
  <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 -}}
-
-
+      {{ $page := . }}
+      {{ $imageData := partial "components/image/reflect.html" .Params.hero }}
+      {{ with $imageData.image }}
        <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 -}}"
+            href="{{- $page.RelPermalink -}}"
+            data-pswp-src="{{- .RelPermalink -}}"
+            data-pswp-width="{{- .Width -}}"
+            data-pswp-height="{{- .Height -}}"
            class="pswp-image"
          >
            <img
-              src="{{- $data.thumb.RelPermalink -}}"
-              width="{{- $data.thumb.Width -}}"
-              height="{{- $data.thumb.Height -}}"
+              src="{{- .RelPermalink -}}"
+              width="{{- .Width -}}"
+              height="{{- .Height -}}"
              loading="lazy"
-              {{ with $title }}title="{{- . -}}"{{ end }}
-              {{ with $alt }}alt="{{- . -}}"{{ end }}
+              {{ with $imageData.title }}title="{{- . -}}"{{ end }}
+              {{ with $imageData.alt }}alt="{{- . -}}"{{ end }}
            />
          </a>
          <div class="pswp-caption-content">
            <div>
-              <a href="{{- .RelPermalink -}}">{{ $caption }}</a>
-              {{ partial "components/meta/index.html" . }}
+              {{ upper $page.Title }}
+              <div class="meta">
+                {{ $page.Date | time.Format ":date_medium" }}
+                &middot;
+                <a href="{{- $page.RelPermalink -}}">View Post</a>
+              </div>
            </div>
          </div>
        </div>
--- a/layouts/partials/posts/list.html
+++ b/layouts/partials/posts/list.html
@@ -1,13 +1,15 @@
 <div class="list">
  {{ range sort .Pages "Date" "desc" }}
    {{ if not .Params.private }}
-      <div class="post">
-        <a href="{{- .RelPermalink -}}">
+      <a href="{{- .RelPermalink -}}" class="post">
        <h1 class="title">{{ .Title }}</h1>
        <div class="summary">{{ .Summary | plainify }}</div>
+        <div class="meta">
+          <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
+          &middot;
+          <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
+        </div>
      </a>
-        {{ partial "components/meta/index.html" . }}
-      </div>
    {{ end }}
  {{ end }}
 </div>
Author	SHA1	Message	Date
Nikolaos Karaolidis	4e2c24ad59	Fix layout bugs Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>	2025-09-11 17:43:07 +00:00
Nikolaos Karaolidis	903227b07c	Add image processing Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>	2025-09-11 17:42:53 +00:00