92 lines
2.0 KiB
CSS
92 lines
2.0 KiB
CSS
.post-card {
|
|
@apply p-8 border border-primary relative grid gap-y-4 gap-12 bg-white;
|
|
grid-template-columns: 1fr;
|
|
@screen lg {
|
|
grid-template-columns: 1fr 40px;
|
|
}
|
|
|
|
&:has(.issue-number-group) {
|
|
@screen lg {
|
|
grid-template-columns: 1fr 86px;
|
|
}
|
|
}
|
|
|
|
&.has-cover {
|
|
.post-card__cover {
|
|
@apply col-span-1;
|
|
}
|
|
@screen lg {
|
|
grid-template-columns: 1fr 3fr 40px;
|
|
.post-card__cover {
|
|
@apply col-span-1;
|
|
}
|
|
}
|
|
|
|
&:has(.issue-number-group) {
|
|
@screen lg {
|
|
grid-template-columns: 1fr 3fr 86px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-meta {
|
|
@apply mb-4;
|
|
.content-meta__type--revue {
|
|
@apply text-lg;
|
|
}
|
|
}
|
|
&__title {
|
|
@apply text-3xl font-normal uppercase;
|
|
}
|
|
&__date {
|
|
@apply capitalize pt-3 block;
|
|
}
|
|
|
|
&__cover {
|
|
@apply order-3 lg:order-1 p-2 object-cover w-full h-36 md:h-56 lg:h-36 md:mt-6 lg:mt-0 relative mb-6 lg:mb-0;
|
|
z-index: 10;
|
|
|
|
img {
|
|
@apply w-full h-full object-cover;
|
|
}
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
@apply absolute top-0 left-0 w-full h-full;
|
|
}
|
|
&:before {
|
|
z-index: -1;
|
|
@apply bg-white border border-primary;
|
|
}
|
|
&:after {
|
|
z-index: -2;
|
|
@apply border border-primary;
|
|
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;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
@apply order-2 lg:order-1;
|
|
}
|
|
|
|
.issue-number-group {
|
|
@apply flex h-auto gap-2;
|
|
.issue-number {
|
|
@apply h-[40px];
|
|
}
|
|
}
|
|
.issue-number-group,
|
|
.issue-number {
|
|
@apply order-1 lg:order-1;
|
|
}
|
|
.issue-number {
|
|
@apply bg-primary text-white w-[40px] h-auto flex items-center justify-center;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
}
|