Work on the sparkline [SKIP CI]

sass/_sparkline.scss

@@ -0,0 +1,22 @@
+.sparkline {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-end;
+	float: inline-end;
+	gap: 0.25rem;
+	margin: 1rem 0;
+	width: 6rem;
+	height: 2rem;
+
+	div {
+		flex: 1;
+		transform-origin: bottom;
+		transition: var(--transition);
+		background-image: linear-gradient(to top, var(--accent-color) var(--bar-height), transparent var(--bar-height));
+		height: 100%;
+
+		&:hover {
+			height: 200%;
+		}
+	}
+}

sass/style.scss

@@ -29,6 +29,7 @@
 @use "not-found";
 @use "post-nav";
 @use "pre-container";
+@use "sparkline";
 @use "spoiler";
 @use "statements";
 @use "table";

templates/article_list.html

@@ -14,6 +14,22 @@
 
 {{ section.content | safe }}
 
+{# <div class="sparkline">
+	{%- if paginator.pages -%}
+		{%- set pages = paginator.pages -%}
+	{%- elif section.pages -%}
+		{%- set pages = section.pages -%}
+	{%- else -%}
+		{%- set pages = term.pages -%}
+	{%- endif -%}
+
+	{%- for month, pages in pages | group_by(attribute="month") -%}
+		{%- set posts_per_bar = pages | length -%}
+		{%- set bar_height = pages | length * 10 -%}
+		<div style="--bar-height: {{ bar_height ~ '%' }}" title="{{ macros_translate::translate(key='posts', number=posts_per_bar, default='$NUMBER posts in total', language_strings=language_strings) }}"></div>
+	{%- endfor -%}
+</div> #}
+
 <p>
 	<small>
 		{%- if config.taxonomies | length > 0 -%}
@@ -22,7 +38,7 @@
 			</a>
 			<br />
 		{%- endif %}
-		{{ macros_translate::translate(key="posts", number=number_of_posts, default="$NUMBER posts", language_strings=language_strings) }}
+		{{ macros_translate::translate(key="posts", number=number_of_posts, default="$NUMBER posts in total", language_strings=language_strings) }}
 	</small>
 </p>