fix(site): align the homepage panels and cards without fixed heights

The two code panels and the three journey cards were lined up with
min-height: 420px and min-height: 5.1rem, which break as soon as a
paragraph gains a line. Let the grid stretch the panels and push each
card's link list down with margin-top: auto instead.
This commit is contained in:
Valentin Maerten
2026-08-30 14:22:59 +02:00
parent c8e814333c
commit a0b39ca549

View File

@@ -353,7 +353,7 @@ function track(event: string) {
}
.code-panel :deep(pre) {
min-height: 420px;
flex: 1;
min-width: 0;
margin: 0;
overflow: auto;
@@ -404,6 +404,8 @@ function track(event: string) {
.path-grid article {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
padding: 1.5rem;
border: 1px solid var(--vp-c-divider);
@@ -425,7 +427,6 @@ function track(event: string) {
}
.path-grid p {
min-height: 5.1rem;
margin: 0.75rem 0 1rem;
color: var(--vp-c-text-2);
font-size: 0.9rem;
@@ -435,7 +436,7 @@ function track(event: string) {
.path-grid ul {
display: grid;
gap: 0.55rem;
margin: 0;
margin: auto 0 0;
padding: 1rem 0 0;
border-top: 1px solid var(--vp-c-divider);
list-style: none;
@@ -468,14 +469,6 @@ function track(event: string) {
border-top: 1px solid var(--vp-c-divider);
border-left: 0;
}
.code-panel :deep(pre) {
min-height: auto;
}
.path-grid p {
min-height: 0;
}
}
@media (max-width: 560px) {