<div class="c-meta">
<ul cLass="c-meta__list">
<li class="c-meta__item"><strong>Hildesheim</strong></li>
<li class="c-meta__item"><strong>von Johanna Elster</strong></li>
<li class="c-meta__item"><time title="Veröffentlicht am" itemprop="datePublished" datetime="28.04.2019">28.04.2019</time></li>
<li class="c-meta__item">Aktualisiert <span class="js-last-updated" data-tstamp="1566213446">
19.08.2019 - 13:17 Uhr
</span>
</li>
<li class="c-meta__item"><span title="Lesezeit"><i class="fa fa-book-open"></i> 10 Min.</span></li>
<li class="c-meta__item"> 9.523 Aufrufe</li>
</ul>
</div>
<div class="c-meta">
<ul cLass="c-meta__list">
{% if location %}<li class="c-meta__item"><strong>{{ location }}</strong></li>{% endif %}
{% if author %}<li class="c-meta__item"><strong>von {{ author }}</strong></li>{% endif %}
{% if datetime %}<li class="c-meta__item"><time title="Veröffentlicht am" itemprop="datePublished" datetime="{{ datetime }}">{{ datetime }}</time></li>{% endif %}
{% if tstamp %}<li class="c-meta__item">Aktualisiert {% render '@last-updated' with {tstamp: tstamp} %}</li>{% endif %}
{% if readingTime %}<li class="c-meta__item"><span title="Lesezeit"><i class="fa fa-book-open"></i> {{ readingTime }} Min.</span></li>{% endif %}
{% if visits %}<li class="c-meta__item"> {{ visits }} Aufrufe</li>{% endif %}
</ul>
</div>
{
"location": "Hildesheim",
"author": "Johanna Elster",
"datetime": "28.04.2019",
"tstamp": "1566213446",
"readingTime": "10",
"visits": "9.523"
}
.c-meta {
color: $color-grey-light;
font-size: $font-size-s;
width: 100%;
a {
border-bottom: none;
color: $color-grey-light;
font-size: $font-size;
}
&__list {
list-style: none;
margin-bottom: 0;
padding: 0;
}
&__item {
display: inline-block;
line-height: 1.5;
&:not(:last-child) {
&::after {
color: $color-grey;
content: '|';
display: inline-block;
font-weight: normal;
margin: 0 .25em;
}
}
&--only-desktop,
&--only-tablet {
display: none;
}
}
&__label {
display: none;
}
@include breakpoint(medium) {
&__item {
&--only-tablet {
display: inline-block;
}
}
&__label {
display: inline-block;
}
}
@include breakpoint(large) {
&__item--only-desktop {
display: inline-block;
}
}
// Override color when used in dark sections
.o-section.o-section--dark & {
&,
a {
color: $color-white;
text-shadow: 1px 1px 2px rgba($color-black, .25);
}
}
.tx-ttaddress & {
font-size: $font-size;
}
.c-meta__authorlink {
font-size: inherit;
}
}
Add notes here…