content/_index.md

@@ -1,3 +0,0 @@
-+++
-title = "Accueil"
-+++

content/a-propos.md

@@ -1,6 +0,0 @@
-+++
-title = "À propos"
-template = "about.html"
-+++
-
-A propos de ce site

content/articles/example.md

@@ -4,11 +4,8 @@ description = "A quoi ça ressemble un article ?"
 date = 2025-03-27
 updated = 2025-05-13
 authors = ["Ungol"]
-draft = true
 +++
 
-<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.
 
@@ -31,7 +28,7 @@ Oechalidum[^second] limus posse.
 
 [^second]: Footnote text.
 
-```c#,linenos,name=example.cs
+```c#
 using System.IO.Compression;
 
 #pragma warning disable 414, 3021

sass/parts/_anchor.scss

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

sass/parts/_articles-index.scss

@@ -1,37 +0,0 @@
-ul.articles-index {
-    list-style-type: none;
-    padding-left: 0;
-
-    li {
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-    }
-
-    .title {
-        margin: 0;
-
-        &>a {
-            color: var(--text);
-            text-decoration: none;
-            font-weight: bold;
-
-            &:visited {
-                color: var(--lavender);
-            }
-
-            &:hover {
-                color: var(--sky);
-            }
-        }
-
-        &::before {
-            content: "-";
-            margin-left: .5rem;
-            margin-right: .5rem;
-        }
-    }
-
-    .date {
-        color: var(--subtext0);
-    }
-}

sass/parts/_articles.scss

@@ -1,34 +0,0 @@
-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/parts/_code.scss

@@ -1,5 +1,4 @@
 pre {
-    position: relative;
     font-family: var(--mono-font);
     padding: 1.25rem;
     border-radius: var(--standard-border-radius);
@@ -7,45 +6,11 @@ pre {
     border-color: var(--overlay0);
     border-width: 0.15rem;
     line-height: initial;
-    overflow: hidden;
+    overflow-x: scroll;
-    overflow-x: auto;
 
     &>code {
         background-color: initial;
         border: initial;
-        padding: 0;
-    }
-
-    &[data-linenos] {
-        padding: 1.25rem 0;
-    }
-
-    table {
-        width: 100%;
-        border-collapse: collapse;
-        margin: 0;
-
-        th,
-        td,
-        tr {
-            border: none;
-            padding: 0
-        }
-
-        td:nth-of-type(1) {
-            text-align: center;
-            vertical-align: top;
-            user-select: none;
-            color: var(--overlay1);
-        }
-
-        tr:nth-child(even) td {
-            background-color: inherit;
-        }
-    }
-
-    mark {
-        display: block;
     }
 }
 

sass/parts/_index.scss

@@ -1,9 +0,0 @@
-section.last-articles {
-    margin-top: 4rem;
-
-    h1 {
-        border-bottom-width: .1rem;
-        border-bottom-style: solid;
-        border-bottom-color: var(--surface0);
-    }
-}

sass/parts/_navbar.scss

@@ -27,16 +27,6 @@ nav {
         font-weight: 100;
         text-transform: uppercase;
         @include link(var(--text), var(--text));
-
-        picture {
-            img {
-                max-height: 5rem;
-                display: inline;
-                vertical-align: middle;
-                margin-top: .5rem;
-                margin-bottom: .5rem;
-            }
-        }
     }
 
     .nav-bar {

sass/shortcodes/_callout.scss

@@ -67,7 +67,7 @@
     @include callout_customization("success", "--green", "");
     @include callout_customization("warning", "--yellow", "");
     @include callout_customization("danger", "--red", "󰈸");
-    @include callout_customization("error", "--red", "");
+    @include callout-customization("error", "--red", "");
     @include callout_customization("tip", "--teal", "󰌵");
     @include callout_customization("note", "--lavender", "");
     @include callout_customization("question", "--sky", "");

sass/styles.scss

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

templates/about.html

@@ -1,12 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-<h1 class="section-title">
-    {{ page.title }}
-</h1>
-<article>
-    <section>
-        {{ page.content | safe }}
-    </section>
-</article>
-{% endblock content %}

templates/anchor-link.html

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

templates/blog.html

@@ -1,8 +1,18 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1 class="section-title">
+<h1 class="title">
     {{ section.title }}
 </h1>
-{%- include "partials/articles.html" -%}
+<ul>
+    <!-- If you are using pagination, section.pages will be empty.
+       You need to use the paginator object -->
+    {% for page in section.pages %}
+    <li>
+        <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
+        {% if page.description %}{{ page.description }}{% endif %}
+        {{ page.summary }}
+    </li>
+    {% endfor %}
+</ul>
 {% endblock content %}

templates/index.html

@@ -1,12 +1,8 @@
 {% extends "base.html" %}
 
 {% block content %}
-<section class="intro">
+<h1 class="title">
-{{ section.content | safe }}
+    This is my blog made with Zola.
-</section>
+</h1>
-<section class="last-articles">
+<p><a href="{{ get_url(path='@/articles/_index.md') }}">Posts</a>.</p>
-<h1>Derniers articles</h1>
-{%- set section = get_section(path="articles/_index.md") -%}
-{%- include "partials/articles-index.html" -%}
-</section>
 {% endblock content %}

templates/navbar.html

@@ -1,20 +1,29 @@
 <header>
     <nav>
         <div class="home-title">
-            <a href="/">
+            <a href="{{ get_url(path='/') }}">{{ config.title }}</a>
-                <picture>
-                    <source srcset="/logos/banniere-dark.svg" media="(prefers-color-scheme: dark)">
-                    <img src="/logos/banniere-light.svg">
-                </picture>
-            </a>
         </div>
         <div class="nav-bar">
             <ul class="nav-links">
                 <li>
-                    <a href="{{ get_url(path='@/articles/_index.md') }}">Articles</a>
+                    <a href="/articles">Articles</a>
                 </li>
                 <li>
-                    <a href="{{ get_url(path='@/a-propos.md') }}">À propos</a>
+                    <a href="/a-propos">À propos</a>
+                </li>
+                <li class="menu-icons-container">
+                    <ul class="menu-icons-group">
+                        <li>
+                            <div role="button" class="search-button menu-icon">
+                                <span></span>
+                            </div>
+                        </li>
+                        <li>
+                            <div role="button" class="theme-switch-button menu-icon">
+                                <span>󰔎</span>
+                            </div>
+                        </li>
+                    </ul>
                 </li>
             </ul>
         </div>

templates/partials/anchor-link.html

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

templates/partials/articles-index.html

@@ -1,14 +0,0 @@
-<ul class="articles-index">
-    {% for page in section.pages %}
-    {%- if max_articles is defined and loop.index > max_articles -%}{%- break -%}{%- endif -%}
-    <li>
-        <span class="date">
-            <meta itemprop="datePublished" content="{{ page.date | date(format='%+') }}">
-            {{ page.date | date(format='%Y-%m-%d') }}
-        </span>
-        <span class="title">
-                <a href="{{ page.permalink }}">{{ page.title }}</a>
-        </span>
-    </li>
-    {% endfor %}
-</ul>

templates/partials/articles.html

@@ -1,18 +0,0 @@
-<ul class="articles">
-    {% for page in section.pages %}
-    {%- if max_articles is defined and loop.index > max_articles -%}{%- break -%}{%- endif -%}
-    <li>
-        <h2 class="title">
-                <a href="{{ page.permalink }}">{{ 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 }}">Lire la suite...</a></span>
-        </p>
-    </li>
-    {% endfor %}
-</ul>

templates/test.html

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