feat: add infrastructure flow and official iconography
This commit is contained in:
@@ -163,6 +163,7 @@
|
||||
|
||||
.portfolio-section figure {
|
||||
min-width: 0;
|
||||
margin-inline: 0;
|
||||
margin-block-start: var(--space-3);
|
||||
padding: var(--space-2);
|
||||
border: 1px solid var(--line);
|
||||
@@ -176,21 +177,120 @@
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
.portfolio-section svg {
|
||||
inline-size: 100%;
|
||||
block-size: auto;
|
||||
.infrastructure-case > p {
|
||||
max-inline-size: 78ch;
|
||||
}
|
||||
|
||||
.portfolio-section svg rect {
|
||||
fill: #172432;
|
||||
stroke: var(--cyan);
|
||||
stroke-width: 2;
|
||||
.infrastructure-flow {
|
||||
min-width: 0;
|
||||
padding: clamp(3.7rem, 6vw, 5.2rem) clamp(1rem, 2.5vw, 2rem) 2rem;
|
||||
}
|
||||
|
||||
.portfolio-section svg text {
|
||||
fill: var(--text);
|
||||
font-family: var(--sans);
|
||||
font-size: 19px;
|
||||
.infrastructure-flow__route {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-rows: auto auto;
|
||||
gap: 2.35rem clamp(1.9rem, 3vw, 3rem);
|
||||
}
|
||||
|
||||
.infrastructure-node {
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-block-size: 8rem;
|
||||
align-content: center;
|
||||
gap: 0.32rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-inline-start: 3px solid var(--cyan);
|
||||
border-radius: var(--radius-control);
|
||||
background: rgb(8 19 31 / 98%);
|
||||
box-shadow: 0 1rem 2.8rem rgb(0 5 14 / 24%);
|
||||
}
|
||||
|
||||
.infrastructure-node strong {
|
||||
color: var(--text);
|
||||
font-size: clamp(0.94rem, 1.3vw, 1.12rem);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.infrastructure-node__sequence,
|
||||
.infrastructure-boundary,
|
||||
.infrastructure-node__guard {
|
||||
font: 610 0.62rem/1.2 var(--mono);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.infrastructure-node__sequence {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.infrastructure-node__detail {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.infrastructure-node__guard {
|
||||
inline-size: fit-content;
|
||||
margin-block-start: 0.3rem;
|
||||
padding: 0.25rem 0.4rem;
|
||||
border: 1px solid rgb(244 173 103 / 42%);
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
.infrastructure-boundary {
|
||||
position: absolute;
|
||||
inset: -2.05rem auto auto -0.15rem;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.infrastructure-boundary::before {
|
||||
display: inline-block;
|
||||
inline-size: 0.65rem;
|
||||
margin-inline-end: 0.4rem;
|
||||
border-block-start: 1px dashed var(--line-strong);
|
||||
content: '';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.infrastructure-node__connector {
|
||||
position: absolute;
|
||||
inset: 50% 100% auto auto;
|
||||
inline-size: clamp(1.9rem, 3vw, 3rem);
|
||||
block-size: 1px;
|
||||
background: linear-gradient(90deg, var(--line-strong), var(--cyan));
|
||||
}
|
||||
|
||||
.infrastructure-node__connector::after {
|
||||
position: absolute;
|
||||
inset: -0.19rem 0 auto auto;
|
||||
inline-size: 0.36rem;
|
||||
block-size: 0.36rem;
|
||||
border-block-start: 1px solid var(--cyan);
|
||||
border-inline-end: 1px solid var(--cyan);
|
||||
content: '';
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.infrastructure-node--operations {
|
||||
grid-column: 4;
|
||||
grid-row: 2;
|
||||
border-inline-start-color: var(--amber);
|
||||
}
|
||||
|
||||
.infrastructure-node__connector--vertical {
|
||||
inset: auto auto 100% 50%;
|
||||
inline-size: 1px;
|
||||
block-size: 2.35rem;
|
||||
background: linear-gradient(180deg, var(--line-strong), var(--amber));
|
||||
}
|
||||
|
||||
.infrastructure-node__connector--vertical::after {
|
||||
inset: auto auto 0 -0.16rem;
|
||||
border-color: var(--amber);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
[data-testid='infrastructure-text-equivalent'] {
|
||||
@@ -308,43 +408,47 @@
|
||||
font-size: var(--step-0);
|
||||
}
|
||||
|
||||
.portfolio-section > div:not(.project-stage__projects, .compact-projects, .contact-destination) {
|
||||
.toolkit-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.portfolio-section > div > section {
|
||||
.toolkit-group {
|
||||
min-width: 0;
|
||||
padding-block-start: var(--space-2);
|
||||
border-block-start: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.portfolio-section > div > section ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.toolkit-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-1);
|
||||
margin-block-start: var(--space-2);
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.portfolio-section > div > section li {
|
||||
display: inline-flex;
|
||||
.toolkit-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1.15rem minmax(0, 1fr);
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
min-block-size: 2rem;
|
||||
min-block-size: 2.7rem;
|
||||
margin: 0;
|
||||
padding: 0.25rem 0.55rem;
|
||||
border: 1px solid var(--line);
|
||||
padding-block: 0.35rem;
|
||||
border-block-end: 1px solid var(--line);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
|
||||
.portfolio-section > div > section li span[aria-hidden='true'] {
|
||||
inline-size: 0.5rem;
|
||||
block-size: 0.5rem;
|
||||
border: 1px solid var(--cyan);
|
||||
border-radius: 50%;
|
||||
.brand-icon {
|
||||
inline-size: 1.05rem;
|
||||
block-size: 1.05rem;
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.toolkit-item .brand-icon {
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.contact-destination {
|
||||
@@ -389,11 +493,17 @@
|
||||
}
|
||||
|
||||
.contact-social-link {
|
||||
gap: 0.48rem;
|
||||
padding-inline: 0.2rem;
|
||||
font: 540 0.74rem/1 var(--mono);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.contact-social-link .brand-icon {
|
||||
inline-size: 1rem;
|
||||
block-size: 1rem;
|
||||
}
|
||||
|
||||
.project-media {
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -471,19 +581,67 @@
|
||||
margin-inline-start: 38%;
|
||||
}
|
||||
|
||||
.portfolio-section > div:not(.project-stage__projects, .compact-projects, .contact-destination) {
|
||||
.toolkit-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.infrastructure-flow {
|
||||
padding: 3.2rem 0.15rem 0.5rem;
|
||||
}
|
||||
|
||||
.infrastructure-flow__route {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: none;
|
||||
gap: 3.25rem;
|
||||
}
|
||||
|
||||
.infrastructure-node,
|
||||
.infrastructure-node--operations {
|
||||
grid-column: 1;
|
||||
grid-row: auto;
|
||||
min-block-size: 7.2rem;
|
||||
}
|
||||
|
||||
.infrastructure-node__connector,
|
||||
.infrastructure-node__connector--vertical {
|
||||
inset: auto auto 100% 50%;
|
||||
inline-size: 1px;
|
||||
block-size: 3.25rem;
|
||||
background: linear-gradient(180deg, var(--line-strong), var(--cyan));
|
||||
}
|
||||
|
||||
.infrastructure-node__connector::after,
|
||||
.infrastructure-node__connector--vertical::after {
|
||||
inset: auto auto 0 -0.16rem;
|
||||
border-color: var(--cyan);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.infrastructure-node--operations .infrastructure-node__connector {
|
||||
background: linear-gradient(180deg, var(--line-strong), var(--amber));
|
||||
}
|
||||
|
||||
.infrastructure-node--operations .infrastructure-node__connector::after {
|
||||
border-color: var(--amber);
|
||||
}
|
||||
|
||||
.infrastructure-boundary {
|
||||
inset-block-start: -1.85rem;
|
||||
}
|
||||
|
||||
.profile-facts,
|
||||
.project-evidence > div,
|
||||
[data-testid='infrastructure-text-equivalent'],
|
||||
.portfolio-section > div:not(.project-stage__projects, .compact-projects, .contact-destination) {
|
||||
.toolkit-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.toolkit-items {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.profile-facts dt {
|
||||
padding-block-end: 0.15rem;
|
||||
border-block-end: 0;
|
||||
|
||||
Reference in New Issue
Block a user