From efe3c23c67db176fafa63817b070ad578f14bdb0 Mon Sep 17 00:00:00 2001
From: Konstantin Kostov <konstantin@headbright.be>
Date: Sat, 23 Mar 2024 15:35:03 +0100
Subject: [PATCH] layout tweaks

---
 blog/templates/blog/blog_index_page.html | 11 +++++-----
 blog/templates/blog/blog_page.html       | 27 ++++++++++++++++--------
 iamkonstantin_web/templates/base.html    |  5 -----
 theme/static_src/src/styles.css          |  2 +-
 4 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/blog/templates/blog/blog_index_page.html b/blog/templates/blog/blog_index_page.html
index caf9b99..72f698a 100644
--- a/blog/templates/blog/blog_index_page.html
+++ b/blog/templates/blog/blog_index_page.html
@@ -12,11 +12,11 @@
                 <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ page.title }}</h2>
                 <div class="mt-2 text-lg leading-8">{{ page.intro|richtext }}</div>
 
-                <div class="mt-16 space-y-20 lg:mt-20 lg:space-y-20 blog-pages">
+                <div class="mt-16 space-y-20 lg:mt-20 blog-pages">
                     {% for post in blogpages %}
                         {% with post=post.specific %}
-                            <article class="relative isolate flex flex-col gap-8 lg:flex-row">
-                                <div class="relative aspect-[16/9] lg:w-64 lg:shrink-0">
+                            <article class="relative isolate flex flex-col gap-8">
+                                <div class="relative aspect-[16/9]">
                                     {% with post.main_image as main_image %}
                                         {% if main_image %}
                                             {% image main_image width-800 class="blog absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover" %}{% endif %}
@@ -33,8 +33,9 @@
                                                     <h3 class="sr-only">Tags</h3>
                                                     <ul class="flex">
                                                         {% for tag in tags %}
-                                                            <li>
-                                                                <a href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
+                                                            <li class="space-x-2"><span class="emoji">🏷️</span>
+                                                                <a class="pr-2"
+                                                                   href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
                                                             </li>
                                                         {% endfor %}
                                                     </ul>
diff --git a/blog/templates/blog/blog_page.html b/blog/templates/blog/blog_page.html
index 79a3b42..f2123d0 100644
--- a/blog/templates/blog/blog_page.html
+++ b/blog/templates/blog/blog_page.html
@@ -22,7 +22,11 @@
                                         </div>
                                         <div class="ml-3">
                                             <p class="text-sm font-medium m-0"> {{ author.name }}</p>
-                                            <p class="space-x-2 m-0 mt-1 text-left"><span class="emoji" aria-hidden="true">🕘</span><time class="text-sm" datetime="{{ page.date|date:"Y-m-d" }}">{{ page.date }}</time></p>
+                                            <p class="space-x-2 m-0 mt-1 text-left"><span class="emoji"
+                                                                                          aria-hidden="true">🕘</span>
+                                                <time class="text-sm"
+                                                      datetime="{{ page.date|date:"Y-m-d" }}">{{ page.date }}</time>
+                                            </p>
                                         </div>
                                     </div>
                                 </div>
@@ -49,20 +53,25 @@
 
             {% with tags=page.tags.all %}
                 {% if tags %}
-                    <div class="tags">
-                        <h3 class="sr-only">Tags</h3>
-                        <ul class="flex">
-                            {% for tag in tags %}
-                                <li><a href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a></li>
-                            {% endfor %}
-                        </ul>
+                    <div class="flex items-center gap-x-4 text-xs">
+                        <div class="tags">
+                            <h3 class="sr-only">Tags</h3>
+                            <ul class="flex">
+                                {% for tag in tags %}
+                                    <li class="space-x-2"><span class="emoji">🏷️</span>
+                                        <a class="pr-2" href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        </div>
                     </div>
+
                 {% endif %}
             {% endwith %}
 
         </article>
 
-        <nav class="w-full px-2 lg:px-4">
+        <nav class="w-full text-center px-2 lg:px-4">
             <a href="{{ page.get_parent.url }}" class="font-bold">Return to blog</a>
         </nav>
 
diff --git a/iamkonstantin_web/templates/base.html b/iamkonstantin_web/templates/base.html
index 9a0ef2c..72f6c78 100644
--- a/iamkonstantin_web/templates/base.html
+++ b/iamkonstantin_web/templates/base.html
@@ -40,11 +40,6 @@
 </head>
 
 <body class="flex h-full bg-zinc-50 dark:bg-black {% block body_class %}{% endblock %}">
-<div class="fixed inset-0 flex justify-center sm:px-8">
-    <div class="flex w-full max-w-7xl px-0 md:px-4 lg:px-8">
-        <div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20"></div>
-    </div>
-</div>
 
 <div class="relative w-full sm:px-8">
     {% include "includes/header.html" %}
diff --git a/theme/static_src/src/styles.css b/theme/static_src/src/styles.css
index 77a7d80..feba69e 100644
--- a/theme/static_src/src/styles.css
+++ b/theme/static_src/src/styles.css
@@ -33,7 +33,7 @@
     }
 
     h3 {
-        @apply mt-4 mb-2 text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight text-black dark:text-white;
+        @apply mt-12 mb-2 text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight text-black dark:text-white;
     }
 
     h4 {