<div class="m-byline">
<img class="m-byline__portrait" src="/assets/images/author.png" alt="Pennan Modemberg">
<span class="a-meta"><span class="small">Skribent</span></span>
<a href="" class="m-byline__link" title="Visa alla artiklar från skribenten">Pennan Modemberg</a>
<ul class="m-byline__list">
<li class="m-byline__list__item"><strong>Publicerad:</strong> 29 september 2020</li>
<li class="m-byline__list__item"><strong>Senast uppdaterad:</strong> 2 december 2020</li>
</ul>
</div>
<div class="m-byline">
{{#if author_image}}<img class="m-byline__portrait" src="{{author_image}}" alt="{{author_name}}">{{/if}}
<span class="a-meta"><span class="small">{{#if author_image}}Skribent{{else}}Skribent{{/if}}</span></span>
<a href="{{author_archive}}" class="m-byline__link" title="{{archive_text}}">{{author_name}}</a>
<ul class="m-byline__list">
<li class="m-byline__list__item"><strong>Publicerad:</strong> {{publish_date}}</li>
<li class="m-byline__list__item"><strong>Senast uppdaterad:</strong> {{update_date}}</li>
{{#if reviewer_name}}
<li class="m-byline__list__item"><strong>Granskad av:</strong> {{reviewer_name}}</li>
{{/if}}
</ul>
{{#if author_email}}
<figure class="m-byline__figure">
<svg class="m-byline__icon" viewbox="0 0 32 32" width="100%" height="100%">
<path d="M4 29h24v2H4zM10.3 26H4v-6.3L22.1 1.6l6.3 6.3L10.3 26zM6 24h3.5L25.6 7.9l-3.5-3.5L6 20.5V24z"></path><path d="M17.07 6.69l1.414-1.414 6.293 6.293-1.414 1.415z"></path>
</svg>
<a class="m-byline__link small" href="mailto:{{author_email}}">Kontakta mig</a>
</figure>
{{/if}}
</div>
{
"author_name": "Pennan Modemberg",
"author_archive": "",
"archive_text": "Visa alla artiklar från skribenten",
"author_email": false,
"author_image": "/assets/images/author.png",
"publish_date": "29 september 2020",
"update_date": "2 december 2020"
}
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/extends';
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@include mixin.molecule(byline) {
width: 100%;
max-width: func.to_rem(400px);
[class*='meta'] {
margin-bottom: func.rhythm(1);
}
@include bem.e(figure) {
display: flex;
align-items: center;
}
@include bem.e(icon) {
width: func.to_rem(22px);
height: func.to_rem(22px);
margin-right: func.rhythm(0.5);
}
@include bem.e(link) {
@extend %link-styles;
margin-left: func.rhythm(-0.5);
}
@include bem.e(portrait) {
display: block;
width: func.to_rem(64px);
height: func.to_rem(64px);
margin-bottom: func.rhythm(1);
border-radius: 50%;
background-color: colors.$color-concrete;
}
@include bem.e(list) {
margin: func.rhythm(2) 0 func.rhythm(1) 0;
padding: 0;
list-style: none;
@include bem.e(item) {
padding-top: 0;
padding-bottom: 0;
font-size: var.$size-medium-plus;
}
}
}
No notes defined.