AstrolabeCAE/SiteWebAstrolabe
AstrolabeCAE/SiteWebAstrolabe
2
2
Fork 4
Code Issues 2 Pull Requests 2 Packages Projects Releases 3 Activity

Added thumbnails on posts preview

This commit is contained in:
Yves Gatesoupe 2021-11-17 01:03:27 +01:00
parent 778c6a5e11
commit 616933d12a
2 changed files with 45 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/_includes/partials/components/posts-list.njk
View File

@ -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 %}

36
src/scss/components/_posts-list.scss
View File

@ -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;
}
}
}
}