From f0dc1483a417df9a36eba29f5530850cc1257030 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9ophile=20Bastian?= <contact@tobast.fr>
Date: Wed, 10 Apr 2024 17:33:23 +0200
Subject: [PATCH] Blog list: better layout

---
 layouts/partials/blog/entry_list.html | 2 +-
 scss/_blog.scss                       | 6 ++++--
 static/css/style.css                  | 6 ++++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/layouts/partials/blog/entry_list.html b/layouts/partials/blog/entry_list.html
index 7ec9009..922f59e 100644
--- a/layouts/partials/blog/entry_list.html
+++ b/layouts/partials/blog/entry_list.html
@@ -1,5 +1,6 @@
 <div class="blog_entry">
   <div class="blog_entry_meta">
+    <span class="blog_entry_date">{{ .Date | time.Format ":date_medium" }}</span>
     {{ with .GetTerms "blog/tags" }}
     <ul class="blog_entry_tags">
       {{ range . -}}
@@ -7,7 +8,6 @@
       {{- end }}
     </ul>
     {{ end }}
-    <span class="blog_entry_date">{{ .Date | time.Format ":date_medium" }}</span>
   </div>
   <a href="{{ .Permalink }}" class="blog_entry_title">{{ .Title }}</a>
 </div>
diff --git a/scss/_blog.scss b/scss/_blog.scss
index 3bd8702..10b74b9 100644
--- a/scss/_blog.scss
+++ b/scss/_blog.scss
@@ -4,7 +4,9 @@
 
 #entries {
   .blog_entry {
-    padding: 25px 0;
+    padding: 5px 0;
+    margin: 20px 0;
+    display: block;
 
     .blog_entry_title {
       display: block;
@@ -13,7 +15,7 @@
     }
     .blog_entry_meta {
       display: flex;
-      justify-content: flex-end;
+      justify-content: space-between;
       align-items: center;
       column-gap: 20px;
 
diff --git a/static/css/style.css b/static/css/style.css
index bdff53b..81b0f7f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,14 +1,16 @@
 @charset "UTF-8";
 @import url("fonts.css");
 #entries .blog_entry {
-  padding: 25px 0; }
+  padding: 5px 0;
+  margin: 20px 0;
+  display: block; }
   #entries .blog_entry .blog_entry_title {
     display: block;
     font-size: 1.1em;
     text-align: left; }
   #entries .blog_entry .blog_entry_meta {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
     align-items: center;
     column-gap: 20px;
     font-style: italic;