style: refine website section spacing
This commit is contained in:
+36
-14
@@ -1004,6 +1004,12 @@ a {
|
|||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.factory-section,
|
||||||
|
.control-section,
|
||||||
|
.deploy-section {
|
||||||
|
margin-block: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
.workflow-panel {
|
.workflow-panel {
|
||||||
padding: 34px;
|
padding: 34px;
|
||||||
}
|
}
|
||||||
@@ -1104,18 +1110,18 @@ a {
|
|||||||
|
|
||||||
.factory-section {
|
.factory-section {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
|
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
|
||||||
gap: 24px;
|
gap: clamp(34px, 5vw, 72px);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 34px;
|
padding: clamp(42px, 5vw, 66px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-section {
|
.control-section {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
|
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
|
||||||
gap: 24px;
|
gap: clamp(36px, 5vw, 78px);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 34px;
|
padding: clamp(42px, 5vw, 66px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-panel {
|
.control-panel {
|
||||||
@@ -1126,18 +1132,18 @@ a {
|
|||||||
.control-grid {
|
.control-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
gap: 10px;
|
gap: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-grid > div {
|
.control-grid > div {
|
||||||
min-height: 92px;
|
min-height: 108px;
|
||||||
display: grid;
|
display: grid;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
gap: 12px;
|
gap: 16px;
|
||||||
border: 1px solid var(--line);
|
border: 1px solid var(--line);
|
||||||
border-radius: 22px;
|
border-radius: 22px;
|
||||||
background: rgba(255, 255, 255, 0.03);
|
background: rgba(255, 255, 255, 0.03);
|
||||||
padding: 16px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-grid span {
|
.control-grid span {
|
||||||
@@ -1156,7 +1162,8 @@ a {
|
|||||||
.module-strip {
|
.module-strip {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 10px;
|
gap: 12px;
|
||||||
|
align-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.module-strip span {
|
.module-strip span {
|
||||||
@@ -1164,7 +1171,7 @@ a {
|
|||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background: rgba(255, 255, 255, 0.035);
|
background: rgba(255, 255, 255, 0.035);
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
padding: 11px 14px;
|
padding: 12px 16px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
@@ -1172,9 +1179,9 @@ a {
|
|||||||
.deploy-section {
|
.deploy-section {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.72fr);
|
grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.72fr);
|
||||||
gap: 24px;
|
gap: clamp(34px, 5vw, 72px);
|
||||||
align-items: end;
|
align-items: end;
|
||||||
padding: 34px;
|
padding: clamp(42px, 5vw, 66px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.deploy-stack {
|
.deploy-stack {
|
||||||
@@ -1238,6 +1245,14 @@ a {
|
|||||||
.endpoint-grid {
|
.endpoint-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.factory-section,
|
||||||
|
.control-section,
|
||||||
|
.deploy-section {
|
||||||
|
gap: 28px;
|
||||||
|
margin-block: 24px;
|
||||||
|
padding: 34px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
@@ -1333,6 +1348,13 @@ a {
|
|||||||
border-radius: 26px;
|
border-radius: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.factory-section,
|
||||||
|
.control-section,
|
||||||
|
.deploy-section {
|
||||||
|
gap: 22px;
|
||||||
|
margin-block: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
.mode-list div {
|
.mode-list div {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
|||||||
Reference in New Issue
Block a user