mirror of
https://github.com/tonytins/tonybark.com.git
synced 2025-03-15 23:41:21 +00:00
fix: clean up blog post cards
This commit is contained in:
parent
3426597eaf
commit
7f8adfe17b
3 changed files with 29 additions and 13 deletions
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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>
|
|
@ -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>
|
Loading…
Add table
Reference in a new issue