style: refine website section spacing

This commit is contained in:
boos
2026-06-06 16:18:11 +08:00
parent d315f0ffe2
commit 023384b14b
+36 -14
View File
@@ -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;