96 lines
2.5 KiB
CSS
96 lines
2.5 KiB
CSS
.post-header {
|
|
@apply bg-primary text-white py-32;
|
|
|
|
h1.post-header__title,
|
|
h2.post-header__title {
|
|
@apply uppercase font-medium text-4xl md:text-5xl lg:text-7xl text-white;
|
|
line-height: 1.2;
|
|
}
|
|
&__inner {
|
|
@apply container mx-auto grid gap-24;
|
|
&--has-thumbnail {
|
|
grid-template-columns: 1fr 4fr;
|
|
}
|
|
&--no-thumbnail {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
.content-meta__revue-issue {
|
|
@apply bg-white text-primary;
|
|
}
|
|
.thumbnail-wrapper {
|
|
@apply relative z-20;
|
|
aspect-ratio: 4/5;
|
|
padding: 1.2rem;
|
|
|
|
&:before {
|
|
content: '';
|
|
@apply bg-white block absolute top-0 left-0 border border-carhop-green-700 w-full h-full z-10;
|
|
}
|
|
|
|
img {
|
|
/* max-height: 200px; */
|
|
@apply w-full h-full relative z-10;
|
|
@apply object-cover;
|
|
/* width: calc(100% - 2rem);
|
|
height: calc(100% - 2rem);
|
|
margin: 0 auto; */
|
|
}
|
|
.thumbnail-overlay {
|
|
@apply absolute z-0 rotate-3 top-6 left-6 w-full h-full border border-primary bg-white flex items-center justify-center;
|
|
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;
|
|
&:after {
|
|
content: '';
|
|
@apply bg-carhop-purple-200;
|
|
width: calc(100% - 2rem);
|
|
height: calc(100% - 2rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-details {
|
|
@apply flex flex-wrap justify-between gap-28 mt-12;
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
&__label {
|
|
@apply uppercase font-bold text-lg text-white;
|
|
letter-spacing: 0.2em;
|
|
}
|
|
}
|
|
|
|
.socials-buttons {
|
|
@apply flex flex-wrap gap-4 h-fit;
|
|
|
|
&__button {
|
|
@apply bg-white text-carhop-green-700 px-4 lg:px-6 md:px-8 !py-3 lg:!py-4 font-normal rounded-full w-max flex items-center gap-2;
|
|
transition: transform 0.3s ease-in-out;
|
|
&:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
&[disabled] {
|
|
@apply opacity-50 cursor-not-allowed;
|
|
}
|
|
img {
|
|
@apply w-7 h-7 filter-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.article-meta__related-revue a {
|
|
@apply hover:underline underline-offset-8 text-white;
|
|
text-decoration-color: #fff;
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
|
|
.article-meta__value {
|
|
@apply text-white font-light tracking-wide;
|
|
letter-spacing: 0.0015em;
|
|
}
|