62 lines
1.1 KiB
CSS
62 lines
1.1 KiB
CSS
.article-card {
|
|
@apply p-6 relative !flex flex-col pt-16;
|
|
|
|
svg {
|
|
@apply absolute top-0 left-0 w-full h-full;
|
|
z-index: -1;
|
|
path {
|
|
stroke-width: 0;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
svg {
|
|
path {
|
|
stroke-width: 8px;
|
|
}
|
|
}
|
|
&:after {
|
|
opacity: 1;
|
|
}
|
|
.article-card__link-button {
|
|
svg {
|
|
@apply translate-x-2;
|
|
}
|
|
}
|
|
}
|
|
&__link-button {
|
|
@apply block mt-8;
|
|
width: 100px;
|
|
height: 100px;
|
|
svg {
|
|
transition: transform 0.3s ease-in-out;
|
|
|
|
path,
|
|
circle {
|
|
@apply stroke-primary;
|
|
}
|
|
}
|
|
}
|
|
.content-meta {
|
|
@apply text-primary;
|
|
}
|
|
&__title {
|
|
@apply text-2xl font-medium uppercase pb-4;
|
|
}
|
|
&__tags {
|
|
@apply flex flex-wrap gap-4 pt-4;
|
|
}
|
|
&__cover {
|
|
@apply w-48 h-48 absolute border-primary border bottom-12 right-12 hidden lg:block;
|
|
transform: rotate(-3deg);
|
|
|
|
img {
|
|
@apply w-full h-full object-cover;
|
|
}
|
|
}
|
|
.cta--go {
|
|
@apply text-primary mt-auto;
|
|
}
|
|
}
|