articles.html

---
layout: page
title: Articles
permalink: /articles/
order: 2
background: mountains5.webp
categories:
  - title: Git
    slug: git
    background: monolith0.webp
  - title: Langage C++
    slug: c++
    background: cavern2.webp
  - title: Langage CSS
    slug: css
    background: mountains1.jpg
---

<header class="text-center">
	<h2><span class="rounded-card">Articles par catégories</span></h2>

	<div class="container">
		<section class="category-cards">
		{% for category in page.categories %}
			{% assign nbArticles = site.articles | where: "category", category.slug | size %}
			<a href="/articles/{{ category.slug }}" class="card{% if nbArticles == 0 %} no-articles{% endif %}" style="--card-background-image: url('/assets/images/backgrounds/{{ category.background }}');">
				<img src="/assets/images/logos/{{ category.slug }}.svg" alt="{{ category.title }}" class="logo">
				<h3 class="text-center">{{ category.title }}</h3>
			</a>
		{% endfor %}
		</section>
	</div>
</header>

<div class="container">

	<h2 class="text-center"><span class="rounded-card">Tous les articles</span></h2>

	<section class="article-cards">
		{% for article in site.articles %}
			<a href="{{ article.url }}" class="card">
				<header{% if article.background != "" %} style="--background-image: url('/assets/images/backgrounds/{{ article.background }}');"{% endif %}>
					<h2>{{ article.title }}</h2>
					<img src="/assets/images/logos/{{ article.logo }}">
				</header>
				<div>{{ article.excerpt }}</div>
			</a>
		{% endfor %}
	</section>

</div>