display tags and categories

_includes/post_list.html

@@ -15,6 +15,7 @@
 		{%- for post in paginator.posts limit: include.limit -%}
 			<div class="post">
 				<h2><a href="{{ post.url | relative_url }}">{{ post.title | smartify }}</a></h2>
+				{%- include tags-categories.html -%}
 				<h3>{{- post.date | date: site.theme_config.date_format -}}</h3>
 				<h4><i>{{ post.author | smartify }}</i> - {{ post.description | smartify }}</h4>
 				<p>{{ post.excerpt | smartify }}</p>

_includes/tags-categories.html

@@ -0,0 +1,10 @@
+<div class="post-categories">
+	{%- for category in post.categories -%}
+		<span>{{ category }}</span>
+	{%- endfor -%}
+</div>
+<div class="post-tags">
+	{%- for tag in post.tags -%}
+		<span>#{{ tag }}</span>
+	{%- endfor -%}
+</div>

_layouts/post.html

@@ -3,6 +3,8 @@
 ---
 
 <h1>{{ page.title | smartify }}</h1>
+{%- assign post = page -%}
+{%- include tags-categories.html -%}
 <sub>{{ page.date | date: site.theme_config.date_format }} - <i>{{ page.author | smartify }}</i></sub>
 
 {{ content | smartify }}

assets/css/style.css

@@ -18,6 +18,7 @@
 
 	--code-bg: #3A3A3A;
 	--code-color: #ccc;
+	--alt-code-color: #ababab;
 
 	--nav-bg: #202020;
 	--nav-link: #9b9b9b;
@@ -394,6 +395,36 @@ pre {
 
 /* ********** */
 
+/* blog posts page */
+
+.post-tags, .post-categories {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-bottom: 4px;
+}
+
+.post-tags>span, .post-categories>span {
+	/*spacing*/
+	margin-bottom: 4px;
+	margin-right: 0.5em;
+
+	/*styling inside padding*/
+	background-color: var(--code-bg);
+	color: var(--alt-code-color);
+	padding: 3px;
+}
+
+.post-tags>span {
+	border-radius: 8px;
+}
+
+.post-categories>span {
+	border-radius: 16px
+}
+
+/* *************** */
+
 
 /* main shit */