✨ feat(list_posts.html): display draft status in post list (#203)

Co-authored-by: welpo <welpo@users.noreply.github.com>

sass/parts/_posts_list.scss

@@ -9,11 +9,21 @@
     background-color: var(--navbar-color);
     padding: 2.5rem 0;
 
-    .date {
+    .bloglist-meta {
+        padding: 0;
         width: 13.5rem;
         color: var(--meta-color);
         font-weight: 300;
         font-size: 0.9rem;
+
+        li {
+            list-style-type: none;
+        }
+
+        li.draft-label {
+            width: fit-content;
+            line-height: 1.2rem;
+        }
     }
 
     .bloglist-tags {
@@ -66,14 +76,19 @@
         flex-direction: column;
         align-items: flex-start;
         padding: 2rem 0;
-    }
 
-    .date {
+        .bloglist-meta {
-        margin-bottom: 0;
+            margin-bottom: 0;
-        width: 100%;
+            width: 100%;
-    }
 
-    .bloglist-content {
+            li {
-        width: 100%;
+                display: inline;
+                margin-right: 0.3rem;
+            }
+        }
+
+        .bloglist-content {
+            width: 100%;
+        }
     }
 }

templates/macros/list_posts.html

@@ -11,12 +11,14 @@
                 <section class="bloglist-row bottom-divider">
             {% endif %}
 
-            {% if post.date %}
+            <ul class="bloglist-meta">
-                <div class="date">
+                {% if post.date %}
-                    {{ macros_format_date::format_date(date=post.date, short=false, language_strings=language_strings) }}
+                <li class="date">{{ macros_format_date::format_date(date=post.date, short=false, language_strings=language_strings) }}</li>
-                </div>
+                {% endif %}
-            {% endif %}
+                {% if post.draft %}
-
+                <li class="draft-label">{{ macros_translate::translate(key="draft", default="DRAFT", language_strings=language_strings) }}</li>
+                {% endif %}
+            </ul>
             <div class="bloglist-content">
                 <h2 class="bloglist-title">
                     <a href="{{ post.permalink }}">{{ post.title }}</a>