3024588
/
trihub-ernaehrung-advinters
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Responsive Paketbilder korrigiert und Menüfarbe angepasst 

Paketbilder proportional mit oberer Ausrichtung dargestellt und eine zweispaltige Zwischenansicht ergänzt. Gespeicherte Farbanpassung des Menüknopfs übernommen.
S-V-Navigation
3015418 2026-09-29 17:42:03 +02:00
parent 03c2bc7ab8
commit 7a2d0d8e26
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/leistungen.css
View File

@ -67,7 +67,7 @@
/* Kästchen nebeneinander, jede Karte für sich */ /* Kästchen nebeneinander, jede Karte für sich */
.pakete .pakete__grid { .pakete .pakete__grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem; gap: 1.5rem;
align-items: stretch; align-items: stretch;
} }
@ -75,6 +75,7 @@
.pakete .paket-karte { .pakete .paket-karte {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0;
background: var(--background-panel); background: var(--background-panel);
border: 1px solid rgba(248, 250, 252, 0.08); border: 1px solid rgba(248, 250, 252, 0.08);
border-radius: 14px; border-radius: 14px;
@ -109,7 +110,9 @@
} }
.pakete .paket-karte__image-wrapper { .pakete .paket-karte__image-wrapper {
width: 100%; width: 100%;
height: 180px; /* Proportional skalieren, damit beim Spaltenwechsel keine extremen Bildausschnitte entstehen. */
aspect-ratio: 3 / 2;
flex-shrink: 0;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
@ -118,6 +121,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
object-position: center top;
display: block; display: block;
} }
@ -221,10 +225,17 @@
@media (max-width: 860px) { @media (max-width: 860px) {
.pakete .pakete__grid { .pakete .pakete__grid {
grid-template-columns: 1fr; grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.pakete .paket-karte--empfohlen { .pakete .paket-karte--empfohlen {
order: -1; order: -1;
} }
} }
@media (max-width: 620px) {
.pakete .pakete__grid {
grid-template-columns: minmax(0, 480px);
justify-content: center;
}
}

2
css/navigation.css
View File

@ -144,7 +144,7 @@
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 10px; border-radius: 10px;
background: transparent; background: transparent;
color: var(--text-primary); color: var(--text-muted);
font: inherit; font: inherit;
font-size: 26px; font-size: 26px;
line-height: 1; line-height: 1;