From ea600b05f71b333ac9f60651fba33a8444c1de0c Mon Sep 17 00:00:00 2001
From: Michael Zhang <mail@mzhang.io>
Date: Thu, 4 Apr 2024 08:27:49 -0500
Subject: [PATCH] make the lines more condensed

---
 src/components/PostList.astro  | 19 ++++++++++---------
 src/components/TagList.astro   |  4 ++--
 src/components/Timestamp.astro |  2 +-
 src/styles/home.scss           |  3 +++
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/PostList.astro b/src/components/PostList.astro
index e384449..cfadfb1 100644
--- a/src/components/PostList.astro
+++ b/src/components/PostList.astro
@@ -5,11 +5,12 @@ import { sortBy } from "lodash-es";
 import TagList from "./TagList.astro";
 
 interface Props {
-  class: string;
   basePath: string;
+  /** Whether or not to include drafts in this list */
   drafts?: "exclude" | "include" | "only";
   filteredPosts?: Post[];
-  timeFormat?: string;
+  class?: string | undefined;
+  timeFormat?: string | undefined;
 }
 
 type Post = CollectionEntry<"posts">;
@@ -54,17 +55,17 @@ const sortedPosts = sortBy(allPosts, (post) => -post.data.date);
       return (
         <>
           <tr class="row">
-            <td class="info">
-              <span class="spacer" />
-              <Timestamp timestamp={post.data.date} format={timeFormat} />
-            </td>
             <td>
               <div class="title">
                 <a href={`${basePath}/${post.slug}`} class="brand-colorlink">
                   {post.data.title}
                 </a>
               </div>
-              <TagList tags={post.data.tags} />
+              <div>
+                <Timestamp timestamp={post.data.date} format={timeFormat} />
+                &middot;
+                <TagList tags={post.data.tags} />
+              </div>
             </td>
           </tr>
         </>
@@ -76,11 +77,11 @@ const sortedPosts = sortBy(allPosts, (post) => -post.data.date);
 <style lang="scss">
   .postListing {
     width: 100%;
-    border-spacing: 6px 10px;
+    border-spacing: 6px 16px;
 
     td {
       // padding-bottom: 10px;
-      // line-height: 1;
+      line-height: 1;
 
       .title {
         font-size: 12pt;
diff --git a/src/components/TagList.astro b/src/components/TagList.astro
index 2702f48..5f37e1d 100644
--- a/src/components/TagList.astro
+++ b/src/components/TagList.astro
@@ -7,10 +7,10 @@ const { extraFront, tags, extraBack } = Astro.props;
 <div class="tags">
   {extraFront}
   {
-    tags.toSorted().map((tag) => (
+    tags.toSorted().map((tag: string) => (
       <a href={`/tags/${tag}`} class="tag">
         <i class="fa fa-tag" aria-hidden="true" />
-        <span class="text">{tag}</span>
+        <span class="text">#{tag}</span>
       </a>
     ))
   }
diff --git a/src/components/Timestamp.astro b/src/components/Timestamp.astro
index 51b02f1..c2d2275 100644
--- a/src/components/Timestamp.astro
+++ b/src/components/Timestamp.astro
@@ -1,7 +1,7 @@
 ---
 interface Props {
   timestamp: Date;
-  format: string | undefined;
+  format?: string | undefined;
 }
 
 const { timestamp, format: customFormat } = Astro.props;
diff --git a/src/styles/home.scss b/src/styles/home.scss
index bbd9860..00e32f2 100644
--- a/src/styles/home.scss
+++ b/src/styles/home.scss
@@ -1,10 +1,13 @@
 .home.postListing {
   .timestamp {
     font-family: var(--monofont);
+    color: var(--smaller-text-color);
+    font-size: 0.75em;
   }
 
   .tags {
     gap: 4px;
+    display: inline-flex;
 
     .tag {
       background-color: inherit;