<article class="a-post-link">
<header class="a-post-link__meta a-post-link__meta--header">
<time class="a-post-link__meta-item" datetime="17. Januar 2016">17. Januar 2016</time>
</header>
<a href="#" class="a-post-link__title-link">
<h3 class="a-post-link__title">Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele</h3>
</a>
<p class="a-post-link__excerpt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum</p>
<a href="#" class="a-link-button a-link-button--post a-link-button--excerpt">
Weiterlesen
</a>
</article>
{{#if has_excerpt}}
<article class="a-post-link">
{{else}}
<a class="a-post-link a-post-link--link" href="{{link}}"{{#if target}} target="{{target}}"{{/if}}>
{{/if}}
{{#if has_excerpt}}
<header class="a-post-link__meta a-post-link__meta--header">
{{#if date}}
<time class="a-post-link__meta-item" datetime="{{date}}">{{date}}</time>
{{/if}}
</header>
{{/if}}
{{#if has_excerpt}}<a href="{{link}}" class="a-post-link__title-link">{{/if}}
<h3 class="a-post-link__title">{{title}}</h3>
{{#if has_excerpt}}</a>{{/if}}
{{#if has_excerpt}}
<p class="a-post-link__excerpt">{{excerpt}}</p>
{{> '@a-link-button' url=link label='Weiterlesen'}}
{{else}}
{{#unless external}}
<footer class="a-post-link__meta a-post-link__meta--footer">
{{#if date}}
<time class="a-post-link__meta-item" datetime="{{date}}">{{date}}</time>
{{/if}}
{{#if categories}}
<div class="a-post-link__meta-item">{{categories}}</div>
{{/if}}
</footer>
{{/unless}}
{{/if}}
{{#if has_excerpt}}
</article>
{{else}}
</a>
{{/if}}
.a-post-link {
@include clean-link;
display: block;
@include fluid-props(padding-top padding-bottom, $fluid-min, $fluid-max, 22px, 26px);
&--link {
@include media($_MOBILE) {
position: relative;
padding-right: 2em;
&:after {
content: "";
width: 0.6em;
height: 0.6em;
border-top: 0.1666666667em solid $color-primary; // 2/12
border-right: 0.1666666667em solid $color-primary; // 2/12
transform: translateX(-0.2em) translateY(-50%) rotate(45deg);
position: absolute;
right: 0;
top: 50%;
@include high-contrast {
border-color: $color-primary-dark;
}
}
}
.a-post-link__title {
@include hover() {
color: $color-primary;
@include high-contrast {
color: $color-primary-dark;
}
}
}
}
&__title {
margin: 0;
transition: color $transition-fast $transition-ease;
font-size: 1rem;
@include hover {
color: $color-primary-dark;
}
@include media($_DESKTOP) {
font-size: 1.25rem;
}
@include high-contrast {
color: $color-primary-dark;
}
}
&__title-link {
@include clean-link;
}
&__meta--header {
margin: 0.5em 0 1em;
color: $color-text-light;
@include high-contrast {
color: $color-text;
}
}
&__meta--footer {
margin-top: 1em;
}
&__meta-item {
font-size: 0.875rem;
display: inline;
line-height: 1.25em;
&:not(:first-child)::before {
content: "\25A0";
color: $color-grey-3;
margin-right: 0.85em;
margin-left: 0.55em;
display: inline-block;
transform: translateY(-0.1em) rotate(-5deg);
font-size: 0.9em;
-webkit-text-size-adjust: 50%;
}
}
&__excerpt {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
}
{
"post": true,
"link": "#",
"title": "Für nachhaltige Sportveranstaltungen und ein Graubünden ohne Olympische Spiele",
"date": "17. Januar 2016",
"categories": [
"Resolutionen",
"Sport"
],
"modifiers": [
"post",
"excerpt"
],
"has_excerpt": true,
"excerpt": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum"
}
No notes defined.