ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-07 18:23:04 +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 { .project-title {
color: var(--ayu-accent); color: var(--ayu-accent);
transition: color 0.2s;
} }
.project-item:hover .project-title { .project-description {
color: var(--ayu-red-500); color: var(--ayu-fg);
}
.project-date {
color: var(--ayu-gutter);
} }
</style> </style>
<a href={`/projects/${slug}`} class="project-item block border p-4 mb-4"> <a href={`/projects/${slug}`} class="project-item block border">
<div class="flex gap-4"> <div class="flex gap-4 p-4">
<div class="w-16 h-16 flex-shrink-0"> <div class="w-16 h-16 flex-shrink-0">
{image ? ( {
<img src={image} alt={`${title} icon`} class="w-full h-full object-cover rounded" /> image ? (
) : ( <img
<div class="w-full h-full border border-ayu-gutter rounded"></div> 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>
<div class="flex-1"> <div class="flex flex-col gap-2">
<h3 class="project-title text-lg mb-2"> <h3 class="project-title text-lg -mb-2">
{title} {title}
</h3> </h3>
<p class="text-sm text-ayu-fg mb-2">{description}</p> <p class="project-description text-sm">
<p class="text-xs text-ayu-gutter">{date}</p> {description}
</p>
<p class="project-date text-xs">{date}</p>
</div> </div>
</div> </div>
</a> </a>