68 lines
1.5 KiB
CSS
68 lines
1.5 KiB
CSS
.post-card {
|
|
@apply bg-white border border-primary p-6;
|
|
transition: transform 0.3s ease-out;
|
|
&:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
h3.card__title {
|
|
@apply mb-6;
|
|
}
|
|
.card__details {
|
|
@apply flex flex-col gap-3;
|
|
|
|
&:has(.card__thumbnail) {
|
|
@apply grid gap-6;
|
|
grid-template-columns: 3fr 1fr;
|
|
}
|
|
.card__thumbnail {
|
|
@apply bg-white border border-solid border-primary p-2;
|
|
img {
|
|
aspect-ratio: 4/5;
|
|
@apply w-full h-auto bg-green-400 object-cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
time.date {
|
|
@apply text-primary capitalize;
|
|
}
|
|
.author {
|
|
@apply text-primary;
|
|
}
|
|
|
|
&__authors {
|
|
/* @apply flex flex-wrap gap-2; */
|
|
@apply flex flex-wrap gap-x-8 gap-y-2;
|
|
li {
|
|
@apply text-lg flex items-center gap-2;
|
|
|
|
&::before {
|
|
@apply w-6 h-6 block bg-no-repeat bg-center bg-contain;
|
|
content: '';
|
|
@apply filter-primary;
|
|
}
|
|
|
|
&.author::before {
|
|
background-image: url('../resources/img/icons/carhop-plume2.svg');
|
|
}
|
|
&.editor::before {
|
|
background-image: url('../resources/img/icons/carhop-bookmark.svg');
|
|
}
|
|
}
|
|
}
|
|
&__details-text {
|
|
@apply flex flex-col gap-2;
|
|
}
|
|
|
|
.tag-list {
|
|
@apply flex flex-wrap gap-2 mt-4;
|
|
&__tag {
|
|
@apply text-primary bg-white border border-solid border-primary px-4 py-2;
|
|
&:hover {
|
|
@apply bg-primary text-white;
|
|
}
|
|
}
|
|
}
|
|
}
|