127 lines
3.1 KiB
CSS
127 lines
3.1 KiB
CSS
.post-card {
|
|
@apply bg-white border border-primary p-6 block;
|
|
transition: transform 0.3s ease-out;
|
|
&:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
&--has-thumbnail {
|
|
@apply grid gap-6;
|
|
grid-template-columns: 1fr 3fr;
|
|
}
|
|
&.post-card--has-numerotation.post-card--has-thumbnail {
|
|
grid-template-columns: 1fr 3fr;
|
|
}
|
|
|
|
&__thumbnail {
|
|
@apply bg-white border border-solid border-primary p-2 h-fit grayscale hover:grayscale-0;
|
|
transition: all 0.3s ease-out;
|
|
img {
|
|
aspect-ratio: 108/137;
|
|
@apply w-full bg-green-400 object-cover;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
&:hover .post-card__thumbnail {
|
|
@apply !grayscale-0;
|
|
}
|
|
|
|
h3.card__title {
|
|
@apply mb-6 text-2xl uppercase;
|
|
}
|
|
.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-6 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');
|
|
}
|
|
&.main-author::before {
|
|
width: 2.15rem;
|
|
height: 2.15rem;
|
|
transform: translateY(-5px);
|
|
background-image: url('../resources/img/icons/carhop-auteur-principal.svg');
|
|
}
|
|
&.editor::before {
|
|
background-image: url('../resources/img/icons/carhop-bookmark.svg');
|
|
}
|
|
&.publication-director::before {
|
|
@apply w-8 h-8;
|
|
background-image: url('../resources/img/icons/carhop-auteur-directeur.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-card--archives-presse {
|
|
&::after {
|
|
@apply !content-none;
|
|
}
|
|
.media-type-list {
|
|
.media-type {
|
|
@apply flex items-center gap-2 w-fit;
|
|
&::before {
|
|
@apply content-[''] block w-8 h-8 bg-no-repeat bg-center bg-contain bg-red-300;
|
|
}
|
|
|
|
&--audio::before {
|
|
background-image: url('../resources/img/icons/carhop-source-audio.svg');
|
|
}
|
|
&--video::before {
|
|
background-image: url('../resources/img/icons/carhop-source-video.svg');
|
|
}
|
|
&--photo::before {
|
|
background-image: url('../resources/img/icons/carhop-source-photo.svg');
|
|
}
|
|
&--article::before {
|
|
background-image: url('../resources/img/icons/carhop-source-ecrits.svg');
|
|
}
|
|
}
|
|
}
|
|
}
|