<div class="c-slider">
<div class="o-container o-container--large c-slider__container">
<div class="c-slider__container-left">
<h2 class="c-slider__heading">Projets</h2>
<div class="c-slider__sidebar" aria-hidden="true">
<ul class="c-slider__sidebar-list">
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Dolores inventore voluptatem.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Expedita illo quisquam enim est esse est qui voluptas velit.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Molestiae omnis consequatur illum ex repellendus ut quia.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Nobis molestiae soluta quos dolorum asperiores incidunt qui vel cupiditate.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Et voluptas cupiditate voluptatibus qui rem enim ut qui cum.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Harum ut et reprehenderit odit optio cum illo nostrum.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Vel in numquam voluptatem.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Quaerat recusandae et.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Officiis et ut quos minima et adipisci ipsa qui.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Sequi quisquam accusantium quaerat.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Nemo ut quis.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Quam ullam numquam iure harum numquam.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Distinctio aspernatur quam autem ut quis aspernatur earum totam maiores.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Cupiditate adipisci velit voluptatem ut officiis quasi et labore nulla.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Non amet est.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Quidem quam incidunt aut quisquam qui.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Reiciendis delectus nisi dolorem.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Vitae culpa dolor animi occaecati velit et numquam quibusdam dignissimos.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Reprehenderit vero minus dicta qui.</a>
</li>
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">Ut omnis unde iste quia error similique molestias sint architecto.</a>
</li>
</ul>
</div>
<!-- /.c-slider__sidebar -->
</div>
<!-- /.c-slider__container-left -->
<ul class="c-slider__container-right c-slider__list">
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Dolores inventore voluptatem.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>27 juillet 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500/640x480" alt="magni quis et" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Expedita illo quisquam enim est esse est qui voluptas velit.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>3 mai 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?Meadow/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?Meadow/640x480" alt="ratione veniam et" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Molestiae omnis consequatur illum ex repellendus ut quia.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>21 avril 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?Plastic/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?Plastic/640x480" alt="et assumenda debitis" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Nobis molestiae soluta quos dolorum asperiores incidunt qui vel cupiditate.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>6 novembre 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?solid/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?solid/640x480" alt="consequatur ut quasi" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Et voluptas cupiditate voluptatibus qui rem enim ut qui cum.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>11 mai 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?XSS/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?XSS/640x480" alt="deleniti dignissimos qui" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Harum ut et reprehenderit odit optio cum illo nostrum.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>12 janvier 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?RSS/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?RSS/640x480" alt="ut eos sed" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Vel in numquam voluptatem.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>17 septembre 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?lime/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?lime/640x480" alt="sit a error" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Quaerat recusandae et.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>12 janvier 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?Bedfordshire/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?Bedfordshire/640x480" alt="aut eveniet non" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Officiis et ut quos minima et adipisci ipsa qui.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>14 octobre 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?Global/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?Global/640x480" alt="qui aut voluptate" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Sequi quisquam accusantium quaerat.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>23 mai 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500/640x480" alt="et dolorem perspiciatis" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Nemo ut quis.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>28 octobre 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?Minnesota/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?Minnesota/640x480" alt="possimus quibusdam modi" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Quam ullam numquam iure harum numquam.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>26 mars 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500/640x480" alt="aut qui libero" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Distinctio aspernatur quam autem ut quis aspernatur earum totam maiores.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>15 août 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?Steel/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?Steel/640x480" alt="ipsa dolores placeat" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Cupiditate adipisci velit voluptatem ut officiis quasi et labore nulla.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>7 novembre 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?Jewelery/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?Jewelery/640x480" alt="mollitia sunt nisi" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Non amet est.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>3 mai 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?bus/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?bus/640x480" alt="est rerum commodi" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Quidem quam incidunt aut quisquam qui.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>5 janvier 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?application/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?application/640x480" alt="assumenda voluptatem dolorem" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Reiciendis delectus nisi dolorem.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>8 décembre 2022
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500/640x480" alt="quos quos sequi" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Vitae culpa dolor animi occaecati velit et numquam quibusdam dignissimos.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>14 avril 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?5th/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?5th/640x480" alt="sint qui ut" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Reprehenderit vero minus dicta qui.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>5 avril 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?SMS/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?SMS/640x480" alt="minus dolorem accusantium" />
</figure>
</article>
</li>
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">Ut omnis unde iste quia error similique molestias sint architecto.</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>28 octobre 2023
</div>
<a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
<path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
<figure class="c-slider__article-figure" style="background-image: url('https://source.unsplash.com/500x500?Montserrat/640x480');">
<img class="c-slider__article-image" src="https://source.unsplash.com/500x500?Montserrat/640x480" alt="eligendi ipsam quidem" />
</figure>
</article>
</li>
</ul>
</div>
<!-- /.c-slider__container -->
</div>
<!-- /.c-slider -->
<div class="c-slider">
<div class="o-container o-container--large c-slider__container">
<div class="c-slider__container-left">
<h2 class="c-slider__heading">{{ title }}</h2>
<div class="c-slider__sidebar" aria-hidden="true">
<ul class="c-slider__sidebar-list">
{% for article in articles %}
<li class="c-slider__sidebar-list-item">
<a href="#nowhere">{{ article.title }}</a>
</li>
{% endfor %}
</ul>
</div>
<!-- /.c-slider__sidebar -->
</div>
<!-- /.c-slider__container-left -->
{% if articles %}
<ul class="c-slider__container-right c-slider__list">
{% for article in articles %}
<li class="c-slider__list-item">
<article class="c-slider__article">
<div class="c-slider__article-text-container">
<h3 class="c-slider__article-heading">{{ article.title }}</h3>
<div class="c-slider__article-date">
<span class="u-visually-hidden">Date:</span>{{ article.date }}
</div>
{% render '@button--transparent-alternate-arrow-right',
{styleModifier: 'c-slider__article-button', text: 'lire la suite'},
true %}
</div>
<figure
class="c-slider__article-figure"
style="background-image: url('{{ article.image.src }}/640x480');"
>
<img
class="c-slider__article-image"
src="{{ article.image.src }}/640x480"
alt="{{ article.image.alt }}"
/>
</figure>
</article>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
<!-- /.c-slider__container -->
</div>
<!-- /.c-slider -->
{
"title": "Projets",
"articles": [
{
"title": "Dolores inventore voluptatem.",
"url": "http://rickey.net",
"date": "27 juillet 2023",
"image": {
"src": "https://source.unsplash.com/500x500",
"alt": "magni quis et"
}
},
{
"title": "Expedita illo quisquam enim est esse est qui voluptas velit.",
"url": "http://darius.info",
"date": "3 mai 2023",
"image": {
"src": "https://source.unsplash.com/500x500?Meadow",
"alt": "ratione veniam et"
}
},
{
"title": "Molestiae omnis consequatur illum ex repellendus ut quia.",
"url": "https://leslie.com",
"date": "21 avril 2023",
"image": {
"src": "https://source.unsplash.com/500x500?Plastic",
"alt": "et assumenda debitis"
}
},
{
"title": "Nobis molestiae soluta quos dolorum asperiores incidunt qui vel cupiditate.",
"url": "http://lexus.biz",
"date": "6 novembre 2023",
"image": {
"src": "https://source.unsplash.com/500x500?solid",
"alt": "consequatur ut quasi"
}
},
{
"title": "Et voluptas cupiditate voluptatibus qui rem enim ut qui cum.",
"url": "https://fidel.biz",
"date": "11 mai 2023",
"image": {
"src": "https://source.unsplash.com/500x500?XSS",
"alt": "deleniti dignissimos qui"
}
},
{
"title": "Harum ut et reprehenderit odit optio cum illo nostrum.",
"url": "http://drew.com",
"date": "12 janvier 2023",
"image": {
"src": "https://source.unsplash.com/500x500?RSS",
"alt": "ut eos sed"
}
},
{
"title": "Vel in numquam voluptatem.",
"url": "http://margarita.info",
"date": "17 septembre 2023",
"image": {
"src": "https://source.unsplash.com/500x500?lime",
"alt": "sit a error"
}
},
{
"title": "Quaerat recusandae et.",
"url": "https://treva.org",
"date": "12 janvier 2023",
"image": {
"src": "https://source.unsplash.com/500x500?Bedfordshire",
"alt": "aut eveniet non"
}
},
{
"title": "Officiis et ut quos minima et adipisci ipsa qui.",
"url": "https://zola.org",
"date": "14 octobre 2023",
"image": {
"src": "https://source.unsplash.com/500x500?Global",
"alt": "qui aut voluptate"
}
},
{
"title": "Sequi quisquam accusantium quaerat.",
"url": "http://mollie.biz",
"date": "23 mai 2023",
"image": {
"src": "https://source.unsplash.com/500x500",
"alt": "et dolorem perspiciatis"
}
},
{
"title": "Nemo ut quis.",
"url": "http://brennon.name",
"date": "28 octobre 2023",
"image": {
"src": "https://source.unsplash.com/500x500?Minnesota",
"alt": "possimus quibusdam modi"
}
},
{
"title": "Quam ullam numquam iure harum numquam.",
"url": "http://charity.info",
"date": "26 mars 2023",
"image": {
"src": "https://source.unsplash.com/500x500",
"alt": "aut qui libero"
}
},
{
"title": "Distinctio aspernatur quam autem ut quis aspernatur earum totam maiores.",
"url": "http://kiarra.net",
"date": "15 août 2023",
"image": {
"src": "https://source.unsplash.com/500x500?Steel",
"alt": "ipsa dolores placeat"
}
},
{
"title": "Cupiditate adipisci velit voluptatem ut officiis quasi et labore nulla.",
"url": "http://gust.info",
"date": "7 novembre 2023",
"image": {
"src": "https://source.unsplash.com/500x500?Jewelery",
"alt": "mollitia sunt nisi"
}
},
{
"title": "Non amet est.",
"url": "https://griffin.net",
"date": "3 mai 2023",
"image": {
"src": "https://source.unsplash.com/500x500?bus",
"alt": "est rerum commodi"
}
},
{
"title": "Quidem quam incidunt aut quisquam qui.",
"url": "http://danielle.name",
"date": "5 janvier 2023",
"image": {
"src": "https://source.unsplash.com/500x500?application",
"alt": "assumenda voluptatem dolorem"
}
},
{
"title": "Reiciendis delectus nisi dolorem.",
"url": "http://rosalind.name",
"date": "8 décembre 2022",
"image": {
"src": "https://source.unsplash.com/500x500",
"alt": "quos quos sequi"
}
},
{
"title": "Vitae culpa dolor animi occaecati velit et numquam quibusdam dignissimos.",
"url": "https://chester.net",
"date": "14 avril 2023",
"image": {
"src": "https://source.unsplash.com/500x500?5th",
"alt": "sint qui ut"
}
},
{
"title": "Reprehenderit vero minus dicta qui.",
"url": "http://brooklyn.org",
"date": "5 avril 2023",
"image": {
"src": "https://source.unsplash.com/500x500?SMS",
"alt": "minus dolorem accusantium"
}
},
{
"title": "Ut omnis unde iste quia error similique molestias sint architecto.",
"url": "http://wilma.com",
"date": "28 octobre 2023",
"image": {
"src": "https://source.unsplash.com/500x500?Montserrat",
"alt": "eligendi ipsam quidem"
}
}
]
}
/* ======================================================================
# _components.slider.css
====================================================================== */
/***
* 1. Prevent the page for being the same width as the overflow element on iOS/Safari
* 2. Calculate the margin to align the first element of the list with the container. Those values should be map with `.o-container--large`
* 3. Make the list item 100% of the screen to make the item scroll side to side
* FIXME: Have to do a media query because 100vw != 100%
* 4. Calculate the margin to align the first element of the list with the container
* when not on two columns
* 5. FIXME: margin-right on the last element is not applied
* 6. Reorder article item's figure and text element vertically
* 7. Reorder article item's text vertically to put the date first
*/
.c-slider {
@apply
bg-primary
py-16
h-screen
overflow-x-hidden
relative /* [1] */
;
min-height: 40rem;
max-height: 64rem;
}
.c-slider__container {
@apply
h-full
;
@screen lg {
@apply
flex
flex-row
;
}
}
.c-slider__container-left {
@screen lg {
flex: 1;
}
}
.c-slider__container-right {
@screen lg {
flex: 3;
}
@screen xl {
flex: 4;
}
}
/* -----------------------------------
# Heading
----------------------------------- */
.c-slider__heading {
@extend %h1;
@apply
text-white
mb-8
;
}
/* -------------------------------------
# Sidebar
------------------------------------- */
.c-slider__sidebar {
@extend %scrollbar;
@apply
hidden
;
@screen lg {
@apply
block
overflow-y-auto
mr-8
pr-8
;
max-height: calc(100% - 9rem);
}
}
.c-slider__sidebar-list {
@apply
mb-4
;
}
.c-slider__sidebar-list-item {
@extend %caption;
@apply
text-primary-200
mb-4
;
max-width: 20ch;
}
/* -----------------------------------
# List
----------------------------------- */
.c-slider__list {
@extend %scrollbar;
@apply
flex
flex-row
overflow-x-auto
mb-16
h-full
;
margin: auto calc(var(--c-slider__margin) * -1); /* [3] */
@screen md {
margin:
auto
calc(
calc(
calc(
calc(
100vw - var(--c-slider__container-width)
)
/
2
)
+
var(--c-slider__margin)
)
*
-1
); /* [3] */
}
@screen lg {
@apply
ml-0
mt-0
mb-0
;
}
}
/* -----------------------------------
# List item
----------------------------------- */
.c-slider__list-item {
@apply
max-w-md
mr-4
;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 75vw;
}
.c-slider__list .c-slider__list-item:first-child {
margin-left: calc(calc(100% - var(--c-slider__container-width)) / 2 + var(--c-slider__margin)); /* [4] */
@screen lg {
@apply
ml-0 /* [4] */
;
}
}
/* .c-slider__list .c-slider__list-item:last-child::after {
content: "coucou";
padding-right: calc( calc(100% - var(--c-slider__container-width)) / 2 + var(--c-slider__margin));
} */ /* [5] */
/* -----------------------------------
# Article
----------------------------------- */
.c-slider__article {
@apply
flex /* [1] */
flex-col /* [1] */
;
height: calc(100% - 4rem);
}
.c-slider__article-text-container {
@apply
flex /* [7] */
flex-col /* [7] */
;
@screen md {
@apply
border-l
border-white
pl-4
;
}
}
.c-slider__article-heading {
@extend %h3;
@apply
text-white
flex-initial
;
}
.c-slider__article-date {
@extend %caption;
@apply
order-first /* [7] */
text-primary-100
flex-initial
mb-1
;
}
.c-slider__article-button {
@apply
text-white
flex-initial
;
}
.c-slider__article-figure {
@apply
order-first /* [6] */
bg-primary-800
bg-cover
bg-center
rounded
mb-2
flex-1
;
}
.c-slider__article-image {
@apply
sr-only
;
}
No notes defined.