Greg/MyFavStuff5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add responsive card component with hover effects and category-based styling

Browse Source
This commit is contained in:
Greg 2025-05-25 20:30:38 +02:00
parent 7d492d332c
commit b202d7aed8
1 changed files with 63 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
layouts/partials/card.html
View File

@ -27,13 +27,76 @@
display: block; display: block;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
height: 100%;
} }
.card-link-outer .card { .card-link-outer .card {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
width: 260px;
min-width: 260px;
max-width: 260px;
height: 390px;
min-height: 390px;
max-height: 390px;
margin: 0 auto;
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: box-shadow 0.2s, transform 0.2s; transition: box-shadow 0.2s, transform 0.2s;
overflow: hidden;
} }
.card-link-outer:hover .card { .card-link-outer:hover .card {
box-shadow: 0 6px 24px rgba(33,150,243,0.18), 0 1.5px 6px rgba(33,150,243,0.10); box-shadow: 0 6px 24px rgba(33,150,243,0.18), 0 1.5px 6px rgba(33,150,243,0.10);
transform: translateY(-2px) scale(1.02); transform: translateY(-2px) scale(1.02);
cursor: pointer; cursor: pointer;
} }
.card img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 16px 16px 0 0;
}
.card-placeholder {
height: 180px !important;
width: 100%;
border-radius: 16px 16px 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.card-title {
font-size: 1.1rem;
font-weight: 600;
margin: 12px 16px 0 16px;
flex-shrink: 0;
}
.card-rating, .card-likes {
margin: 4px 16px 0 16px;
font-size: 0.95rem;
color: #888;
flex-shrink: 0;
}
.card-desc {
margin: 8px 16px 0 16px;
font-size: 0.98rem;
color: #444;
flex-grow: 1;
display: flex;
align-items: flex-end;
}
@media (max-width: 600px) {
.card-link-outer .card {
width: 98vw;
min-width: 0;
max-width: 98vw;
height: 340px;
min-height: 340px;
max-height: 340px;
}
.card img, .card-placeholder {
height: 140px !important;
}
}
</style> </style>