cleanup: move the details of the article to the bottom of the article…

…'s card

CHANGELOG.md

@@ -66,6 +66,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Migrate every `px` to `rem` for better scaling (I did that once already, but they appeared again)
 
+- Move the details of the article to the bottom of the article's card
+
 ---
 
 ### Development

custom/ArticleList.scss

@@ -14,7 +14,10 @@
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   }
 
-  .post {
+  article {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
     transition: transform 0.3s ease;
     border-radius: 8px;
     background-color: var(--color-background-second);
@@ -128,12 +131,19 @@
       text-decoration: none;
     }
 
-    .date {
-      font-feature-settings: "zero", "tnum", "cv03", "cv02";
-      margin: 5px 0;
-      color: var(--color-text-secondary);
-      font-weight: 600;
-      font-size: 0.9rem;
+    .post-details {
+      display: flex;
+      justify-content: space-between;
+      border-top: 1px solid var(--color-border);
+      padding-top: 10px;
+
+      .date {
+        font-feature-settings: "zero", "tnum", "cv03", "cv02";
+        margin: 5px 0;
+        color: var(--color-text-secondary);
+        font-weight: 600;
+        font-size: 0.9rem;
+      }
     }
   }
 }

custom/ArticleListExample.txt

@@ -28,30 +28,32 @@
             >{{ post.title }}</a
           >
         </h3>
-        <p class="date">
-          {{ post.date }}
-          <template v-if="post.type">
-            &middot;
-            <span
-              >{{ post.type.charAt(0).toUpperCase() + post.type.slice(1)
-              }}<template v-if="post.type === 'archive'">d</template>
-            </span>
-          </template>
-          <span v-if="post.author">
-            &middot;
-            {{ post.author.length > 1 ? "Authors:" : "Author:" }}
-            <template v-for="(author, index) in post.author" :key="index">
-              {{ author
-              }}<span v-if="index !== post.author.length - 1">, </span>
-            </template>
-          </span>
-        </p>
         <p v-if="post.description">{{ post.description }}</p>
-        <div class="tags" v-if="post.tags">
-          <span v-if="typeof post.tags === 'string'" :key="post.tags">{{
-            post.tags
-          }}</span>
-          <span v-else v-for="tag in post.tags" :key="tag">{{ tag }}</span>
+        <div class="post-details">
+          <p class="date">
+            {{ post.date }}
+            <template v-if="post.type">
+              &middot;
+              <span
+                >{{ post.type.charAt(0).toUpperCase() + post.type.slice(1)
+                }}<template v-if="post.type === 'archive'">d</template>
+              </span>
+            </template>
+            <span v-if="post.author">
+              &middot;
+              {{ post.author.length > 1 ? "Authors:" : "Author:" }}
+              <template v-for="(author, index) in post.author" :key="index">
+                {{ author
+                }}<span v-if="index !== post.author.length - 1">, </span>
+              </template>
+            </span>
+          </p>
+          <div class="tags" v-if="post.tags">
+            <span v-if="typeof post.tags === 'string'" :key="post.tags">{{
+              post.tags
+            }}</span>
+            <span v-else v-for="tag in post.tags" :key="tag">{{ tag }}</span>
+          </div>
         </div>
       </article>
     </div>

docs/.vitepress/theme/ArticleList.vue

@@ -28,30 +28,32 @@
             >{{ post.title }}</a
           >
         </h3>
-        <p class="date">
-          {{ post.date }}
-          <template v-if="post.type">
-            &middot;
-            <span
-              >{{ post.type.charAt(0).toUpperCase() + post.type.slice(1)
-              }}<template v-if="post.type === 'archive'">d</template>
-            </span>
-          </template>
-          <span v-if="post.author">
-            &middot;
-            {{ post.author.length > 1 ? "Authors:" : "Author:" }}
-            <template v-for="(author, index) in post.author" :key="index">
-              {{ author
-              }}<span v-if="index !== post.author.length - 1">, </span>
-            </template>
-          </span>
-        </p>
         <p v-if="post.description">{{ post.description }}</p>
-        <div class="tags" v-if="post.tags">
-          <span v-if="typeof post.tags === 'string'" :key="post.tags">{{
-            post.tags
-          }}</span>
-          <span v-else v-for="tag in post.tags" :key="tag">{{ tag }}</span>
+        <div class="post-details">
+          <p class="date">
+            {{ post.date }}
+            <template v-if="post.type">
+              &middot;
+              <span
+                >{{ post.type.charAt(0).toUpperCase() + post.type.slice(1)
+                }}<template v-if="post.type === 'archive'">d</template>
+              </span>
+            </template>
+            <span v-if="post.author">
+              &middot;
+              {{ post.author.length > 1 ? "Authors:" : "Author:" }}
+              <template v-for="(author, index) in post.author" :key="index">
+                {{ author
+                }}<span v-if="index !== post.author.length - 1">, </span>
+              </template>
+            </span>
+          </p>
+          <div class="tags" v-if="post.tags">
+            <span v-if="typeof post.tags === 'string'" :key="post.tags">{{
+              post.tags
+            }}</span>
+            <span v-else v-for="tag in post.tags" :key="tag">{{ tag }}</span>
+          </div>
         </div>
       </article>
     </div>