30 lines
1.5 KiB
HTML
30 lines
1.5 KiB
HTML
<div class="relative">
|
|
|
|
<div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-6 pb-16 pt-5">
|
|
{% for post in __SELF__.posts %}
|
|
<a href="{{post.href}}" class="flex flex-col h-full box shadow-lg hover:shadow-2xl rounded-xl overflow-hidden bg-sky-50" target="_BLANK">
|
|
{% if post.featuredImage %}
|
|
<img {{ post.featuredImage | resize('box', 'calc(100vw - 1.5rem)|640:calc(50vw - 1.5rem)|1024:calc(33vw - 1.5rem)|1152:360px') }} class="object-cover w-full h-48">
|
|
{% endif %}
|
|
<div class="flex items-end justify-between px-6 py-3">
|
|
{% if __SELF__.logo %}
|
|
<script type="text/html" data-lazy data-src="logo">
|
|
<img src="{{__SELF__.logo|media}}" class="w-8">
|
|
</script>
|
|
<div data-dest="logo"></div>
|
|
{% endif %}
|
|
<div class="text-xs text-gray-500">{{post.created_at | human}}</div>
|
|
</div>
|
|
<div class="flex-grow p-6 pt-0 prose prose-sm max-w-none text-gray-600">
|
|
{{post.intro}} …
|
|
</div>
|
|
<div class="flex px-6 py-3 items-center border border-t">
|
|
{% partial 'ui/sprite' icon=post.page.icon class='w-6 h-6 mr-3 fill-current text-sky-700' %}
|
|
<span class="text-sm text-gray-600">Beitrag anschauen</span>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|