134 lines
5.1 KiB
HTML
134 lines
5.1 KiB
HTML
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
|
|
|
|
<f:layout name="Default" />
|
|
|
|
<f:section name="Content">
|
|
<f:if condition="{posts.0} && {posts.0.featuredImage}">
|
|
<f:asset.css identifier="blog_latest_featured_image">
|
|
@media (max-width:1023px){ .bg-featured-image { --featured-image-url: url(<f:uri.image image="{posts.0.featuredImage}" cropVariant="latest" maxWidth="908" maxHeight="c320"/>); } }
|
|
@media (min-width:1024px){ .bg-featured-image { --featured-image-url: url(<f:uri.image image="{posts.0.featuredImage}" cropVariant="latest" maxWidth="910" maxHeight="1080"/>); } }
|
|
</f:asset.css>
|
|
</f:if>
|
|
|
|
<div class="grid min-h-screen lg:grid-cols-2 dlg:min-h-screen">
|
|
<div class="
|
|
lg:order-last
|
|
w-full
|
|
h-full
|
|
min-h-80
|
|
bg-cover bg-center bg-featured-image">
|
|
</div>
|
|
|
|
<div class="
|
|
group
|
|
max-w-117
|
|
mx-auto pt-12 pb-24 lg:py-24">
|
|
|
|
<f:for each="{posts}" as="post" iteration="iterator">
|
|
<f:if condition="{iterator.isFirst}">
|
|
<f:then><f:render section="firstPost" arguments="{_all}"/></f:then>
|
|
<f:else><f:render section="otherPosts" arguments="{_all}"/></f:else>
|
|
</f:if>
|
|
</f:for>
|
|
|
|
<f:if condition="{posts -> f:count()} >= {settings.limit}">
|
|
<div class="pt-24">
|
|
<a href="{f:uri.page(pageUid: settings.postsUid)}"
|
|
class="
|
|
font-montserrat text-green-dark font-bold
|
|
text-lg leading-9 uppercase
|
|
block
|
|
">Weitere Beiträge</a>
|
|
</div>
|
|
</f:if>
|
|
</div>
|
|
</div>
|
|
</f:section>
|
|
|
|
<f:section name="firstPost">
|
|
<article id="post-{post.uid}" class="
|
|
transition duration-200 ease-in-out
|
|
group-hover:blur-[2px] group-hover:hover:blur-none
|
|
pb-4 lg:pb-28
|
|
">
|
|
<div class="flex font-montserrat text-sm leading-9 font-bold uppercase">
|
|
<f:if condition="{post.categories.0}">
|
|
<ul>
|
|
<li class="
|
|
inline-block mr-1.5
|
|
after:content-[','] last:after:content-['']
|
|
">
|
|
<span class="text-green-dark">{post.categories.0.title}</span>
|
|
</li>
|
|
</ul>
|
|
</f:if>
|
|
<div class="
|
|
flex-auto
|
|
published
|
|
text-gray-800
|
|
before:content-['\2022']
|
|
before:inline-block
|
|
before:mr-1.5
|
|
">
|
|
<f:format.date format="%e. %B %Y">{post.publishDate}</f:format.date>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="font-joschmi font-bold text-5xl leading-13 tracking-wider pt-0 pb-10 lg:pt-10">
|
|
<a href="{f:uri.page(pageUid: post.uid)}"
|
|
class="text-gray-1300 hover:text-green-dark">{post.title}</a>
|
|
</h1>
|
|
<div class="excerpt font-libre text-base leading-7 text-gray-800">
|
|
<f:format.crop maxCharacters="300" respectWordBoundaries="1"><f:if condition="{post.abstract}"><f:then>{post.abstract}</f:then><f:else>{post.description}</f:else></f:if></f:format.crop>
|
|
<a href="{f:uri.page(pageUid: post.uid)}"
|
|
title="{post.title}"
|
|
class="
|
|
inline-block
|
|
w-8 h-8
|
|
ml-4
|
|
align-text-top
|
|
text-green
|
|
">
|
|
<i class="fal fa-arrow-right fa-2x"></i>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
</f:section>
|
|
|
|
<f:section name="otherPosts">
|
|
<article id="post-{post.uid}" class="
|
|
transition duration-200 ease-in-out
|
|
group-hover:blur-[2px] group-hover:hover:blur-none
|
|
">
|
|
<h2 class="font-montserrat font-bold text-3xl pt-8 pb-0">
|
|
<a href="{f:uri.page(pageUid: post.uid)}"
|
|
class="text-gray-1300 hover:text-green-dark">{post.title}</a>
|
|
</h2>
|
|
|
|
<div class="flex font-montserrat text-sm leading-9 font-bold uppercase">
|
|
<f:if condition="{post.categories.0}">
|
|
<ul class="cat-links flex-none">
|
|
<li class="
|
|
inline-block mr-1.5
|
|
after:content-[','] last:after:content-['']
|
|
">
|
|
<span class="text-green-dark">{post.categories.0.title}</span>
|
|
</li>
|
|
</ul>
|
|
</f:if>
|
|
<div class="
|
|
flex-auto
|
|
published
|
|
text-gray-800
|
|
before:content-['\2022']
|
|
before:inline-block
|
|
before:mr-1.5
|
|
">
|
|
<f:format.date format="%e. %B %Y">{post.publishDate}</f:format.date>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</f:section>
|
|
|
|
</html>
|