My personal site
cherry.computer
cherry.computer
htmx
tailwind
axum
askama
feat: move thumbnails into a row
+4
frontend/src/css/tailwind.css
+4
frontend/src/css/tailwind.css
+26
-15
server/templates/index.html
+26
-15
server/templates/index.html
···
14
14
<span class="text-pink-700">cherry</span>.computer
15
15
</h1>
16
16
</div>
17
-
<div class="m-4 flex max-w-xl flex-col gap-4 self-center">
18
-
<div class="text-justify font-mono text-2xl text-pink-100 uppercase">
17
+
<div class="m-4 flex max-w-2xl flex-col items-center gap-4 self-center">
18
+
<div
19
+
class="max-w-xl text-justify font-mono text-2xl text-pink-100 uppercase"
20
+
>
19
21
<p>Welcome to the intersection of product and politics.</p>
20
22
<p>
21
23
Where we synthesise the contradictions of consumption and communism.
···
27
29
interrogate the apparent complex further.
28
30
</p>
29
31
</div>
30
-
<h2 class="text-3xl text-pink-50">
32
+
<h2 class="self-start text-3xl text-pink-50">
31
33
Here is what I've swallowed most recently:
32
34
</h2>
33
-
{% for media in media -%}
34
-
<div class="flex odd:flex-row even:flex-row-reverse">
35
-
<img
36
-
class="m-3 h-50 rounded-xs object-contain"
37
-
src="{{ media.image }}"
38
-
alt="Cover art for {{ media.name }}"
39
-
/>
40
-
<div class="flex flex-col self-center">
35
+
<div class="grid grid-cols-{{ media.len() }}">
36
+
{% for media in media -%}
37
+
<div
38
+
class="peer/{{ loop.index }} relative m-2 aspect-square max-h-50"
39
+
>
40
+
<img
41
+
class="absolute inset-0 aspect-square rounded-xs object-fill"
42
+
aria-hidden="true"
43
+
src="{{ media.image }}"
44
+
/>
45
+
<img
46
+
class="relative aspect-square rounded-xs object-contain backdrop-blur-sm transition-transform hover:scale-116 hover:rounded-lg hover:shadow-lg"
47
+
src="{{ media.image }}"
48
+
alt="Cover art for {{ media.name }}"
49
+
/>
50
+
</div>
51
+
<div
52
+
class="col-span-full row-2 mx-2 mt-4 flex hidden flex-col self-center peer-hover/{{ loop.index }}:block"
53
+
>
41
54
<p class="text-2xl text-white">{{ media.name }}</p>
42
55
<p class="text-xl text-gray-700 italic">{{ media.context }}</p>
43
56
</div>
57
+
{%- endfor %}
44
58
</div>
45
-
{%- endfor %}
46
-
<p class="text-center font-mono text-3xl text-pink-50">
47
-
Free Palestine 🇵🇸
48
-
</p>
59
+
<p class="font-mono text-3xl text-pink-50">Free Palestine 🇵🇸</p>
49
60
</div>
50
61
</div>
51
62
</body>