From 30e8f29d1ff921ce22d2c9d7602588c075d7a54e Mon Sep 17 00:00:00 2001
From: Konstantin Kostov <konstantin@headbright.be>
Date: Mon, 18 Mar 2024 17:52:23 +0100
Subject: [PATCH] more layout improvements

---
 blog/templates/blog/blog_index_page.html | 83 +++++++++++++++++++-----
 blog/templates/blog/blog_page.html       |  2 +-
 theme/static_src/src/styles.css          |  8 ++-
 3 files changed, 72 insertions(+), 21 deletions(-)

diff --git a/blog/templates/blog/blog_index_page.html b/blog/templates/blog/blog_index_page.html
index f527d41..ca16eda 100644
--- a/blog/templates/blog/blog_index_page.html
+++ b/blog/templates/blog/blog_index_page.html
@@ -5,27 +5,74 @@
 {% block body_class %}template-blogindexpage{% endblock %}
 
 {% block content %}
-    <section class="flex flex-col items-center justify-center h-full mx-4">
-        <h1>{{ page.title }}</h1>
 
-        <div class="intro">{{ page.intro|richtext }}</div>
-    </section>
+    <section class="py-24 sm:py-32 mx-4">
+        <div class="mx-auto max-w-7xl px-6 lg:px-8">
+            <div class="mx-auto max-w-2xl lg:max-w-4xl">
+                <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>
 
-    <section class="flex flex-col h-full mx-4">
-        {% for post in blogpages %}
-            {% with post=post.specific %}
-                <article class="w-full flex flex-col items-center">
-                    <h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
+                <div class="mt-16 space-y-20 lg:mt-20 lg:space-y-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] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0">
+                                    {% with post.main_image as main_image %}
+                                        {% if main_image %}
+                                            {% image main_image width-400 class="blog absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover" %}{% endif %}
+                                    {% endwith %}
+                                    <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
+                                </div>
+                                <div>
+                                    <div class="flex items-center gap-x-4 text-xs">
+                                        <time datetime="2020-03-16">{{ post.date }}</time>
 
-                    {% with post.main_image as main_image %}
-                        {% if main_image %}{% image main_image width-400 class="blog" %}{% endif %}
-                    {% endwith %}
-
-
-                    <p>{{ post.intro }}</p>
-                </article>
-            {% endwith %}
-        {% endfor %}
+                                        {% with tags=post.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>
+                                            {% endif %}
+                                        {% endwith %}
+                                    </div>
+                                    <div class="group relative max-w-xl">
+                                        <h3 class="mt-3 text-lg font-semibold leading-6 group-hover:text-gray-600">
+                                            <a href="{% pageurl post %}">
+                                                <span class="absolute inset-0"></span>
+                                                {{ post.title }}
+                                            </a>
+                                        </h3>
+                                        <p class="mt-5 leading-6">{{ post.intro }}</p>
+                                    </div>
+                                    {#                                    <div class="mt-6 flex border-t border-gray-900/5 pt-6">#}
+                                    {#                                        <div class="relative flex items-center gap-x-4">#}
+                                    {#                                            <img src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"#}
+                                    {#                                                 alt="" class="h-10 w-10 rounded-full bg-gray-50">#}
+                                    {#                                            <div class="text-sm leading-6">#}
+                                    {#                                                <p class="font-semibold text-gray-900">#}
+                                    {#                                                    <a href="#">#}
+                                    {#                                                        <span class="absolute inset-0"></span>#}
+                                    {#                                                        Michael Foster#}
+                                    {#                                                    </a>#}
+                                    {#                                                </p>#}
+                                    {#                                                <p class="text-gray-600">Co-Founder / CTO</p>#}
+                                    {#                                            </div>#}
+                                    {#                                        </div>#}
+                                    {#                                    </div>#}
+                                </div>
+                            </article>
+                        {% endwith %}
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
     </section>
 
 {% endblock %}
\ No newline at end of file
diff --git a/blog/templates/blog/blog_page.html b/blog/templates/blog/blog_page.html
index f4c5e8c..576b74d 100644
--- a/blog/templates/blog/blog_page.html
+++ b/blog/templates/blog/blog_page.html
@@ -47,7 +47,7 @@
                 </div>
             </div>
 
-        {% with tags=page.tags.all %}
+            {% with tags=page.tags.all %}
                 {% if tags %}
                     <div class="tags">
                         <h3 class="sr-only">Tags</h3>
diff --git a/theme/static_src/src/styles.css b/theme/static_src/src/styles.css
index 8af77b8..fbcf141 100644
--- a/theme/static_src/src/styles.css
+++ b/theme/static_src/src/styles.css
@@ -78,13 +78,17 @@
 }
 
 .tags ul {
-    @apply flex space-x-4 text-center text-lg;
+    @apply flex space-x-4 text-center text-sm;
 }
 
  .tags li {
-        @apply flex-1 p-4 inline-flex items-center rounded-md bg-green-50 px-2 py-1 font-medium text-green-700 ring-1 ring-inset ring-green-600/20;
+        @apply flex-1 p-4 inline-flex items-center rounded-2xl bg-green-50 px-2 py-1 font-medium text-green-700 ring-1 ring-inset ring-green-600/20;
     }
 
  .tags a {
      @apply border-b-0 w-full;
  }
+
+ .blog-pages a {
+     @apply border-b-0;
+ }
\ No newline at end of file