My personal site
cherry.computer
cherry.computer
htmx
tailwind
axum
askama
feat: style media
+10
-7
server/templates/index.html
+10
-7
server/templates/index.html
···
9
9
</head>
10
10
<body class="bg-gray-900">
11
11
<div class="flex flex-col">
12
-
<div class="flex justify-center bg-gray-950">
12
+
<div class="bg-gray-950 text-center">
13
13
<h1
14
14
class="font-serif text-4xl text-gray-200 motion-safe:animate-marquee sm:text-6xl md:text-8xl"
15
15
>
···
17
17
>.computer
18
18
</h1>
19
19
</div>
20
-
<div class="flex justify-center">
20
+
<div class="flex w-full max-w-xl flex-col self-center">
21
21
{% for media in media -%}
22
-
<img
23
-
class="p-3"
24
-
src="{{ media.image }}"
25
-
alt="Cover art for {{ media.name }}"
26
-
/>
22
+
<div class="flex odd:flex-row even:flex-row-reverse">
23
+
<img
24
+
class="m-3 h-50 rounded-xs object-contain"
25
+
src="{{ media.image }}"
26
+
alt="Cover art for {{ media.name }}"
27
+
/>
28
+
<p class="self-center text-2xl text-white">{{ media.name }}</p>
29
+
</div>
27
30
{%- endfor %}
28
31
</div>
29
32
</div>