tonytins/tonybark.com
2
0
Fork 0
mirror of https://github.com/tonytins/tonybark.com.git synced 2025-03-17 08:11:21 +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 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>
<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>

18
src/routes/+page.svelte
View file

@ -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>