Antoine/carhop__dynamiques-theme__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

REFACTOR Handling a generic post-card component for common styling

Browse Source
This commit is contained in:
Antoine M 2025-06-04 11:33:56 +02:00
parent 4b7fc02440
commit 7e16c6ee9d
1 changed files with 53 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
resources/css/components/post-card.css Normal file
View File

@ -0,0 +1,53 @@
.post-card {
@apply p-8 border border-primary relative grid gap-12 bg-white;
grid-template-columns: 1fr 40px;
&.has-cover {
grid-template-columns: 1fr 3fr 40px;
}
.content-meta {
@apply mb-4;
.content-meta__type--revue {
@apply text-lg;
}
}
&__title {
@apply text-3xl font-normal;
}
&__date {
@apply capitalize pt-3 block;
}
&__cover {
@apply p-2 object-cover w-full h-36 relative;
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;
}
}
.issue-number {
@apply bg-primary text-white w-full h-auto flex items-center justify-center;
aspect-ratio: 1/1;
}
}