internal
/
itsonus-blog
4
0
Fork 0
Code Issues 7 Pull Requests Releases Activity

feat: review the home page

feat/integration_ideo
Nicolas Doby 2022-10-27 14:19:40 +02:00
parent bdf18a5fdf
commit ecdcd0fa8e
6 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/_components/postslist.njk
View File

@ -1,8 +1,9 @@
<div class="post-list">
{% for post in postslist | reverse %} {% for post in postslist | reverse %}
<article class="postlist-item"> <article class="post-list-item">
<header class="postlist-header"> <header class="post-list-header">
<h2> <h2>
<a href="{{ post.url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a> <a href="{{ post.url }}" class="post-list-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
</h2> </h2>
<ul class="post-metadata"> <ul class="post-metadata">
<li class="post-metadata__header">Le <time datetime="{{ post.data.date | htmlDateString }}">{{ post.data.date | readableDate }}</time> {{ post.data.authors | readableAuthors }}</li> <li class="post-metadata__header">Le <time datetime="{{ post.data.date | htmlDateString }}">{{ post.data.date | readableDate }}</time> {{ post.data.authors | readableAuthors }}</li>
@ -13,8 +14,9 @@
</ul> </ul>
</header> </header>
<p>{{ post.data.resume }}</p> <p>{{ post.data.resume }}</p>
<footer class="postlist-footer"> <footer class="post-list-footer">
<a href="{{ post.url }}">Lire la suite</a> <a href="{{ post.url }}">Lire la suite</a>
</footer> </footer>
</article> </article>
{% endfor %} {% endfor %}
</div>

2
src/_pages/all_articles.njk
View File

@ -4,7 +4,7 @@ eleventyNavigation:
key: Tous les articles key: Tous les articles
order: 3 order: 3
--- ---
<ul class="post-list"> <ul class="article-list">
{%- for post in collections.posts | reverse %} {%- for post in collections.posts | reverse %}
<li> <li>
<div> <div>

2
src/_pages/blog/exemple.md
View File

@ -1,7 +1,7 @@
--- ---
title: Exemple d'article title: Exemple d'article
description: Article traitant d'ACV, d'EFC et d'écoconception description: Article traitant d'ACV, d'EFC et d'écoconception
resume: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh. resume: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim.
date: 2022-10-14 date: 2022-10-14
tags: tags:
- ACV - ACV

2
src/_pages/blog/exemple_2.md
View File

@ -1,7 +1,7 @@
--- ---
title: Second exemple d'article title: Second exemple d'article
description: Article traitant d'accessibilité et d'écoconception description: Article traitant d'accessibilité et d'écoconception
resume: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh. resume: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet.
date: 2022-10-15 date: 2022-10-15
tags: tags:
- cryptographie - cryptographie

2
src/_pages/blog/exemple_3.md
View File

@ -1,7 +1,7 @@
--- ---
title: Troisième exemple d'article title: Troisième exemple d'article
description: Article traitant d'accessibilité description: Article traitant d'accessibilité
resume: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh. resume: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat.
date: 2022-10-17 date: 2022-10-17
tags: tags:
- accessibilité - accessibilité

31
src/assets/css/index.scss
View File

@ -214,34 +214,41 @@ figure figcaption {
} }
/*!* Posts list *!*/ /*!* Posts list *!*/
.post-list { .article-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
.post-list li { .article-list li {
margin: 2px; margin: 2px;
} }
.post-list li p { .article-list li p {
margin: 1.5rem 0 2.5rem; margin: 1.5rem 0 2.5rem;
} }
.post-list li div { .article-list li div {
display: flex; display: flex;
} }
.post-list li div a { .article-list li div a {
flex-grow: 1; flex-grow: 1;
} }
.postlist-item { .post-list {
margin-bottom: 5rem; display: flex;
flex-wrap: wrap;
gap: 3rem;
} }
.postlist-header h2 { .post-list-item {
max-width: 430px;
padding: 2rem;
box-shadow: 0 2px 12px 0 rgba(1,87,155,.1);
}
.post-list-header h2 {
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.postlist-link { .post-list-link {
flex-basis: calc(100% - 1.5rem); flex-basis: calc(100% - 1.5rem);
padding-right: .5em; padding-right: .5em;
text-decoration: none; text-decoration: none;
} }
.postlist-footer { .post-list-footer {
text-align: right; text-align: right;
} }
@ -267,6 +274,10 @@ figure figcaption {
margin: 0; margin: 0;
} }
.post-list .post-metadata {
flex-direction: column;
}
h1 + .post-metadata { h1 + .post-metadata {
margin: 0 0 4rem; margin: 0 0 4rem;
} }