Latte / Html
Neintegrovaná verze
Pro specifikace blogového článku - rubrika, čas čtení, datum atd. používáme komponentu spec.scss
Pro authora můžeme taky vytvořit komponentu zvlášť.
{default $type = "small"}
{default $img = false}
<article class="article article--{$type}">
<div class="article__figure --flex --flex-column --flex-end-x">
<a class="article__figure-link" href="#" n:if="$img">
<img class="article__img" src="{$img}" alt="{$item|name|striptags}">
</a>
{var $img = false}
<a href="#" class="article__author author --flex --flex-centre-y">
<div class="author__figure" n:if="$img">
<img class="author__img" src="{$img}" alt="Autor">
</div>
<div class="author__text">
<span class="author__label">Autor článku</span>
<span class="author__name">Jméno autora</span>
</div>
</a>
</div>
<div class="article__text">
<div class="article__spec spec">
<span class="spec__item spec__item--date">20. 2. 2020</span>
<a href="#"
class="spec__item spec__item--rubric">
Rubrika článku
</a>
</div>
<h3 class="article__title --title-h2">
<a href="#" class="article__link">
Název článku s delším textem
</a>
</h3>
<div class="article__perex">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam sodales tellus non nisl vulputate faucibus.
Pellentesque id ipsum mattis sem mattis pulvinar.
</div>
<a class="article__link article__link--small"
href="#">Zobrazit celý článek</a>
</div>
</article>
Integrovaná verze
{default $type = "small"}
<article class="article article--{$type}" n:if="isset($item)">
{var $img = ("/blog/small/blg-{$item['id']}-11.jpg"|imageExist)}
{if !$img}
{var $img = ("/blog/middle/blg-{$item['id']}-11.jpg"|imageExist)}
{/if}
<div class="article__figure --flex --flex-column --flex-end-x">
<a class="article__figure-link" href="{$item|link}" n:if="$img">
<img class="article__img" src="{$img}" alt="{$item|name|striptags}">
</a>
{var $author = $item['author']}
{if isset($author) && $author}
{var $img = ("/autor/athr-{$author['id']}-12.jpg"|imageExist)}
<a href="{$author|link}" class="article__author author --flex --flex-centre-y">
<div class="author__figure" n:if="$img">
<img class="author__img" src="{$img|noescape}" alt="{$author|header|striptags}">
</div>
<div class="author__text">
<span class="author__label">{$web['BLOG_ARTICLE_AUTHOR']}</span>
<span class="author__name">{$author|header}</span>
</div>
</a>
{/if}
</div>
<div class="article__text">
{var $rubric = $item['rubric']}
<div class="article__spec spec">
<span class="spec__item spec__item--date">{$item['date_inserted']->format('j. n. Y')}</span>
<a n:if="$rubric"
href="{$rubric|link|noescape}"
class="spec__item spec__item--rubric">
{$rubric|header}
</a>
</div>
<h3 class="article__title --title-h2">
<a href="{$item|link}" class="article__link">
{$item|header|noescape}
</a>
</h3>
<div class="article__perex">
{$item|perex:true|striptags}
</div>
<a class="article__link article__link--small"
href="{$item|link}">{$web['BLOG_READ_MORE']}</a>
</div>
</article>
CSS / SCSS
/* Article */
.article {
flex-direction: column;
display: flex;
align-items: center;
@include media($medium){
flex-direction: row;
}
}
.article--small{
margin: auto;
max-width: 700px;
flex-direction: column;
@include media($xlarge){
flex-direction: row;
}
}
.article--large{
max-width: 945px;
margin: 0 0 55px 0;
}
/* Article | Spec */
.article__spec {
margin-bottom: 15px;
}
/* Article | Figure */
.article__figure {
max-width: 340px;
width: 100%;
height: 344px;
position: relative;
flex-shrink: 0;
z-index: 1;
padding: 18px 25px;
@include media($xlarge){
width: 344px;
height: 344px;
}
&::after{
@include pseudo(block, absolute);
background: linear-gradient(to top, #000 0%, transparent 60%);
top:0;
left:0;
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
pointer-events: none;
}
.article--small &{
height: 255px;
@include media($xlarge){
width: 255px;
height: 255px;
}
}
}
/* Article | Author */
.article__author{
z-index: 2;
}
/* Article | Img */
.article__img{
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Article | Title */
.article__title {
font-weight: bold;
margin: 0 0 10px 0;
@include media($large) {
font-size: 2.5rem;
}
}
/* Article | Perex */
.article__perex {
font-size: 1.5rem;
margin: 0 0 15px 0;
}
/* Article | Link */
.article__link {
text-decoration: underline;
.article__title & {
text-decoration: none;
color: $color__text;
&:hover, &:focus {
color: $color__primary;
}
}
}
.article__link--small{
font-size: 1.5rem;
}
/* Article | Text */
.article__text{
padding: 14px 0px;
max-width: 340px;
.article--large &{
@include media($medium){
padding: 14px 34px;
max-width: none;
}
}
.article--small &{
@include media($xlarge){
padding: 14px 34px;
max-width: none;
}
}
}
/* Spec */
.spec {
margin: -2px -8px;
}
.spec--header-top{
margin: -2px -8px -2px -33px;
}
/* Spec | Item */
.spec__item {
color: $color__gray-darker;
font-size: 15px;
margin: 2px 8px;
display: inline-flex;
}
.spec__item--date{
font-size: 1.3rem;
padding: 6px 14px;
color: #fff;
font-weight: 700;
background: $color__primary;
}
.spec__title--hide {
display: none;
}
/* Author */
.author{
flex-shrink: 0;
.about-author &{
margin: 0 20px 15px 0;
}
}
.author__figure {
width: 54px;
height: 54px;
overflow: hidden;
border-radius: 50%;
margin: 0 10px 0 0 ;
border: 1px solid $color__gray;
}
.author__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author__text{
line-height: 1.2;
}
.author__label {
display: block;
font-size: 13px;
color: $color__gray-darker;
}
.author__name {
font-size: 1.5rem;
color: #fff;
font-weight: 700;
.author--dark &{
color: $color__text;
}
}