ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-08 02:33:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

improved styling

Browse Source
This commit is contained in:
Oliver Bryan
2025-09-26 13:40:02 +01:00
parent 88a9a99c14
commit a4a92d7857
1 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/ProjectListItem.astro
View File

@@ -12,28 +12,38 @@ const { title, description, date, image, slug } = Astro.props;
}
.project-title {
color: var(--ayu-accent);
transition: color 0.2s;
}
.project-item:hover .project-title {
color: var(--ayu-red-500);
.project-description {
color: var(--ayu-fg);
}
.project-date {
color: var(--ayu-gutter);
}
</style>
<a href={`/projects/${slug}`} class="project-item block border p-4 mb-4">
<div class="flex gap-4">
<a href={`/projects/${slug}`} class="project-item block border">
<div class="flex gap-4 p-4">
<div class="w-16 h-16 flex-shrink-0">
{image ? (
<img src={image} alt={`${title} icon`} class="w-full h-full object-cover rounded" />
) : (
<div class="w-full h-full border border-ayu-gutter rounded"></div>
)}
{
image ? (
<img
src={image}
alt={`${title} icon`}
class="w-full h-full object-cover rounded"
/>
) : (
<div class="w-full h-full border border-ayu-gutter rounded" />
)
}
</div>
<div class="flex-1">
<h3 class="project-title text-lg mb-2">
<div class="flex flex-col gap-2">
<h3 class="project-title text-lg -mb-2">
{title}
</h3>
<p class="text-sm text-ayu-fg mb-2">{description}</p>
<p class="text-xs text-ayu-gutter">{date}</p>
<p class="project-description text-sm">
{description}
</p>
<p class="project-date text-xs">{date}</p>
</div>
</div>
</a>