tonytins/tonybark.com
2
0
Fork 0
mirror of https://github.com/tonytins/tonybark.com.git synced 2025-03-22 17:52:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: clean up blog post cards

Browse source
This commit is contained in:
hugeblank 2024-12-04 08:37:12 -08:00
parent 3426597eaf
commit 7f8adfe17b
3 changed files with 29 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app.css
View file

@ -32,4 +32,12 @@
@apply text-sm; @apply text-sm;
@apply font-semibold; @apply font-semibold;
} }
.tworows {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
} }

16
src/lib/Profile.svelte
View file

@ -3,14 +3,16 @@
</script> </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="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"> <div class="flex flex-wrap m-2 p-3 bg-black bg-opacity-80 rounded-md">
<img src={profile.avatar} alt="Bluesky avatar" class="rounded-full w-[4em] m-2 h-full"/> <div class="flex items-center">
<div class="p-3"> <img src={profile.avatar} alt="Bluesky avatar" class="rounded-full w-16 h-16 m-2"/>
<h4 class="">{profile.displayName}</h4> <div class="object-contain p-3">
<h6 class="hover:text-blue-500 hover:underline"><a href="https://bsky.app/profile/{profile.handle}">@{profile.handle}</a></h6> <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>
<div class="p-3"> <div class="p-3 content-stretch lg:basis-3/5 min-w-100">
<p class="">{profile.description}</p> <p>{profile.description}</p>
</div> </div>
</div> </div>
</div> </div>

18
src/routes/+page.svelte
View file

@ -7,12 +7,18 @@
<title>WhiteBreeze</title> <title>WhiteBreeze</title>
<meta name="description" content="Self-Hosted WhiteWind Blogspot" /> <meta name="description" content="Self-Hosted WhiteWind Blogspot" />
</svelte:head> </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} {#each posts as post}
<a href="{post.rkey}"> <div class="border rounded-[1em] border-solid border-[gray] p-[1em]">
<div class="border rounded-[1em] border-solid border-[gray] p-[1em]"> <a href="{post.rkey}">
<p class="text-[cornflowerblue] leading-[1.5]">{post.title}</p><br/>{post.createdAt.toDateString() + " @ " + post.createdAt.toLocaleTimeString()}<br/> <div class="flex flex-col h-[110px] justify-between">
</div> <p class="text-[cornflowerblue] leading-[1.5] pb-2 tworows" title={post.title}>{post.title}</p>
</a> <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} {/each}
</div> </div>