AstrolabeCAE/SiteWebAstrolabe
AstrolabeCAE/SiteWebAstrolabe
2
2
Fork 4
Code Issues 2 Pull Requests 1 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 %} {% 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>
<p class="news-list__item-date">
{% if item.data.eventDate %}
<time datetime="{{ item.data.eventDate | w3DateFilter }}">{{ item.data.eventDate | dateFilter }}</time>
{% else %} {% else %}
<time datetime="{{ item.date | w3DateFilter }}">{{ item.date | dateFilter }}</time> <p class="news-list__item-type">Actualité</p>
{% endif %} {% endif %}
{% if item.data.eventTime %} <h3 class="news-list__item-heading">{{ item.data.title }}</h3>
<time datetime="{{ item.data.eventTime }}">{{ item.data.eventTime }}</time> <p class="news-list__item-date">
{% endif %} {% if item.data.eventDate %}
</p> <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> </li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}

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

@ -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,7 +84,9 @@
} }
&:hover { &:hover {
text-decoration: underline; h3 {
text-decoration: underline;
}
} }
} }
} }