Merge branch 'feature-thumbnails' into dev
This commit is contained in:
commit
e70fe4658f
@ -3,19 +3,24 @@
|
||||
{% for item in newsListItems %}
|
||||
{% if item.date.getTime() <= global.now %}
|
||||
<li class="news-list__item {{ item.data.type }}">
|
||||
<h3 class="news-list__item-heading">
|
||||
<a href="{{ item.url | url }}" class="news-list__link" rel="bookmark">{{ item.data.title }}</a>
|
||||
</h3>
|
||||
<p class="news-list__item-date">
|
||||
{% if item.data.eventDate %}
|
||||
<time datetime="{{ item.data.eventDate | w3DateFilter }}">{{ item.data.eventDate | dateFilter }}</time>
|
||||
<a href="{{ item.url | url }}" class="news-list__link" style="background-image: url({{ item.data.illustration }});">
|
||||
{% if item.data.type == 'event' %}
|
||||
<p class="news-list__item-type">Évènement</p>
|
||||
{% else %}
|
||||
<time datetime="{{ item.date | w3DateFilter }}">{{ item.date | dateFilter }}</time>
|
||||
<p class="news-list__item-type">Actualité</p>
|
||||
{% endif %}
|
||||
{% if item.data.eventTime %}
|
||||
<time datetime="{{ item.data.eventTime }}">{{ item.data.eventTime }}</time>
|
||||
{% endif %}
|
||||
</p>
|
||||
<h3 class="news-list__item-heading">{{ item.data.title }}</h3>
|
||||
<p class="news-list__item-date">
|
||||
{% if item.data.eventDate %}
|
||||
<time datetime="{{ item.data.eventDate | w3DateFilter }}">{{ item.data.eventDate | dateFilter }}</time>
|
||||
{% else %}
|
||||
<time datetime="{{ item.date | w3DateFilter }}">{{ item.date | dateFilter }}</time>
|
||||
{% endif %}
|
||||
{% if item.data.eventTime %}
|
||||
<time datetime="{{ item.data.eventTime }}">{{ item.data.eventTime }}</time>
|
||||
{% endif %}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
@ -25,20 +25,32 @@
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-dark);
|
||||
border-radius: 1rem;
|
||||
|
||||
&.event {
|
||||
&.event,
|
||||
&.event &-type {
|
||||
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 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
padding: 4.5rem 1.5rem 4rem;
|
||||
font-weight: 400;
|
||||
padding: 1rem 1.5rem;
|
||||
background-color: rgba(0, 0, 0, .65);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&-date {
|
||||
@ -47,7 +59,6 @@
|
||||
background-color: var(--color-light-gray);
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
|
||||
time + time {
|
||||
@ -57,6 +68,15 @@
|
||||
}
|
||||
|
||||
&__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 {
|
||||
color: var(--color-dark);
|
||||
@ -64,7 +84,9 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
h3 {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user