Invario/Key-service-Server
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Refactor package card header and price styling for improved layout and responsiveness

Browse Source
This commit is contained in:
AIIrondev
2026-05-06 17:38:08 +02:00
parent 1632a51c18
commit 36aab2c95a
1 changed files with 15 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Website/templates/appointments.html
+15 -21
View File
@@ -69,18 +69,15 @@
.package-card__header { .package-card__header {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
gap: 1rem; gap: 1.2rem;
flex-wrap: wrap;
} }
.package-card__header > div { .package-card__header > div {
min-width: 0; min-width: 0;
} width: 100%;
.package-card__header > div:first-child {
flex: 1 1 0;
} }
.package-card__tag { .package-card__tag {
@@ -94,13 +91,15 @@
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.01em; letter-spacing: 0.01em;
margin-bottom: 0.6rem;
} }
.package-card__name { .package-card__name {
margin: 0; margin: 0;
color: #143f46; color: #143f46;
font-size: clamp(1.4rem, 2.5vw, 2rem); font-size: clamp(1.4rem, 2.5vw, 1.8rem);
line-height: 1.08; line-height: 1.2;
word-wrap: break-word;
} }
.package-card__price { .package-card__price {
@@ -109,12 +108,14 @@
gap: 0.35rem; gap: 0.35rem;
font-weight: 700; font-weight: 700;
color: #102d37; color: #102d37;
white-space: nowrap; white-space: normal;
margin-top: 0.2rem;
} }
.package-card__price span { .package-card__price span {
font-size: clamp(2rem, 3vw, 2.75rem); font-size: clamp(1.8rem, 3vw, 2.4rem);
letter-spacing: -0.04em; letter-spacing: -0.04em;
line-height: 1.1;
} }
.package-card__price small { .package-card__price small {
@@ -200,10 +201,6 @@
color: #15444c; color: #15444c;
} }
.package-card__tag + .package-card__name {
margin-top: 0.4rem;
}
@media (max-width: 760px) { @media (max-width: 760px) {
.booking-hero { .booking-hero {
padding: 1.5rem 1.2rem; padding: 1.5rem 1.2rem;
@@ -226,18 +223,15 @@
} }
.package-card__header { .package-card__header {
flex-direction: column; gap: 0.8rem;
align-items: flex-start;
gap: 0.6rem;
} }
.package-card__price { .package-card__price {
justify-content: flex-start; margin-top: 0;
margin-top: 0.2rem;
} }
.package-card__price span { .package-card__price span {
font-size: 2.2rem; font-size: 2rem;
} }
.btn { .btn {