feat(serie): add a page to list all the articles

Similar to a section page but with adapted style to glue articles even more together.
This commit is contained in:
ZzMzaw 2024-07-26 07:43:16 +02:00
parent e5c8145918
commit 1bee7d426d
5 changed files with 131 additions and 0 deletions

View file

@ -63,6 +63,7 @@ table_of_contents = "Table of Contents"
load_comments = "Load comments"
# Serie.
serie = "SERIE"
page_of_a_serie = "This article is part of the serie: "
# Copy code block button.

View file

@ -63,6 +63,7 @@ table_of_contents = "Table des matières"
load_comments = "Afficher les commentaires"
# Serie.
serie = "SERIE"
page_of_a_serie = "Cet article fait partie de la série : "
# Copy code block button.

View file

@ -41,6 +41,15 @@ ul {
padding-bottom: 8px;
}
.title-label {
margin-right: 0.3rem;
background-color: var(--primary-color);
padding: 2px 4px;
color: var(--hover-color);
font-size: 1rem;
vertical-align: top;
}
.bottom-divider {
border-bottom: var(--divider-color) solid 0.5px;
}

View file

@ -68,6 +68,62 @@
}
}
.serielist-container {
display: grid;
grid-template-columns: 1fr 8fr;
}
.serielist-row {
display: flex;
align-items: flex-start;
background-color: var(--navbar-color);
padding: 1rem 0;
.serielist-meta {
margin-right: 0.7rem;
padding: 0;
color: var(--meta-color);
font-weight: 300;
font-size: 0.9rem;
li {
list-style-type: none;
}
li.draft-label {
width: fit-content;
line-height: 1.2rem;
}
}
.serielist-content {
flex: 1;
.serielist-title {
margin: 0;
font-weight: bold;
font-size: 1.2em;
a {
color: var(--text-color-high-contrast);
font-weight: 550;
&:hover {
color: var(--hover-color);
}
}
}
.description p {
margin: 0.5rem 0 1rem;
color: var(--text-color);
font-weight: 250;
font-size: 0.9rem;
line-height: 1.5rem;
}
}
}
.all-posts {
font-weight: 350;
font-size: 1.3rem;

64
templates/serie.html Normal file
View file

@ -0,0 +1,64 @@
{% extends "base.html" %}
{% block main_content %}
{% if paginator %}
{{ throw (message="Pagination not supported for series: '" ~ section.relative_path ~ "'.") }}
{% endif %}
<main>
{%- if section.extra.header %}
{%- include "partials/home_banner.html" -%}
{% endif -%}
<div id="posts-list">
<div>
<span class="title-label">{{ macros_translate::translate(key="serie", default="SERIE", language_strings=language_strings) }}</span>
{{ macros_page_header::page_header(title=section.title) }}
</div>
<div class="bottom-divider">
{{ section.content | safe }}
</div>
<div class="serielist-container">
{% for post in section.pages | reverse %}
{% if loop.last %}
<section class="serielist-row">
{% else %}
<section class="serielist-row bottom-divider">
{% endif %}
<ul class="serielist-meta">
{{ loop.index }}
{% if post.draft %}
<li class="draft-label">{{ macros_translate::translate(key="draft", default="DRAFT", language_strings=language_strings) }}</li>
{% endif %}
</ul>
</section>
{% if loop.last %}
<section class="serielist-row">
{% else %}
<section class="serielist-row bottom-divider">
{% endif %}
<div class="serielist-content">
<h2 class="serielist-title">
<a href="{{ post.permalink }}">{{ post.title }}</a>
</h2>
<div class="description">
{% if post.description %}
<p>{{ post.description }}</p>
{% elif post.summary %}
<p>{{ post.summary | striptags | trim_end_matches(pat=".") | safe }}…</p>
{% endif %}
</div>
</div>
</section>
{% endfor %}
</div>
</div>
</main>
{% endblock main_content %}