fix: remove unused buttons for search and theme switch

content/_index.md

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

content/a-propos.md

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

content/articles/example.md

@@ -4,8 +4,11 @@ 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.
 
@@ -28,7 +31,7 @@ Oechalidum[^second] limus posse.
 
 [^second]: Footnote text.
 
-```c#
+```c#,linenos,name=example.cs
 using System.IO.Compression;
 
 #pragma warning disable 414, 3021

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-index.scss

@@ -0,0 +1,37 @@
+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

@@ -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/parts/_code.scss

@@ -1,4 +1,5 @@
 pre {
+    position: relative;
     font-family: var(--mono-font);
     padding: 1.25rem;
     border-radius: var(--standard-border-radius);
@@ -6,11 +7,45 @@ pre {
     border-color: var(--overlay0);
     border-width: 0.15rem;
     line-height: initial;
-    overflow-x: scroll;
+    overflow: hidden;
+    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

@@ -0,0 +1,9 @@
+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,6 +27,16 @@ 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,6 +2,9 @@
 @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';
@@ -29,14 +32,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,7 +49,12 @@ h1 {
     font-weight: medium;
     margin-top: 2rem;
     margin-bottom: 1rem;
+
+    &.section-title {
+        font-size: 3rem;
     }
+}
+
 
 h2 {
     font-size: 1.5rem;
@@ -90,6 +98,10 @@ h6 {
     h1 {
         font-size: 1.5rem;
         margin-top: 1.3rem;
+
+        &.section-title {
+            font-size: 2.2rem;
+        }
     }
 
     h2 {

templates/about.html

@@ -0,0 +1,12 @@
+{% 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

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

templates/blog.html

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

templates/navbar.html

@@ -1,29 +1,20 @@
 <header>
     <nav>
         <div class="home-title">
-            <a href="{{ get_url(path='/') }}">{{ config.title }}</a>
+            <a href="/">
+                <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="/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">
-                        <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

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

templates/partials/articles-index.html

@@ -0,0 +1,14 @@
+<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

@@ -0,0 +1,18 @@
+<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

@@ -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 %}