yisroelbaum/Rabbi_Gerzi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

space testimonial cards

Browse source
This commit is contained in:
Yisroel Baum 2026-06-06 22:45:51 +03:00
parent fa70a4a1b7
commit 289ecec44e
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
1 changed files with 16 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

24
frontend/rabbi_gerzi/src/views/HomePage.vue
View file

@ -698,10 +698,14 @@ const projects: Project[] = [
.testimonials { .testimonials {
background: var(--color-cream); background: var(--color-cream);
padding: 5rem 2rem; padding: 5rem 2rem;
--testimonials-card-gap: 24px;
--testimonials-card-height: 220px;
--testimonials-controls-gap: 0.75rem;
--testimonials-stage-width: 1008px;
} }
.testimonials__inner { .testimonials__inner {
max-width: 960px; max-width: var(--testimonials-stage-width);
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
@ -716,9 +720,9 @@ const projects: Project[] = [
.testimonials__stage { .testimonials__stage {
position: relative; position: relative;
width: min(100%, 960px); width: min(100%, var(--testimonials-stage-width));
height: var(--testimonials-card-height);
margin: 0 auto; margin: 0 auto;
min-height: 220px;
overflow: hidden; overflow: hidden;
} }
@ -727,8 +731,8 @@ const projects: Project[] = [
border-radius: 14px; border-radius: 14px;
padding: 2rem; padding: 2rem;
text-align: left; text-align: left;
width: 50%; width: calc(50% - var(--testimonials-card-gap));
max-width: 480px; height: var(--testimonials-card-height);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
@ -758,11 +762,11 @@ const projects: Project[] = [
} }
.testimonials__card--previous { .testimonials__card--previous {
transform: translateX(-150%); transform: translateX(calc(-150% - var(--testimonials-card-gap)));
} }
.testimonials__card--next { .testimonials__card--next {
transform: translateX(50%); transform: translateX(calc(50% + var(--testimonials-card-gap)));
} }
.testimonials__name { .testimonials__name {
@ -786,7 +790,7 @@ const projects: Project[] = [
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 0.75rem; gap: 0.75rem;
margin-top: 2rem; margin-top: var(--testimonials-controls-gap);
} }
.testimonials__arrow { .testimonials__arrow {
@ -1127,6 +1131,10 @@ const projects: Project[] = [
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.testimonials {
--testimonials-card-height: 320px;
}
.hero__content { .hero__content {
grid-template-columns: 1fr; grid-template-columns: 1fr;
text-align: center; text-align: center;