148 lines
3.9 KiB
CSS
148 lines
3.9 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-10;
|
|
grid-template-columns: 1fr 3fr;
|
|
}
|
|
&.post-card--has-numerotation.post-card--has-thumbnail {
|
|
grid-template-columns: 1fr 3fr;
|
|
}
|
|
|
|
&__thumbnail {
|
|
@apply h-fit relative;
|
|
transition: all 0.3s ease-out;
|
|
img {
|
|
@apply grayscale;
|
|
aspect-ratio: 108/137;
|
|
@apply w-full object-cover relative z-10 bg-white border border-solid border-primary p-2;
|
|
height: auto;
|
|
}
|
|
&:hover img {
|
|
@apply grayscale-0;
|
|
}
|
|
.thumbnail-overlay {
|
|
@apply absolute z-0 rotate-3 top-2 left-2 w-full h-full border border-primary bg-white flex items-center justify-center;
|
|
transform: translate(2px, 2px) rotate(2deg);
|
|
/* transform: translate(12px, 12px) rotate(3deg); */
|
|
background-image: linear-gradient(#efe8ff, #efe8ff);
|
|
background-size: calc(100% - 12px) calc(100% - 12px);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
/* background-blend-mode: color-burn; */
|
|
|
|
/* background-size: calc(100% - 12px) calc(100% - 12px); */
|
|
/* &:after {
|
|
content: '';
|
|
width: calc(100% - 2rem);
|
|
height: calc(100% - 2rem);
|
|
} */
|
|
}
|
|
}
|
|
|
|
&: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');
|
|
}
|
|
}
|
|
}
|
|
}
|