Added thumbnails on posts preview
This commit is contained in:
parent
778c6a5e11
commit
616933d12a
@ -3,9 +3,13 @@
|
|||||||
{% for item in newsListItems %}
|
{% for item in newsListItems %}
|
||||||
{% if item.date.getTime() <= global.now %}
|
{% if item.date.getTime() <= global.now %}
|
||||||
<li class="news-list__item {{ item.data.type }}">
|
<li class="news-list__item {{ item.data.type }}">
|
||||||
<h3 class="news-list__item-heading">
|
<a href="{{ item.url | url }}" class="news-list__link" style="background-image: url({{ item.data.illustration }});">
|
||||||
<a href="{{ item.url | url }}" class="news-list__link" rel="bookmark">{{ item.data.title }}</a>
|
{% if item.data.type == 'event' %}
|
||||||
</h3>
|
<p class="news-list__item-type">Évènement</p>
|
||||||
|
{% else %}
|
||||||
|
<p class="news-list__item-type">Actualité</p>
|
||||||
|
{% endif %}
|
||||||
|
<h3 class="news-list__item-heading">{{ item.data.title }}</h3>
|
||||||
<p class="news-list__item-date">
|
<p class="news-list__item-date">
|
||||||
{% if item.data.eventDate %}
|
{% if item.data.eventDate %}
|
||||||
<time datetime="{{ item.data.eventDate | w3DateFilter }}">{{ item.data.eventDate | dateFilter }}</time>
|
<time datetime="{{ item.data.eventDate | w3DateFilter }}">{{ item.data.eventDate | dateFilter }}</time>
|
||||||
@ -16,6 +20,7 @@
|
|||||||
<time datetime="{{ item.data.eventTime }}">{{ item.data.eventTime }}</time>
|
<time datetime="{{ item.data.eventTime }}">{{ item.data.eventTime }}</time>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</p>
|
</p>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
@ -25,20 +25,32 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: var(--color-primary);
|
background-color: var(--color-primary);
|
||||||
color: var(--color-dark);
|
color: var(--color-dark);
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
|
|
||||||
&.event {
|
&.event,
|
||||||
|
&.event &-type {
|
||||||
background-color: var(--color-light-blue);
|
background-color: var(--color-light-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-type {
|
||||||
|
margin-bottom: auto;
|
||||||
|
align-self: flex-start;
|
||||||
|
border-radius: 1rem 0;
|
||||||
|
padding: .125rem 1rem;
|
||||||
|
font-size: .875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
&-heading {
|
&-heading {
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
font-weight: 600;
|
font-weight: 400;
|
||||||
padding: 4.5rem 1.5rem 4rem;
|
padding: 1rem 1.5rem;
|
||||||
|
background-color: rgba(0, 0, 0, .65);
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-date {
|
&-date {
|
||||||
@ -47,7 +59,6 @@
|
|||||||
background-color: var(--color-light-gray);
|
background-color: var(--color-light-gray);
|
||||||
border-radius: 0 0 1rem 1rem;
|
border-radius: 0 0 1rem 1rem;
|
||||||
padding: 1rem 1.5rem;
|
padding: 1rem 1.5rem;
|
||||||
margin-top: auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
time + time {
|
time + time {
|
||||||
@ -57,6 +68,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__link {
|
&__link {
|
||||||
|
border-radius: 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
height: 16rem;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
&,
|
&,
|
||||||
&:visited {
|
&:visited {
|
||||||
color: var(--color-dark);
|
color: var(--color-dark);
|
||||||
@ -64,10 +84,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
h3 {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
main.home .news-list {
|
main.home .news-list {
|
||||||
margin-top: 8rem;
|
margin-top: 8rem;
|
||||||
|
Loading…
Reference in New Issue
Block a user