Refactor post list metadata display: use flexbox for alignment and add reading time

css/style.css

@@ -788,10 +788,17 @@ img.nav-svg-icon {
 	color: var(--text-secondary);
 }
 
-.post-list-date {
-	display: block;
+.post-list-meta {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
 	color: var(--text-muted);
 	font-size: var(--font-size-sm);
+	white-space: nowrap;
+}
+
+.post-list-meta .bi {
+	margin-right: 0.25rem;
 }
 
 .post-list-item .post-taxonomy {

php/home.php

@@ -53,7 +53,12 @@
         <a href="<?php echo $page->permalink(); ?>">
           <h2 class="post-list-title"><?php echo $page->title(); ?></h2>
         </a>
-        <span class="post-list-date"><?php echo $page->date(); ?></span>
+        <div class="post-list-meta">
+          <span><i class="bi bi-calendar3"></i><?php echo $page->date(); ?></span>
+          <?php if (!$page->isStatic()) : ?>
+          <span><i class="bi bi-clock-history"></i><?php echo $page->readingTime(); ?></span>
+          <?php endif ?>
+        </div>
       </div>
 
       <!-- Tags and Category -->