From 3f6c6486f3df74bafc809e05318fe386f242e3e0 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Wed, 25 Sep 2024 06:02:19 +0300
Subject: [PATCH] New title style for articles (inspired by gxbs.dev and
 tesk.page)

---
 CHANGELOG.md           |  2 +
 sass/_article.scss     | 26 ++++++++++++-
 templates/article.html | 84 +++++++++++++++++++++++++++---------------
 3 files changed, 81 insertions(+), 31 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ef98c7a..3db4a2b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,9 +10,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add `closable` class for making `details` closable when other `details` is open/outside area is clicked.
+- Add post tags back to `article.html`
 
 ### Changed
 
+- Center the title in `article.html` pages.
 - Change "From newest to oldest" in the article list to total amount of posts (#85).
 - Convert code block header to a flexbox.
 - Get rid of dashed outline on article hover in article list.
diff --git a/sass/_article.scss b/sass/_article.scss
index 86fe370..afc517f 100644
--- a/sass/_article.scss
+++ b/sass/_article.scss
@@ -17,7 +17,7 @@
 		inset-inline-start: 0;
 	}
 
-	& + h1 {
+	& + #heading {
 		margin-block-start: 35vw;
 	}
 
@@ -26,12 +26,34 @@
 			margin-block-start: 50vw;
 		}
 
-		& + h1 {
+		& + #heading {
 			margin-block-start: 2rem;
 		}
 	}
 }
 
+#heading {
+	margin: 2rem 0 1rem;
+	text-align: center;
+
+	h1 {
+		margin: 0;
+		background-image: linear-gradient(to right, var(--fg-muted-4), var(--fg-color), var(--fg-muted-4));
+		background-clip: text;
+		color: transparent;
+
+		& + p {
+			display: inline;
+		}
+	}
+
+	.tags {
+		display: inline-flex;
+		justify-content: center;
+		margin-block-start: 1rem;
+	}
+}
+
 #buttons-container {
 	display: flex;
 	position: fixed;
diff --git a/templates/article.html b/templates/article.html
index bf78896..15d3155 100644
--- a/templates/article.html
+++ b/templates/article.html
@@ -11,37 +11,63 @@
 		</div>
 	{%- endif -%}
 
-	<h1>{{ page.title }}</h1>
+	<div id="heading">
+		{%- if page.date -%}
+			<p>
+				<small>
+					<time datetime="{{ page.date | date(format=' %+') }}">
+						{{- macros_translate::translate(key="published", default="Published on", language_strings=language_strings) }}
+						{{ page.date | date(format=date_format, locale=date_locale) -}}
+					</time>
+					{%- if page.updated -%}
+						<span> • </span>
+						<time datetime="{{ page.updated | date(format=' %+') }}">
+							{{- macros_translate::translate(key="updated", default="Updated on", language_strings=language_strings) }}
+							{{ page.updated | date(format=date_format, locale=date_locale) -}}
+						</time>
+					{%- endif -%}
+				</small>
+			</p>
+		{%- endif -%}
 
-	{%- if page.date -%}
-		<small>
-			<time datetime="{{ page.date | date(format=' %+') }}">
-				{{- macros_translate::translate(key="published", default="Published on", language_strings=language_strings) }}
-				{{ page.date | date(format=date_format, locale=date_locale) -}}
-			</time>
-			{%- if page.updated -%}
-				<span> • </span>
-				<time datetime="{{ page.updated | date(format=' %+') }}">
-					{{- macros_translate::translate(key="updated", default="Updated on", language_strings=language_strings) }}
-					{{ page.updated | date(format=date_format, locale=date_locale) -}}
-				</time>
-			{%- endif -%}
-			{%- if page.authors -%}
-				<span> • {% include "partials/authors.html" -%}</span>
-			{%- endif -%}
+		<h1>{{ page.title }}</h1>
 
-			{%- if config.extra.show_read_time -%}
-				{%- set words = page.content | striptags | safe | wordcount -%}
-				{%- set words_per_minute = config.extra.words_per_minute | default(value=200) -%}
-				{%- set number_of_minutes = words / words_per_minute | round -%}
-				{%- if number_of_minutes == 0 -%}
-					{%- set number_of_minutes = 1 -%}
-				{%- endif -%}
-					<span> • </span>
-					<span>{{ macros_translate::translate(key="minutes_read", number=number_of_minutes, default="$NUMBER minute read", language_strings=language_strings) }}</span>
-			{%- endif -%}
-		</small>
-	{%- endif -%}
+		{%- if page.authors or config.extra.show_read_time -%}
+			<p>
+				<small>
+					{%- if page.authors -%}
+						<span>{% include "partials/authors.html" -%}</span>
+						{%- if config.extra.show_read_time -%}
+							<span> • </span>
+						{%- endif -%}
+					{%- endif -%}
+		
+					{%- if config.extra.show_read_time -%}
+						{%- set words = page.content | striptags | safe | wordcount -%}
+						{%- set words_per_minute = config.extra.words_per_minute | default(value=200) -%}
+						{%- set number_of_minutes = words / words_per_minute | round -%}
+						{%- if number_of_minutes == 0 -%}
+							{%- set number_of_minutes = 1 -%}
+						{%- endif -%}
+						<span>{{ macros_translate::translate(key="minutes_read", number=number_of_minutes, default="$NUMBER minute read", language_strings=language_strings) }}</span>
+						{%- if page.taxonomies -%}
+							<span> • </span>
+						{%- endif -%}
+					{%- endif -%}
+				</small>
+			</p>
+		{%- endif -%}
+
+		{%- if page.taxonomies -%}
+			{%- for name, taxon in page.taxonomies %}
+				<ul class="tags">
+					{%-for item in taxon -%}
+						<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
+					{%- endfor %}
+				</ul>
+			{%- endfor -%}
+		{%- endif %}
+	</div>
 
 	{%- include "partials/statements.html" -%}