style: run Operations under the infrastructure route as a base rail
This commit is contained in:
@@ -173,3 +173,37 @@
|
|||||||
clip-path: inset(-40px -40px -40px -40px);
|
clip-path: inset(-40px -40px -40px -40px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---------- Infrastructure diagram: Operations is the base rail ----------
|
||||||
|
Operations sustains the whole route, so on wide screens it runs under all
|
||||||
|
four stages as one slim rail instead of a fifth card hanging below the
|
||||||
|
last, which left three empty cells beside it. Its connector still drops
|
||||||
|
from Containerized services: the centre of the fourth column is
|
||||||
|
87.5% of the row plus three-eighths of one column gap. */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.infrastructure-flow {
|
||||||
|
--route-gap: clamp(1.9rem, 3vw, 3rem);
|
||||||
|
padding-block-end: 1.25rem;
|
||||||
|
}
|
||||||
|
.infrastructure-flow__route {
|
||||||
|
column-gap: var(--route-gap);
|
||||||
|
row-gap: 2rem;
|
||||||
|
}
|
||||||
|
.infrastructure-node.infrastructure-node--operations {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.35rem 1.1rem;
|
||||||
|
min-block-size: 0;
|
||||||
|
padding-block: 0.9rem;
|
||||||
|
}
|
||||||
|
.infrastructure-node--operations .infrastructure-node__connector--vertical {
|
||||||
|
inset-inline-start: calc(87.5% + 0.375 * var(--route-gap));
|
||||||
|
inline-size: 1px;
|
||||||
|
block-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) and (max-width: 1100px) {
|
||||||
|
.infrastructure-flow { --route-gap: 20px; }
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user