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
This commit is contained in:
Ricardo
2026-03-07 15:59:42 +01:00
parent c6a3b090df
commit e3d5a46e11
3 changed files with 6 additions and 6 deletions
@@ -8,12 +8,12 @@
<img <img
src="{{ site.author.avatar }}" src="{{ site.author.avatar }}"
alt="{{ site.author.name }}" 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" loading="lazy"
> >
</a> </a>
<div> <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 }} {{ site.author.name }}
</a> </a>
<p class="p-job-title text-xs text-surface-500">{{ site.author.title }}</p> <p class="p-job-title text-xs text-surface-500">{{ site.author.title }}</p>
+3 -3
View File
@@ -30,7 +30,7 @@
</div> </div>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
{% if np.coverUrl %} {% 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 %} {% endif %}
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<p class="font-medium text-sm text-surface-900 dark:text-surface-100 truncate"> <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) %} {% for listening in funkwhaleActivity.listenings | head(2) %}
<li class="flex items-center gap-2"> <li class="flex items-center gap-2">
{% if listening.coverUrl %} {% 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 %} {% else %}
<div class="w-8 h-8 rounded bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0"> <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"> <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) %} {% for scrobble in lastfmActivity.scrobbles | head(2) %}
<li class="flex items-center gap-2"> <li class="flex items-center gap-2">
{% if scrobble.coverUrl %} {% 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 %} {% else %}
<div class="w-8 h-8 rounded bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0"> <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"> <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -9,7 +9,7 @@
<div class="flex items-start gap-2"> <div class="flex items-start gap-2">
{% if comment.author and comment.author.photo %} {% if comment.author and comment.author.photo %}
<img src="{{ comment.author.photo }}" alt="{{ comment.author.name }}" <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 %} {% endif %}
<div> <div>
<span class="font-medium">{{ comment.author.name or "Anonymous" }}</span> <span class="font-medium">{{ comment.author.name or "Anonymous" }}</span>