Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

REFACTOR the new author and member cards system

Browse Source
This commit is contained in:
Antoine M 2026-02-24 15:07:17 +01:00
parent 3aeefe4fb6
commit 95f21975bc
3 changed files with 110 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
resources/css/components/author-card.css
View File

@ -1,46 +1,69 @@
.author-card {
@apply bg-white p-8 border border-carhop-green-700 mb-0 flex flex-col;
@apply grid w-full border border-primary p-6 mb-12 items-center bg-white;
grid-template-columns: auto 1fr;
gap: 1rem;
&--director {
@apply bg-primary;
p,
.author-card__name a,
.author-card__bio {
@apply text-white;
transition: all 0.3s ease-in-out;
&:hover {
@apply translate-y-[-4px];
}
&__profile-picture {
@apply w-32 h-32 object-cover p-2 border border-primary;
img {
@apply w-full h-full object-cover;
}
&-placeholder {
@apply bg-carhop-green-100 flex items-center justify-center;
&:before {
content: '';
@apply block w-6 h-6 filter-primary;
background-image: url('../resources/img/icons/icon-losange.svg');
background-size: contain;
background-repeat: no-repeat !important;
background-position: center;
}
&--1n:before {
background-image: url('../resources/img/icons/icon-losange.svg');
}
&--2n:before {
background-image: url('../resources/img/icons/icon-rectangle-rotated.svg');
}
&--3n:before {
background-image: url('../resources/img/icons/icon-circle.svg');
}
&--4n:before {
background-image: url('../resources/img/icons/icon-rectangle-vertical.svg');
}
}
&-placeholder {
@apply w-full h-full bg-carhop-green-100 relative;
}
}
&__infos {
@apply w-full flex flex-col gap-y-2;
.author-card__name {
@apply text-2xl uppercase font-medium tracking-normal;
}
.author-card__email {
@apply bg-white text-primary;
&:hover {
@apply bg-carhop-green-900;
.author-card__articles-amount {
@apply text-primary font-normal flex items-center gap-2;
&::before {
content: '';
@apply block w-6 h-6 bg-no-repeat bg-center;
background-image: url('../resources/img/icons/icon-activites.svg');
background-size: contain;
}
}
}
&__profile-picture {
@apply w-full h-40 object-cover mb-6 border border-carhop-green-700 relative bg-white;
}
&__name {
@apply text-2xl font-medium !mb-0 !pb-0 uppercase text-primary;
a {
@apply !text-primary;
}
}
&__email {
@apply mt-8 text-lg !normal-case mx-auto;
&:is(a) {
@apply !text-primary;
}
&:hover {
@apply !text-white;
}
}
&__bio {
@apply text-base text-primary text-center leading-relaxed;
&__description {
@apply col-span-2;
}
}

74
resources/css/components/member-author-card.css
View File

@ -1,74 +0,0 @@
.author-card {
@apply grid w-full border border-primary p-6 mb-12 items-center;
grid-template-columns: min-content 1fr;
gap: 1rem;
transition: all 0.3s ease-in-out;
&:hover {
@apply translate-y-[-4px];
}
&__profile-picture {
@apply w-32 h-32 object-cover p-2 border border-primary;
img {
@apply w-full h-full object-cover;
/* filter: grayscale(100%); */
}
&-placeholder {
@apply bg-carhop-green-100 flex items-center justify-center;
&:before {
content: '';
@apply block w-6 h-6 filter-primary;
background-image: url('../resources/img/icons/icon-losange.svg');
background-size: contain;
background-repeat: no-repeat !important;
background-position: center;
}
&--1n:before {
background-image: url('../resources/img/icons/icon-losange.svg');
}
&--2n:before {
background-image: url('../resources/img/icons/icon-rectangle-rotated.svg');
}
&--3n:before {
background-image: url('../resources/img/icons/icon-circle.svg');
}
&--4n:before {
background-image: url('../resources/img/icons/icon-rectangle-vertical.svg');
}
}
&-placeholder {
@apply w-full h-full bg-carhop-green-100 relative;
/* &:after {
@apply content-[''] block w-6 h-6 bg-carhop-green-700 rounded-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
} */
}
}
&__infos {
@apply w-full flex flex-col gap-y-2;
.author-card__name {
@apply text-2xl uppercase font-medium tracking-normal;
}
.author-card__articles-amount {
@apply text-primary font-normal flex items-center gap-2;
&::before {
content: '';
@apply block w-6 h-6 bg-no-repeat bg-center;
background-image: url('../resources/img/icons/icon-activites.svg');
background-size: contain;
}
}
}
&__description {
@apply col-span-2;
}
}

51
resources/css/components/member-card.css Normal file
View File

@ -0,0 +1,51 @@
.member-card {
@apply bg-white p-8 border border-carhop-green-700 mb-0 flex flex-col items-center;
gap: 1rem;
&--director {
@apply bg-primary;
p,
.member-card__name a,
.member-card__bio {
@apply text-white;
}
.member-card__email {
@apply bg-white text-primary;
&:hover {
@apply bg-carhop-green-900;
}
}
}
&__profile-picture {
@apply w-full h-40 object-cover mb-6 relative bg-white p-2 border border-primary;
img {
@apply w-full h-full object-cover;
/* filter: grayscale(100%); */
}
}
&__name {
@apply text-2xl font-medium !mb-0 !pb-0 uppercase text-primary;
a {
@apply !text-primary;
}
}
&__email {
@apply mt-8 text-lg !normal-case mx-auto;
&:is(a) {
@apply !text-primary;
}
&:hover {
@apply !text-white;
}
}
&__bio {
@apply text-base text-primary text-center leading-relaxed;
}
}