cmc/cleberg.net

My personal web garden & blog.

clone: git clone https://gitbay.org/cmc/cleberg.net.git

848d7c4742ce0a4fcf75190f44ce57870bee8aa9

unsigned

author: Christian Cleberg <hello@cleberg.net> · 2025-06-03T21:21:27Z

feat(blog): show filetags on blog roll

 theme/static/styles.css   | 27 +++++++++++++++++++++++++++
 theme/templates/blog.html | 11 ++++++++++-
 theme/templates/post.html |  2 +-
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/theme/static/styles.css b/theme/static/styles.css
index 54e34ed..d21b23f 100644
--- a/theme/static/styles.css
+++ b/theme/static/styles.css
@@ -525,6 +525,33 @@ span.tag::before {
     display: none;
 }
 
+.post {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 1rem;
+}
+
+.post-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.post-tags {
+  font-size: 0.75rem;
+  color: #999;
+  margin-top: 0.1rem;
+}
+
+.tag {
+  margin-right: 0.3rem;
+  font-style: normal;
+  opacity: 0.8;
+}
+
+.tag::before {
+  content: "#";
+}
+
 @media (prefers-color-scheme: dark) {
     :root {
         --bg: #141617;
diff --git a/theme/templates/blog.html b/theme/templates/blog.html
index aa2566c..ff09d37 100644
--- a/theme/templates/blog.html
+++ b/theme/templates/blog.html
@@ -13,6 +13,15 @@ main %}
 	<time datetime='{{ post.date | strftime("%Y-%m-%d") }}'
 		>{{ post.date|strftime("%Y-%m-%d") }}</time
 	>
-	<a href='{{ url_for("blog", slug=post.slug) }}'>{{ post.title }}</a>
+	<div class="post-content">
+		<a href='{{ url_for("blog", slug=post.slug) }}'>{{ post.title }}</a>
+		{% if post.filetags %}
+			<div class="post-tags">
+			{% for tag in post.filetags %}
+				<span class="tag">{{ tag }}</span>
+			{% endfor %}
+			</div>
+		{% endif %}
+	</div>
 </div>
 {% endfor %} {% endblock %}
diff --git a/theme/templates/post.html b/theme/templates/post.html
index fe38bc1..b7f059d 100644
--- a/theme/templates/post.html
+++ b/theme/templates/post.html
@@ -15,7 +15,7 @@
 			>&lt;{{ post.date|strftime("%Y-%m-%d %a %H:%M:%S") }}&gt;</time
 		>
 		{% endif %} {% if post.filetags %}
-		<p class="tags">
+		<p class="post-tags">
 			{% for tag in post.filetags %}
 			<span class="tag">{{ tag }}</span>
 			{% endfor %}