<div class="c-info-box c-info-box--author">
<div class="c-info-box__content">
<h3 class="c-info-box__title">Meinung</h3>
<p class="c-info-box__text">von Maximilian Mustermann</p>
</div>
<div class="c-info-box__media">
<picture>
<img class="lazy lazyload c-info-box__image" src="../../../assets/img/author.png" title="Author to be defined" alt="Jens Meier" />
</picture>
</div>
</div>
<div class="c-info-box c-info-box--author">
<div class="c-info-box__content">
{% if title %}
<h3 class="c-info-box__title">{{ title }}</h3>
{% endif %}
{% if text %}
<p class="c-info-box__text">von {{ text }}</p>
{% endif %}
</div>
{% if src %}
<div class="c-info-box__media">
<picture>
<img class="lazy lazyload c-info-box__image"
src="{{ src }}"
title="Author to be defined"
alt="Jens Meier"/>
</picture>
</div>
{% endif %}
</div>
{
"additionalClasses": "",
"title": "Meinung",
"text": "Maximilian Mustermann",
"src": "../../../assets/img/author.png"
}
.c-info-box {
&--author {
border-bottom: rem-calc(2) $color-grey-lightest solid;
clear: both;
margin-bottom: rem-calc(28);
min-height: rem-calc(80);
overflow: auto;
position: relative;
width: 100%;
.c-info-box__content {
float: left;
padding-bottom: rem-calc(6);
width: 50%;
p {
line-height: rem-calc(22);
}
@include breakpoint(large) {
width: 100%;
}
}
.c-info-box__media {
bottom: 0;
float: right;
position: absolute;
right: 0;
@include breakpoint(large) {
position: relative;
}
}
.c-info-box__title,
.c-info-box__text {
margin-bottom: 0;
}
.c-info-box__image {
max-height: rem-calc(80);
width: auto;
}
@include breakpoint(large) {
margin-bottom: 0;
}
}
&--article-author {
background-color: $color-grey-lightest;
padding: rem-calc(18);
width: 100%;
@include breakpoint(medium) {
padding: rem-calc(25) rem-calc(33);
width: 458px;
}
@include breakpoint(large) {
float: right;
padding: rem-calc(30) rem-calc(40);
width: 100%; // 370px before but adapted to final position below text
}
figure {
align-content: flex-end;
align-items: flex-end;
background-color: $color-white;
border-radius: 50%;
display: flex;
flex-flow: column wrap;
height: 77px;
justify-content: flex-end;
margin: 0;
overflow: hidden;
width: 77px;
@include breakpoint(medium) {
height: 100px;
width: 100px;
}
}
figure + figcaption {
margin-left: rem-calc(20);
}
.btn {
&:hover,
&:focus {
.c-info-box__title {
color: currentColor;
}
}
}
.c-info-box {
&__image {
height: 100%; // ok, because we only have landscape images.
max-width: none;
}
&__media {
@include clearfix;
align-items: center;
display: flex;
}
&__title {
font-size: rem-calc(23);
font-weight: 700;
line-height: rem-calc(24);
margin: 0;
transition: color .25s;
}
&__text {
font-size: rem-calc(15);
margin: 0;
}
&__content p {
font-size: rem-calc(16);
font-weight: 300;
line-height: rem-calc(23);
margin-bottom: .8rem;
:first-child {
margin: rem-calc(16) 0 rem-calc(18);
}
@include breakpoint(large) {
margin: rem-calc(28) 0 rem-calc(21);
}
}
}
}
}
There are no notes for this item.