Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handling post-card component style

Browse Source
This commit is contained in:
Antoine M 2024-07-02 16:10:51 +02:00
parent 259c30961c
commit 41fc7e5068
1 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
resources/css/blocks/post-card.css Normal file
View File

@ -0,0 +1,34 @@
.post-card {
@apply bg-white flex gap-8 items-center justify-between !p-6 rounded-xl shadowed my-4;
text-decoration: none !important;
&__cover {
@apply h-24 w-24 rounded-2xl;
}
&__tags {
@apply flex items-center gap-3 text-sm;
.tag {
@apply rounded-md;
padding-top: 0.36rem;
padding-bottom: 0.36rem;
}
}
&__title {
@apply !text-lg !font-bold text-black !mb-0 !mt-4;
}
&:hover {
@apply !bg-white !rounded-xl;
transform: translateX(4px) scale(1.02);
}
&:after {
@apply inline-block h-7 w-7 border-2 border-neutral-900 rounded-full shrink-0 mr-auto;
content: '';
margin-top: auto;
margin-bottom: auto;
background-image: url('../resources/img/graphic-assets/chevron_right.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 50% 50%;
}
}