40 lines
2.2 KiB
HTML
40 lines
2.2 KiB
HTML
|
<div class="relative -mx-6">
|
||
|
|
|
||
|
|
<div class="flex pb-16 pt-8 slides-1 sm_slides-2 lg_slides-3" data-glider-prev="#glider-prev" data-glider-next="#glider-next" data-glider-dots="#glider-dots" data-glider-autostart data-glider-interval="7000" data-glider-lazyload data-glider>
|
||
|
|
{% for post in __SELF__.posts %}
|
||
|
|
<div class="px-3">
|
||
|
|
<a href="{{post.href}}" class="flex flex-col h-full box shadow-lg hover:shadow-2xl rounded-lg overflow-hidden" 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', {'lazy': true}) }} class="object-cover w-full h-48"> {% endif %}
|
||
|
|
<div class="flex items-end justify-between px-6 py-3 bg-gray-100">
|
||
|
|
{% if __SELF__.logo %} <img data-src="{{__SELF__.logo|media}}" class="w-8"> {% endif %}
|
||
|
|
<div class="text-xs text-gray-500">{{post.created_at | human}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex-grow p-6 pt-0 text-sm text-gray-600 bg-gray-100">
|
||
|
|
{{post.intro}} …
|
||
|
|
</div>
|
||
|
|
<div class="flex px-6 py-3 bg-gray-100 items-center border border-t">
|
||
|
|
{{'facebook-square'|sprite('w-6 h-6 mr-3 fill-current text-primary-500')}}
|
||
|
|
<span class="text-sm text-gray-600">Beitrag anschauen</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="absolute top-0 left-0 flex items-center h-full ml-3">
|
||
|
|
<span id="glider-prev" class="flex items-center justify-center w-10 h-10 bg-black-t400">
|
||
|
|
{{'chevron' | sprite('w-6 h-6 text-white cursor-pointer fill-current')}}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="absolute top-0 right-0 flex items-center h-full mr-3">
|
||
|
|
<span id="glider-next" class="flex items-center justify-center w-10 h-10 bg-black-t400">
|
||
|
|
{{'chevron' | sprite('w-6 h-6 text-white cursor-pointer fill-current rotate-180 transform')}}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="-mt-10 relative" id="glider-dots"></div>
|
||
|
|
|