forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: update contributor avatars on about (#670)
authored by
Salma Alam-Naylor
and committed by
GitHub
89c7e489
7c1d5cbc
+16
-9
+16
-9
app/pages/about.vue
+16
-9
app/pages/about.vue
···
189
189
target="_blank"
190
190
rel="noopener noreferrer"
191
191
class="group relative"
192
-
:title="$t('about.contributors.view_profile', { name: contributor.login })"
192
+
:aria-label="$t('about.contributors.view_profile', { name: contributor.login })"
193
193
>
194
-
<img
195
-
:src="`${contributor.avatar_url}&s=64`"
196
-
:alt="contributor.login"
197
-
width="32"
198
-
height="32"
199
-
class="w-8 h-8 rounded-full ring-2 ring-transparent group-hover:ring-accent transition-all duration-200"
200
-
loading="lazy"
201
-
/>
194
+
<div class="relative flex items-center">
195
+
<img
196
+
:src="`${contributor.avatar_url}&s=64`"
197
+
:alt="contributor.login"
198
+
width="32"
199
+
height="32"
200
+
class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out hover:scale-125 will-change-transform"
201
+
loading="lazy"
202
+
/>
203
+
<span
204
+
class="pointer-events-none absolute -top-9 inset-is-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 text-xs px-2 py-1 shadow-lg opacity-0 scale-95 transition-all duration-150 group-hover:opacity-100 group-hover:scale-100"
205
+
>
206
+
@{{ contributor.login }}
207
+
</span>
208
+
</div>
202
209
</a>
203
210
</div>
204
211
</div>