My personal site
cherry.computer
cherry.computer
htmx
tailwind
axum
askama
1<a
2 href="{{ media.url }}"
3 target="_blank"
4 class="peer/{{ media_type }} relative aspect-square max-h-50 justify-self-center hoverable:max-h-none"
5>
6 <img
7 class="absolute inset-0 aspect-square w-full rounded-xs object-fill"
8 aria-hidden="true"
9 src="{{ media.image }}"
10 />
11 <img
12 class="relative aspect-square w-full rounded-xs object-contain backdrop-blur-sm transition-transform hover:scale-116 hover:rounded-lg hover:shadow-lg"
13 src="{{ media.image }}"
14 alt="Cover art for {{ media.name }}"
15 />
16</a>
17<a
18 href="{{ media.url }}"
19 target="_blank"
20 id="media-description-{{ media_type }}"
21 class="mx-2 pt-4 flex flex-col self-center peer-hover/{{ media_type }}:block hover:block hoverable:col-span-full hoverable:row-2 hoverable:hidden"
22 hx-swap-oob="true"
23>
24 <p class="text-2xl text-white">{{ media.name }}</p>
25 <p class="text-xl text-gray-700 italic">{{ media.context }}</p>
26</a>