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);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 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