Fix mobile UI messy

[Folyd]

[kiyov09]

I think I can help with this one. Let me know.

[Folyd]

Thanks, @kiyov09. zine uses Tailwind CSS to style the UI, here are the source lines related to this issue:

zine/templates/issue.jinja

Lines 22 to 47 in b306588

	<div class="relative py-6 sm:px-8 transition ease-in-out sm:hover:scale-110 duration-500 border-gray-200">
	{% if article.path -%}
	<a class="group" href="{{ article.path }}">
	{% else -%}
	<a class="group" href="/{{ issue.slug }}/{{ article.slug }}">
	{% endif -%}
	<div class="zine-cover relative">
	<span class="absolute top-4 right-4 text-white text-2xl font-bold"
	style="color: #eee; text-shadow: 1px 1px 2px #000">
	No. {{ loop.index }}
	</span>
	<img class="z-0 w-full max-h-52 md:max-h-72 object-cover" loading="lazy" src="{{ article.cover }}"
	alt="{{ article.title }}" />
	</div>
	<div class="my-4 text-2xl text-black">
	<div
	class="zine-card-title pb-4 font-bold line-clamp-2 group-hover:underline decoration-8 underline-offset-1 decoration-primary">
	{{ article.title }}
	</div>
	</div>
	</a>
	<div class="flex sm:px-8 items-center justify-between text-base text-gray-500 absolute bottom-4 left-0 right-0">
	<span class="zine-card-date">{{ article.pub_date }}</span>
	{{ macros::author_link(author = article.author) }}
	</div>
	</div>

[kiyov09]

Awesome. I'll start working on a solution right away. Is there anything I need to know before opening a PR?

[Folyd]

Great, nothing else needs to know, feel free to open PR. 👍

[kiyov09]

@Folyd
Just opened a PR for this issue #163