feat: add articles section

content/articles/example.md

@@ -6,6 +6,8 @@ updated = 2025-05-13
 authors = ["Ungol"]
 +++
 
+<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/sample.png" alt="test-image" width="500"/>
+
 Cet article est un exemple utilisant du lorem ipsum en markdown pour développer
 et styler les éléments sur une base qui ressemble à un vrai texte. Il contient les éléments d'un article assez complet.
 

sass/parts/_anchor.scss

@@ -8,14 +8,14 @@ h3,
 h4,
 h5,
 h6 {
-    &>a {
+    &>a.zola-anchor {
         visibility: hidden;
         opacity: 0;
         transition: visibility 0s, opacity 0.5s linear;
     }
 
     &:hover {
-        &>a {
+        &>a.zola-anchor {
             visibility: visible;
             opacity: 1;
         }

sass/parts/_articles.scss

@@ -0,0 +1,34 @@
+ul.articles {
+    list-style-type: none;
+    padding-left: 0;
+
+    li {
+        margin-top: 3rem;
+        margin-bottom: 3rem;
+    }
+
+    .title {
+        margin: 0;
+
+        &>a {
+            color: var(--text);
+            text-decoration: none;
+
+            &:visited {
+                color: var(--lavender);
+            }
+
+            &:hover {
+                color: var(--sky);
+            }
+        }
+    }
+
+    .date {
+        color: var(--subtext0);
+    }
+
+    a.read-more {
+        color: var(--overlay1);
+    }
+}

sass/styles.scss

@@ -2,6 +2,7 @@
 @use 'theme';
 @use 'shortcodes/callout';
 @use 'parts/anchor';
+@use 'parts/articles';
 @use 'parts/code';
 @use 'parts/footnote';
 @use 'parts/misc';
@@ -29,14 +30,14 @@ body {
     margin: 0;
 }
 
-article {
+main {
     max-width: calc(var(--main-width) - 12rem);
     margin-left: auto;
     margin-right: auto;
 }
 
 @media only screen and (max-width: $smartphone) {
-    article {
+    main {
         max-width: var(--main-width);
     }
 }
@@ -46,8 +47,13 @@ h1 {
     font-weight: medium;
     margin-top: 2rem;
     margin-bottom: 1rem;
+
+    &.section-title {
+        font-size: 3rem;
+    }
 }
 
+
 h2 {
     font-size: 1.5rem;
     margin-bottom: 1rem;
@@ -90,6 +96,10 @@ h6 {
     h1 {
         font-size: 1.5rem;
         margin-top: 1.3rem;
+
+        &.section-title {
+            font-size: 2.2rem;
+        }
     }
 
     h2 {

templates/anchor-link.html

@@ -1 +0,0 @@
-<a class="zola-anchor" href="#{{ id }}" aria-label="Anchor link for: {{ id }}">#</a>

templates/blog.html

@@ -1,17 +1,23 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1 class="title">
+<h1 class="section-title">
     {{ section.title }}
 </h1>
-<ul>
-    <!-- If you are using pagination, section.pages will be empty.
-       You need to use the paginator object -->
+<ul class="articles">
     {% for page in section.pages %}
     <li>
-        <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
-        {% if page.description %}{{ page.description }}{% endif %}
-        {{ page.summary }}
+        <h2 class="title">
+                <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
+        </h2>
+        <span class="date">
+            <meta itemprop="datePublished" content="{{ page.date | date(format='%+') }}">
+            {{ page.date | date(format='%d %B %Y') }}
+        </span>
+        </p class="description">
+            <span>{{ page.summary | safe }}</span>
+            <span><a class="read-more" href="{{ page.permalink | safe }}">Lire la suite...</a></span>
+        </p>
     </li>
     {% endfor %}
 </ul>

templates/navbar.html

@@ -1,15 +1,15 @@
 <header>
     <nav>
         <div class="home-title">
-            <a href="{{ get_url(path='/') }}">{{ config.title }}</a>
+            <a href="/">{{ config.title }}</a>
         </div>
         <div class="nav-bar">
             <ul class="nav-links">
                 <li>
-                    <a href="/articles">Articles</a>
+                    <a href="{{ get_url(path='@/articles/_index.md') }}">Articles</a>
                 </li>
                 <li>
-                    <a href="/a-propos">À propos</a>
+                    <a href="{{ get_url(path='@/a-propos.md') }}">À propos</a>
                 </li>
                 <li class="menu-icons-container">
                     <ul class="menu-icons-group">

templates/partials/anchor-link.html

@@ -0,0 +1 @@
+<a class="zola-anchor" href="#{{ id }}">#</a>

templates/test.html

@@ -1,9 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-<h1 class="title">
-    {{ page.title }}
-</h1>
-<p class="subtitle"><strong>{{ page.date }}</strong></p>
-{{ page.content | safe }}
-{% endblock content %}