From 7f8adfe17b336e2edd67737b11d7801ce44a4074 Mon Sep 17 00:00:00 2001
From: hugeblank <hugeblank@gmail.com>
Date: Wed, 4 Dec 2024 08:37:12 -0800
Subject: [PATCH] fix: clean up blog post cards

---
 src/app.css             |  8 ++++++++
 src/lib/Profile.svelte  | 16 +++++++++-------
 src/routes/+page.svelte | 18 ++++++++++++------
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/app.css b/src/app.css
index 1bdf9c3..6333b66 100644
--- a/src/app.css
+++ b/src/app.css
@@ -32,4 +32,12 @@
         @apply text-sm;
         @apply font-semibold;
     }
+
+    .tworows {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
\ No newline at end of file
diff --git a/src/lib/Profile.svelte b/src/lib/Profile.svelte
index 3b4cbe4..5ac2023 100644
--- a/src/lib/Profile.svelte
+++ b/src/lib/Profile.svelte
@@ -3,14 +3,16 @@
 </script>
 
 <div class="p-4 bg-local relative border-gray-500 border-[1px] rounded-[1em] m-2" style="background-image: url({profile.banner}); background-size: cover; background-position: center;">
-        <div class="flex m-2 p-3 bg-black bg-opacity-80 rounded-md shrink">
-            <img src={profile.avatar} alt="Bluesky avatar" class="rounded-full w-[4em] m-2 h-full"/>
-            <div class="p-3">
-                <h4 class="">{profile.displayName}</h4>
-                <h6 class="hover:text-blue-500 hover:underline"><a href="https://bsky.app/profile/{profile.handle}">@{profile.handle}</a></h6>
+        <div class="flex flex-wrap m-2 p-3 bg-black bg-opacity-80 rounded-md">
+            <div class="flex items-center">
+                <img src={profile.avatar} alt="Bluesky avatar" class="rounded-full w-16 h-16 m-2"/>
+                <div class="object-contain p-3">
+                    <h4 class="content-around">{profile.displayName}</h4>
+                    <h6 class=" content-around hover:text-blue-500 hover:underline"><a href="https://bsky.app/profile/{profile.handle}">@{profile.handle}</a></h6>
+                </div>
             </div>
-            <div class="p-3">
-                <p class="">{profile.description}</p>
+            <div class="p-3 content-stretch lg:basis-3/5 min-w-100">
+                <p>{profile.description}</p>
             </div>
         </div>
 </div>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7c0eacd..9b194ad 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,12 +7,18 @@
 	<title>WhiteBreeze</title>
 	<meta name="description" content="Self-Hosted WhiteWind Blogspot" />
 </svelte:head>
-<div class="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr)_)] gap-x-2.5 gap-y-5 justify-between ml-2 mr-2">
+<div class="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr)_)] gap-x-2.5 gap-y-5 ml-2 mr-2">
 {#each posts as post}
-    <a href="{post.rkey}">
-        <div class="border rounded-[1em] border-solid border-[gray] p-[1em]">
-            <p class="text-[cornflowerblue] leading-[1.5]">{post.title}</p><br/>{post.createdAt.toDateString() + " @ " +  post.createdAt.toLocaleTimeString()}<br/>
-        </div>
-    </a>
+    <div class="border rounded-[1em] border-solid border-[gray] p-[1em]">
+        <a href="{post.rkey}">
+            <div class="flex flex-col h-[110px] justify-between">
+                <p class="text-[cornflowerblue] leading-[1.5] pb-2 tworows" title={post.title}>{post.title}</p>
+                <div>
+                    <p class="text-gray-300">Last Updated:</p>
+                    <p class="object-bottom text-gray-300">{post.createdAt.toLocaleDateString() + ", " +  post.createdAt.toLocaleTimeString()}</p>
+                </div>
+            </div>
+        </a>
+    </div>
 {/each}
 </div>
\ No newline at end of file