From e3d5a46e11ffd4321a262a092c8335d05c38c6ae Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sat, 7 Mar 2026 15:59:42 +0100
Subject: [PATCH] fix(depth): add shadow-lg to avatars/album art, font-mono to
 stat numbers

System: avatars/album art get shadow-lg for presence.
Stat numbers get font-mono like dates/timestamps.

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
---
 _includes/components/widgets/author-card-compact.njk | 4 ++--
 _includes/components/widgets/funkwhale.njk           | 6 +++---
 _includes/components/widgets/recent-comments.njk     | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/_includes/components/widgets/author-card-compact.njk b/_includes/components/widgets/author-card-compact.njk
index b139b66..af6457d 100644
--- a/_includes/components/widgets/author-card-compact.njk
+++ b/_includes/components/widgets/author-card-compact.njk
@@ -8,12 +8,12 @@
       <img
         src="{{ site.author.avatar }}"
         alt="{{ site.author.name }}"
-        class="w-12 h-12 rounded-full object-cover"
+        class="w-12 h-12 rounded-full object-cover shadow-lg"
         loading="lazy"
       >
     </a>
     <div>
-      <a href="{{ site.author.url }}" class="u-url p-name font-medium text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
+      <a href="{{ site.author.url }}" class="u-url p-name font-medium text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400 transition-colors">
         {{ site.author.name }}
       </a>
       <p class="p-job-title text-xs text-surface-500">{{ site.author.title }}</p>
diff --git a/_includes/components/widgets/funkwhale.njk b/_includes/components/widgets/funkwhale.njk
index 0f9bbac..829a99b 100644
--- a/_includes/components/widgets/funkwhale.njk
+++ b/_includes/components/widgets/funkwhale.njk
@@ -30,7 +30,7 @@
     </div>
     <div class="flex items-center gap-3">
       {% if np.coverUrl %}
-      <img src="{{ np.coverUrl }}" alt="" class="w-10 h-10 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+      <img src="{{ np.coverUrl }}" alt="" class="w-10 h-10 rounded object-cover flex-shrink-0 shadow-lg" loading="lazy" eleventy:ignore>
       {% endif %}
       <div class="min-w-0 flex-1">
         <p class="font-medium text-sm text-surface-900 dark:text-surface-100 truncate">
@@ -52,7 +52,7 @@
     {% for listening in funkwhaleActivity.listenings | head(2) %}
     <li class="flex items-center gap-2">
       {% if listening.coverUrl %}
-      <img src="{{ listening.coverUrl }}" alt="" class="w-8 h-8 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+      <img src="{{ listening.coverUrl }}" alt="" class="w-8 h-8 rounded object-cover flex-shrink-0 shadow-lg" loading="lazy" eleventy:ignore>
       {% else %}
       <div class="w-8 h-8 rounded bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0">
         <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -80,7 +80,7 @@
     {% for scrobble in lastfmActivity.scrobbles | head(2) %}
     <li class="flex items-center gap-2">
       {% if scrobble.coverUrl %}
-      <img src="{{ scrobble.coverUrl }}" alt="" class="w-8 h-8 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+      <img src="{{ scrobble.coverUrl }}" alt="" class="w-8 h-8 rounded object-cover flex-shrink-0 shadow-lg" loading="lazy" eleventy:ignore>
       {% else %}
       <div class="w-8 h-8 rounded bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0">
         <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/_includes/components/widgets/recent-comments.njk b/_includes/components/widgets/recent-comments.njk
index 9e0b78a..0f17dc8 100644
--- a/_includes/components/widgets/recent-comments.njk
+++ b/_includes/components/widgets/recent-comments.njk
@@ -9,7 +9,7 @@
       <div class="flex items-start gap-2">
         {% if comment.author and comment.author.photo %}
         <img src="{{ comment.author.photo }}" alt="{{ comment.author.name }}"
-             class="w-6 h-6 rounded-full flex-shrink-0 mt-0.5" loading="lazy">
+             class="w-6 h-6 rounded-full flex-shrink-0 mt-0.5 shadow-lg" loading="lazy">
         {% endif %}
         <div>
           <span class="font-medium">{{ comment.author.name or "Anonymous" }}</span>