New title style for articles (inspired by gxbs.dev and tesk.page)

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.

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;

templates/article.html

@@ -11,9 +11,9 @@
 		</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) }}
@@ -26,8 +26,20 @@
 							{{ page.updated | date(format=date_format, locale=date_locale) -}}
 						</time>
 					{%- endif -%}
+				</small>
+			</p>
+		{%- endif -%}
+
+		<h1>{{ page.title }}</h1>
+
+		{%- if page.authors or config.extra.show_read_time -%}
+			<p>
+				<small>
 					{%- if page.authors -%}
-				<span> • {% include "partials/authors.html" -%}</span>
+						<span>{% include "partials/authors.html" -%}</span>
+						{%- if config.extra.show_read_time -%}
+							<span> • </span>
+						{%- endif -%}
 					{%- endif -%}
 		
 					{%- if config.extra.show_read_time -%}
@@ -37,12 +49,26 @@
 						{%- 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>
+						{%- 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" -%}
 
 	{{ page.content | safe }}