From 466c91a980fa09ff0a3e496b677ec713defce96a Mon Sep 17 00:00:00 2001
From: BBaoVanC <bbaovanc@bbaovanc.com>
Date: Mon, 9 May 2022 18:56:40 -0500
Subject: [PATCH] Improve categories list page layout

---
 assets/css/bobastyle.css     | 16 +++++++++++-----
 layouts/categories/list.html | 10 ++++++----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index 7b9420f..b823444 100644
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -153,21 +153,27 @@
   border-radius: 8px;
 }
 
-@media (max-width: 360px) {
+.category-list-left {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 480px) {
   .category-list li {
     flex-direction: column;
     gap: 0;
   }
+
+  .category-list-left {
+    flex-direction: row;
+    justify-content: space-between;
+  }
 }
 
 .category-list p {
   margin: 0;
 }
 
-.category-list .category-metadata {
-  margin-left: auto;
-}
-
 .category-list a,
 .category-list .category-metadata {
   white-space: nowrap;
diff --git a/layouts/categories/list.html b/layouts/categories/list.html
index 4e23ae3..36d595a 100644
--- a/layouts/categories/list.html
+++ b/layouts/categories/list.html
@@ -10,11 +10,13 @@
                 {{ range . }}
                     {{ with .Page }}
                         <li>
-                            <a href="{{ .Permalink }}">
-                                <p>{{ .Title | markdownify }}</p>
-                            </a>
+                            <div class="category-list-left">
+                                <a href="{{ .Permalink }}">
+                                    <p>{{ .Title | markdownify }}</p>
+                                </a>
+                                {{ partial "post-metadata/category.html" . }}
+                            </div>
                             {{ partial "description-or-summary.html" . }}
-                            {{ partial "post-metadata/category.html" . }}
                         </li>
                     {{ end }}
                 {{ end }}