From 93cee5f1d37a685d1133d737cc9057bfdf3ee31c Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Fri, 26 Jun 2026 17:19:32 +0200
Subject: build: recompile CSS for slackware section

---
 assets/css/main.min.css | 120 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 120 insertions(+)

(limited to 'assets')

diff --git a/assets/css/main.min.css b/assets/css/main.min.css
index 2d09220..0278dc9 100644
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
@@ -1648,6 +1648,21 @@ button,
 
 /* Legacy type-* classes for compatibility (with badge styling) */
 
+.type-tech {
+  color: var(--type-tech);
+  background-color: rgba(168, 85, 247, 0.1);
+}
+
+.type-life {
+  color: var(--type-life);
+  background-color: rgba(245, 158, 11, 0.1);
+}
+
+.type-quote {
+  color: var(--type-quote);
+  background-color: rgba(0, 255, 136, 0.1);
+}
+
 /* Card component */
 
 .card {
@@ -2328,6 +2343,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   left: 0px;
 }
 
+.left-1\/2 {
+  left: 50%;
+}
+
 .left-3 {
   left: 0.75rem;
 }
@@ -2360,6 +2379,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   top: 1rem;
 }
 
+.top-full {
+  top: 100%;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -2409,6 +2432,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   margin-bottom: 0.25rem;
 }
 
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
 .mb-12 {
   margin-bottom: 3rem;
 }
@@ -2535,6 +2562,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   height: 0.25rem;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
 .h-3 {
   height: 0.75rem;
 }
@@ -2563,6 +2594,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   height: auto;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -2575,6 +2610,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   max-height: 24rem;
 }
 
+.min-h-\[10rem\] {
+  min-height: 10rem;
+}
+
 .min-h-\[calc\(100vh-200px\)\] {
   min-height: calc(100vh - 200px);
 }
@@ -2591,6 +2630,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   width: 5rem;
 }
 
+.w-24 {
+  width: 6rem;
+}
+
 .w-3 {
   width: 0.75rem;
 }
@@ -2623,6 +2666,11 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   min-width: 0px;
 }
 
+.min-w-max {
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -2667,6 +2715,11 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   flex-shrink: 0;
 }
 
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-x-0 {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2705,6 +2758,12 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   cursor: pointer;
 }
 
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
 .resize-none {
   resize: none;
 }
@@ -2725,10 +2784,18 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   flex-wrap: wrap;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
 
+.items-stretch {
+  align-items: stretch;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -2757,6 +2824,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   gap: 1rem;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .gap-8 {
   gap: 2rem;
 }
@@ -2934,6 +3005,11 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   background-color: var(--surface);
 }
 
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -3037,6 +3113,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   padding-left: 0.75rem;
 }
 
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -3049,6 +3129,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   padding-top: 0.5rem;
 }
 
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
 .pt-6 {
   padding-top: 1.5rem;
 }
@@ -3102,6 +3186,11 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   line-height: 1;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -3230,6 +3319,12 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   opacity: 0.75;
 }
 
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -5037,6 +5132,11 @@ html.theme-light .hero-name {
   line-height: 2.25rem;
 }
 
+.hover\:-translate-y-1:hover {
+  --tw-translate-y: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:bg-surface:hover {
   background-color: var(--surface);
 }
@@ -5158,6 +5258,14 @@ html.theme-light .hero-name {
   opacity: 0.5;
 }
 
+.group:focus-within .group-focus-within\:flex {
+  display: flex;
+}
+
+.group:hover .group-hover\:flex {
+  display: flex;
+}
+
 .group:hover .group-hover\:scale-105 {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
@@ -5207,6 +5315,10 @@ html.theme-light .hero-name {
     height: 12rem;
   }
 
+  .md\:w-1\/3 {
+    width: 33.333333%;
+  }
+
   .md\:w-48 {
     width: 12rem;
   }
@@ -5219,6 +5331,14 @@ html.theme-light .hero-name {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+
   .md\:gap-6 {
     gap: 1.5rem;
   }
-- 
cgit v1.2.3


From 383c4f7a7c64450dcb993ec1db3a63b87b93836d Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Fri, 26 Jun 2026 17:31:46 +0200
Subject: fix: submenu as expanding second row inside header glass

Replace floating dropdown box with a full-width centered second row that
expands the existing frosted header panel on hover/focus. Project pages in
the submenu fall back to page title when no menu name is set. Same label
fallback applied to mobile overlay children.
---
 assets/css/main.min.css              | 44 ++++----------------
 layouts/partials/hamburger-menu.html | 12 +++++-
 layouts/partials/header.html         | 81 ++++++++++++++++++++++--------------
 3 files changed, 68 insertions(+), 69 deletions(-)

(limited to 'assets')

diff --git a/assets/css/main.min.css b/assets/css/main.min.css
index 0278dc9..44735f9 100644
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
@@ -2343,10 +2343,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   left: 0px;
 }
 
-.left-1\/2 {
-  left: 50%;
-}
-
 .left-3 {
   left: 0.75rem;
 }
@@ -2379,10 +2375,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   top: 1rem;
 }
 
-.top-full {
-  top: 100%;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -2666,11 +2658,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   min-width: 0px;
 }
 
-.min-w-max {
-  min-width: -moz-max-content;
-  min-width: max-content;
-}
-
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -2715,11 +2702,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   flex-shrink: 0;
 }
 
-.-translate-x-1\/2 {
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .translate-x-0 {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3129,10 +3111,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   padding-top: 0.5rem;
 }
 
-.pt-3 {
-  padding-top: 0.75rem;
-}
-
 .pt-6 {
   padding-top: 1.5rem;
 }
@@ -3319,12 +3297,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   opacity: 0.75;
 }
 
-.shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -5258,14 +5230,6 @@ html.theme-light .hero-name {
   opacity: 0.5;
 }
 
-.group:focus-within .group-focus-within\:flex {
-  display: flex;
-}
-
-.group:hover .group-hover\:flex {
-  display: flex;
-}
-
 .group:hover .group-hover\:scale-105 {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
@@ -5362,6 +5326,14 @@ html.theme-light .hero-name {
     font-size: 6rem;
     line-height: 1;
   }
+
+  .group\/header:focus-within .md\:group-focus-within\/header\:flex {
+    display: flex;
+  }
+
+  .group\/header:hover .md\:group-hover\/header\:flex {
+    display: flex;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/layouts/partials/hamburger-menu.html b/layouts/partials/hamburger-menu.html
index 248b172..0280ecb 100644
--- a/layouts/partials/hamburger-menu.html
+++ b/layouts/partials/hamburger-menu.html
@@ -46,13 +46,23 @@
           <div class="pl-4 border-l-2 border-accent/40 ml-2">
             {{ range .Children }}
               {{ $childExternal := .Params.external }}
+              {{ $label := "" }}
+              {{ if $childExternal }}
+                {{ $label = .Name }}
+              {{ else if and .Name (i18n .Name) }}
+                {{ $label = i18n .Name }}
+              {{ else if .Page }}
+                {{ $label = .Page.LinkTitle }}
+              {{ else }}
+                {{ $label = .Name }}
+              {{ end }}
               <a
                 href="{{ .URL }}"
                 @click="menuOpen = false"
                 class="block py-3 text-base text-text-dim hover:text-accent transition-colors rounded focus:outline-none focus:ring-2 focus:ring-accent"
                 {{ if $childExternal }}target="_blank" rel="noopener noreferrer"{{ end }}
               >
-                {{ if $childExternal }}{{ .Name }}{{ else }}{{ i18n .Name }}{{ end }}
+                {{ $label }}
               </a>
             {{ end }}
           </div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 8ee657c..4ef817e 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,4 +1,4 @@
-<header class="fixed top-0 left-0 right-0 z-50 frosted-bar border-b">
+<header class="fixed top-0 left-0 right-0 z-50 frosted-bar border-b group/header">
   <nav class="container mx-auto px-4 py-4 flex items-center justify-between">
     <!-- Logo and Site Name -->
     {{ $homeLink := "/" }}
@@ -18,37 +18,18 @@
         {{ $isActive := eq $menuPath $currentPath }}
         {{ $isExternal := .Params.external }}
         {{ if .HasChildren }}
-          {{/* CSS-only hover/focus popup. No ARIA menu roles: we do not
-               implement arrow-key menu semantics, so claiming role="menu"
-               would lie to AT. focus-within gives keyboard reveal; the
-               parent stays a plain navigable link. */}}
-          <div class="relative group">
-            <a
-              href="{{ .URL }}"
-              class="text-sm transition-colors inline-flex items-center gap-1 rounded focus:outline-none focus:ring-2 focus:ring-accent {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}"
-              {{ if $isActive }}aria-current="page"{{ end }}
-            >
-              {{ i18n .Name }}
-              <i data-feather="chevron-down" class="w-3 h-3" aria-hidden="true"></i>
-            </a>
-            <!-- Submenu: padding-top bridges the hover gap -->
-            <div class="absolute left-1/2 -translate-x-1/2 top-full pt-3 hidden group-hover:flex group-focus-within:flex">
-              <ul class="frosted-bar border border-border rounded-lg px-4 py-3 flex flex-col gap-2 min-w-max shadow-lg">
-                {{ range .Children }}
-                  {{ $childExternal := .Params.external }}
-                  <li>
-                    <a
-                      href="{{ .URL }}"
-                      class="block text-sm whitespace-nowrap hover:text-accent transition-colors rounded focus:outline-none focus:ring-2 focus:ring-accent"
-                      {{ if $childExternal }}target="_blank" rel="noopener noreferrer"{{ end }}
-                    >
-                      {{ if $childExternal }}{{ .Name }}{{ else }}{{ i18n .Name }}{{ end }}
-                    </a>
-                  </li>
-                {{ end }}
-              </ul>
-            </div>
-          </div>
+          {{/* Parent link only here; its children render as a full-width
+               second row below the bar (see the submenu band after </nav>).
+               No ARIA menu roles: CSS-only hover/focus, not an arrow-key menu;
+               group-focus-within on the header gives keyboard reveal. */}}
+          <a
+            href="{{ .URL }}"
+            class="text-sm transition-colors inline-flex items-center gap-1 rounded focus:outline-none focus:ring-2 focus:ring-accent {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}"
+            {{ if $isActive }}aria-current="page"{{ end }}
+          >
+            {{ i18n .Name }}
+            <i data-feather="chevron-down" class="w-3 h-3" aria-hidden="true"></i>
+          </a>
         {{ else }}
           <a
             href="{{ .URL }}"
@@ -125,6 +106,42 @@
     </div>
   </nav>
 
+  <!-- Desktop submenu: second row inside the same frosted glass, revealed on
+       hover/focus of the bar (no separate background — header expands) -->
+  {{ range .Site.Menus.main }}
+    {{ if .HasChildren }}
+      <div class="hidden md:group-hover/header:flex md:group-focus-within/header:flex">
+        <ul class="container mx-auto px-4 py-3 flex items-center justify-center gap-8">
+          {{ range .Children }}
+            {{ $childExternal := .Params.external }}
+            {{/* Curated entries (Packages) carry an i18n key as .Name; project
+                 pages added via front-matter have no name, so fall back to the
+                 page title. */}}
+            {{ $label := "" }}
+            {{ if $childExternal }}
+              {{ $label = .Name }}
+            {{ else if and .Name (i18n .Name) }}
+              {{ $label = i18n .Name }}
+            {{ else if .Page }}
+              {{ $label = .Page.LinkTitle }}
+            {{ else }}
+              {{ $label = .Name }}
+            {{ end }}
+            <li>
+              <a
+                href="{{ .URL }}"
+                class="text-sm whitespace-nowrap text-text-dim hover:text-accent transition-colors rounded focus:outline-none focus:ring-2 focus:ring-accent"
+                {{ if $childExternal }}target="_blank" rel="noopener noreferrer"{{ end }}
+              >
+                {{ $label }}
+              </a>
+            </li>
+          {{ end }}
+        </ul>
+      </div>
+    {{ end }}
+  {{ end }}
+
   <!-- Mobile hamburger overlay menu -->
   {{ partial "hamburger-menu.html" . }}
 </header>
-- 
cgit v1.2.3


From 9244ad0666c4859569801508348fa83c6e4648f4 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Fri, 26 Jun 2026 17:57:30 +0200
Subject: fix: row thumbnail cell is 3:2 landscape, holds its own aspect ratio

Was stretching to body height via items-stretch; give the image cell
aspect-[3/2] and self-start so a 3:2 thumbnail displays at its intended
ratio instead of being cropped to the row height.
---
 assets/css/main.min.css           | 43 +++++++++++++++++++--------------------
 layouts/partials/project-row.html |  2 +-
 2 files changed, 22 insertions(+), 23 deletions(-)

(limited to 'assets')

diff --git a/assets/css/main.min.css b/assets/css/main.min.css
index 44735f9..048b8e7 100644
--- a/assets/css/main.min.css
+++ b/assets/css/main.min.css
@@ -1648,11 +1648,6 @@ button,
 
 /* Legacy type-* classes for compatibility (with badge styling) */
 
-.type-tech {
-  color: var(--type-tech);
-  background-color: rgba(168, 85, 247, 0.1);
-}
-
 .type-life {
   color: var(--type-life);
   background-color: rgba(245, 158, 11, 0.1);
@@ -1663,6 +1658,11 @@ button,
   background-color: rgba(0, 255, 136, 0.1);
 }
 
+.type-link {
+  color: var(--type-link);
+  background-color: rgba(56, 189, 248, 0.1);
+}
+
 /* Card component */
 
 .card {
@@ -2460,6 +2460,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   margin-left: 0.5rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .mt-0\.5 {
   margin-top: 0.125rem;
 }
@@ -2546,6 +2550,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   display: none;
 }
 
+.aspect-\[3\/2\] {
+  aspect-ratio: 3/2;
+}
+
 .aspect-video {
   aspect-ratio: 16 / 9;
 }
@@ -2554,10 +2562,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   height: 0.25rem;
 }
 
-.h-24 {
-  height: 6rem;
-}
-
 .h-3 {
   height: 0.75rem;
 }
@@ -2602,10 +2606,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   max-height: 24rem;
 }
 
-.min-h-\[10rem\] {
-  min-height: 10rem;
-}
-
 .min-h-\[calc\(100vh-200px\)\] {
   min-height: calc(100vh - 200px);
 }
@@ -2622,10 +2622,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   width: 5rem;
 }
 
-.w-24 {
-  width: 6rem;
-}
-
 .w-3 {
   width: 0.75rem;
 }
@@ -2856,6 +2852,10 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
+.self-start {
+  align-self: flex-start;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -2987,11 +2987,6 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   background-color: var(--surface);
 }
 
-.object-contain {
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -5279,6 +5274,10 @@ html.theme-light .hero-name {
     height: 12rem;
   }
 
+  .md\:h-64 {
+    height: 16rem;
+  }
+
   .md\:w-1\/3 {
     width: 33.333333%;
   }
diff --git a/layouts/partials/project-row.html b/layouts/partials/project-row.html
index 5a65f35..7a1e209 100644
--- a/layouts/partials/project-row.html
+++ b/layouts/partials/project-row.html
@@ -24,7 +24,7 @@
 
 <article class="group flex flex-col md:flex-row {{ if $reverse }}md:flex-row-reverse{{ end }} gap-6 items-stretch border-l-4 border-accent bg-surface/30 rounded-lg overflow-hidden transition-all duration-200 hover:-translate-y-1 hover:shadow-lg hover:bg-surface/50">
   <!-- Visual (decorative duplicate of the title link; hidden from AT) -->
-  <a href="{{ $p.RelPermalink }}" tabindex="-1" aria-hidden="true" class="md:w-1/3 flex-shrink-0 flex items-center justify-center bg-bg/40 min-h-[10rem]">
+  <a href="{{ $p.RelPermalink }}" tabindex="-1" aria-hidden="true" class="md:w-1/3 flex-shrink-0 self-start flex items-center justify-center bg-bg/40 aspect-[3/2] overflow-hidden">
     {{ if $imageURL }}
       <img src="{{ $imageURL }}" alt="" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200" loading="lazy" />
     {{ else }}
-- 
cgit v1.2.3