ldez/new-manga
1
0
Fork 0
mirror of https://github.com/ld3z/new-manga.git synced 2026-11-09 20:33:44 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

add tailwind

Browse source
This commit is contained in:
ld3zian 2025-01-16 18:02:15 -07:00
parent a8b95aa752
commit 618901a871
11 changed files with 855 additions and 375 deletions
Download patch file Download diff file Expand all files Collapse all files

149
src/components/ComicCard.astro
View file

@ -10,152 +10,45 @@ interface Props {
const { comic, genres } = Astro.props;
const genreNames = getGenreNames(comic.md_comics.genres, genres);
// Determine if the file is AVIF based on the URL
const isAvif = comic.md_comics.md_covers[0]?.b2key.endsWith('.avif');
const coverUrl = comic.md_comics.md_covers[0]
? `https://meo.comick.pictures/${comic.md_comics.md_covers[0].b2key}`
: '/placeholder.png';
---
<div class="comic-card">
<a href={`https://comick.io/comic/${comic.md_comics.slug}`} target="_blank" rel="noopener noreferrer">
<div class="group bg-secondary rounded-xl overflow-hidden shadow-md transition-all duration-300 hover:-translate-y-1 hover:shadow-lg h-full flex flex-col max-w-[250px] mx-auto">
<a href={`https://comick.io/comic/${comic.md_comics.slug}`} target="_blank" rel="noopener noreferrer" class="flex flex-col h-full">
{!isAvif ? (
<Image src={coverUrl} alt={comic.md_comics.title} inferSize={true} />
<Image
src={coverUrl}
alt={comic.md_comics.title}
inferSize={true}
class="w-full h-[375px] object-cover transition-transform duration-300 group-hover:scale-105"
/>
) : (
<img
src={coverUrl}
alt={comic.md_comics.title}
width="300"
height="300"
style={{ objectFit: 'cover' }}
width="250"
height="375"
class="w-full h-[375px] object-cover transition-transform duration-300 group-hover:scale-105"
/>
)}
<div class="comic-info">
<h3>{comic.md_comics.title}</h3>
<p class="chapter">Chapter {comic.chap}</p>
<div class="p-4 md:p-5 flex-grow flex flex-col bg-secondary">
<h3 class="text-lg font-semibold mb-2 line-clamp-2">{comic.md_comics.title}</h3>
<p class="text-accent font-medium">Chapter {comic.chap}</p>
{genreNames.length > 0 && (
<div class="genres" aria-label="Comic genres">
<div class="flex flex-wrap gap-2 my-3" aria-label="Comic genres">
{genreNames.map(genre => (
<span class="genre-tag" title={genre}>
<span class="bg-accent/10 text-accent px-3 py-1 rounded-full text-xs font-medium truncate max-w-[150px] md:max-w-[120px] transition-all hover:bg-accent/15 hover:-translate-y-0.5" title={genre}>
{genre}
</span>
))}
</div>
)}
<p class="date">{new Date(comic.updated_at).toLocaleString(undefined, { timeStyle: "short" })}</p>
<p class="mt-auto text-sm text-primary/60">
{new Date(comic.updated_at).toLocaleString(undefined, { timeStyle: "short" })}
</p>
</div>
</a>
</div>
<style>
.comic-card {
background: var(--bg-secondary);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.comic-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.comic-card a {
text-decoration: none;
color: var(--text-color);
}
.comic-card img {
width: 100%;
height: 300px;
object-fit: cover;
transition: transform 0.3s ease;
}
.comic-card:hover img {
transform: scale(1.05);
}
.comic-info {
padding: 1.25rem;
position: relative;
background: var(--bg-secondary);
}
.comic-info h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.4;
margin-bottom: 0.5rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.chapter {
margin: 0;
font-size: 0.9rem;
color: rgb(var(--accent));
font-weight: 500;
}
.date {
margin-top: 0.75rem;
font-size: 0.8rem !important;
color: var(--text-color);
opacity: 0.6;
}
.genres {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0.75rem 0;
max-height: 4.8rem;
overflow: hidden;
}
.genre-tag {
background: rgba(var(--accent), 0.1);
color: rgb(var(--accent));
padding: 0.25rem 0.6rem;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.02em;
transition: all 0.2s ease;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 150px;
}
.genre-tag:hover {
background: rgba(var(--accent), 0.15);
transform: translateY(-1px);
}
@media (max-width: 640px) {
.comic-info {
padding: 1rem;
}
.comic-info h3 {
font-size: 1rem;
}
.genres {
margin: 0.5rem 0;
max-height: 3.6rem;
}
.genre-tag {
padding: 0.2rem 0.5rem;
font-size: 0.7rem;
}
}
</style>
</div>