feat: add public homepage and downloads
This commit is contained in:
QiuSW
@@ -0,0 +1,634 @@
|
||||
:root {
|
||||
--cm-paper: #F5F7FB;
|
||||
--cm-card: #FFFFFF;
|
||||
--cm-ink-strong: #161C2B;
|
||||
--cm-ink: #1A2030;
|
||||
--cm-ink-soft: #5A6478;
|
||||
--cm-faint: #8A93A6;
|
||||
--cm-line: #DCE1EC;
|
||||
--cm-indigo: #5B4BEF;
|
||||
--cm-indigo-deep: #3A2FB0;
|
||||
--cm-amber: #E8A02D;
|
||||
--cm-amber-ink: #C9821A;
|
||||
--cm-mint: #3FCB7E;
|
||||
--cm-chip-indigo: #ECEBFF;
|
||||
--cm-chip-amber: #FBEFD9;
|
||||
--cm-band-1: #1B1740;
|
||||
--cm-band-2: #2A1E5E;
|
||||
--cm-radius: 8px;
|
||||
--cm-radius-lg: 8px;
|
||||
--cm-font-cjk: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--cm-font-latin: "Space Grotesk", system-ui, sans-serif;
|
||||
--cm-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
|
||||
--cm-btn: linear-gradient(#6455F2, #4335CF);
|
||||
--cm-thread: linear-gradient(#5B4BEF, #E8A02D);
|
||||
--cm-shadow: 0 18px 42px rgba(22, 28, 43, 0.09);
|
||||
--cmhub-bg: var(--cm-paper);
|
||||
--cmhub-ink: var(--cm-ink);
|
||||
--cmhub-line: var(--cm-line);
|
||||
--cmhub-accent: var(--cm-indigo);
|
||||
--bs-body-font-family: var(--cm-font-cjk);
|
||||
--bs-body-color: var(--cm-ink);
|
||||
--bs-body-bg: var(--cm-paper);
|
||||
--bs-border-color: var(--cm-line);
|
||||
--bs-link-color: var(--cm-indigo);
|
||||
--bs-link-hover-color: var(--cm-indigo-deep);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--cm-paper);
|
||||
color: var(--cm-ink);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-bottom: 1px solid var(--cm-line);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
align-items: center;
|
||||
color: var(--cm-ink-strong);
|
||||
display: inline-flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.navbar-brand::before {
|
||||
background:
|
||||
linear-gradient(to top, var(--cm-indigo) 46%, transparent 46%) 0 100% / 5px 18px no-repeat,
|
||||
linear-gradient(to top, var(--cm-indigo) 68%, transparent 68%) 9px 100% / 5px 18px no-repeat,
|
||||
linear-gradient(to top, var(--cm-amber) 92%, transparent 92%) 18px 100% / 5px 18px no-repeat;
|
||||
border: 1px solid var(--cm-line);
|
||||
border-radius: 7px;
|
||||
content: "";
|
||||
height: 28px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.cmhub-shell {
|
||||
margin: 0 auto;
|
||||
max-width: 1080px;
|
||||
padding: 40px 16px;
|
||||
}
|
||||
|
||||
.cmhub-panel {
|
||||
background: var(--cm-card);
|
||||
border: 1px solid var(--cm-line);
|
||||
border-radius: var(--cm-radius);
|
||||
box-shadow: var(--cm-shadow);
|
||||
margin: 0 auto;
|
||||
max-width: 440px;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.cmhub-panel form p {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cmhub-panel label {
|
||||
color: var(--cm-ink-strong);
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.cmhub-panel input {
|
||||
border: 1px solid #B9C2CF;
|
||||
border-radius: var(--cm-radius);
|
||||
min-height: 40px;
|
||||
padding: 8px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cmhub-panel .errorlist {
|
||||
color: #B42318;
|
||||
margin: 0 0 12px;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
--bs-btn-bg: var(--cm-indigo);
|
||||
--bs-btn-border-color: var(--cm-indigo);
|
||||
--bs-btn-hover-bg: var(--cm-indigo-deep);
|
||||
--bs-btn-hover-border-color: var(--cm-indigo-deep);
|
||||
--bs-btn-active-bg: var(--cm-indigo-deep);
|
||||
--bs-btn-active-border-color: var(--cm-indigo-deep);
|
||||
background-image: var(--cm-btn);
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--bs-btn-color: var(--cm-ink);
|
||||
--bs-btn-border-color: var(--cm-line);
|
||||
--bs-btn-hover-bg: var(--cm-chip-indigo);
|
||||
--bs-btn-hover-border-color: var(--cm-indigo);
|
||||
--bs-btn-hover-color: var(--cm-indigo-deep);
|
||||
}
|
||||
|
||||
.metric,
|
||||
.cmhub-surface {
|
||||
background: var(--cm-card);
|
||||
border: 1px solid var(--cm-line);
|
||||
border-radius: var(--cm-radius);
|
||||
box-shadow: 0 10px 30px rgba(22, 28, 43, 0.05);
|
||||
}
|
||||
|
||||
.metric {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.metric .display-6,
|
||||
.metric .h5,
|
||||
.cmhub-surface h2 {
|
||||
color: var(--cm-ink-strong);
|
||||
}
|
||||
|
||||
.metric .display-6 {
|
||||
color: var(--cm-amber-ink);
|
||||
font-family: var(--cm-font-mono);
|
||||
}
|
||||
|
||||
.cmhub-surface {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.key-value,
|
||||
code,
|
||||
.font-monospace {
|
||||
font-family: var(--cm-font-mono);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.table {
|
||||
--bs-table-bg: transparent;
|
||||
--bs-table-color: var(--cm-ink);
|
||||
--bs-table-border-color: var(--cm-line);
|
||||
}
|
||||
|
||||
.badge.text-bg-secondary {
|
||||
background-color: var(--cm-ink-soft) !important;
|
||||
}
|
||||
|
||||
.badge.text-bg-warning {
|
||||
background-color: var(--cm-chip-amber) !important;
|
||||
color: var(--cm-amber-ink) !important;
|
||||
}
|
||||
|
||||
.badge.text-bg-success {
|
||||
background-color: var(--cm-mint) !important;
|
||||
color: #0E3B24 !important;
|
||||
}
|
||||
|
||||
.home-page .navbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.home-main {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home-container {
|
||||
margin: 0 auto;
|
||||
max-width: 1180px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.home-hero {
|
||||
min-height: calc(100vh - 56px);
|
||||
padding: 64px 0 34px;
|
||||
}
|
||||
|
||||
.home-hero-grid {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: 42px;
|
||||
grid-template-columns: minmax(0, 0.96fr) minmax(360px, 1.04fr);
|
||||
}
|
||||
|
||||
.home-eyebrow {
|
||||
color: var(--cm-indigo);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.home-hero h1,
|
||||
.home-section-title,
|
||||
.home-band-title {
|
||||
color: var(--cm-ink-strong);
|
||||
font-family: var(--cm-font-latin), var(--cm-font-cjk);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.home-hero h1 {
|
||||
font-size: clamp(2.35rem, 5vw, 3.55rem);
|
||||
line-height: 1.05;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.home-lead {
|
||||
color: var(--cm-ink-soft);
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.75;
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
.home-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.home-proof {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.home-chip {
|
||||
align-items: center;
|
||||
background: var(--cm-card);
|
||||
border: 1px solid var(--cm-line);
|
||||
border-radius: 999px;
|
||||
color: var(--cm-ink-soft);
|
||||
display: inline-flex;
|
||||
font-size: 0.88rem;
|
||||
gap: 8px;
|
||||
min-height: 34px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.home-chip::before {
|
||||
background: var(--cm-mint);
|
||||
border-radius: 999px;
|
||||
content: "";
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.home-stage {
|
||||
background: var(--cm-card);
|
||||
border: 1px solid var(--cm-line);
|
||||
border-radius: var(--cm-radius-lg);
|
||||
box-shadow: var(--cm-shadow);
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.home-product-shot {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(91, 75, 239, 0.08), rgba(232, 160, 45, 0.16)),
|
||||
var(--cm-paper);
|
||||
border: 1px solid var(--cm-line);
|
||||
border-radius: var(--cm-radius);
|
||||
min-height: 160px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.home-product-frame {
|
||||
align-items: center;
|
||||
background: #FBFCFF;
|
||||
border: 1px solid var(--cm-line);
|
||||
border-radius: var(--cm-radius);
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
min-height: 120px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.home-product-image {
|
||||
align-items: center;
|
||||
background: linear-gradient(145deg, #E8EBF7, #FFFFFF);
|
||||
border: 1px solid var(--cm-line);
|
||||
border-radius: var(--cm-radius);
|
||||
color: var(--cm-indigo);
|
||||
display: flex;
|
||||
flex: 0 0 108px;
|
||||
font-weight: 700;
|
||||
height: 92px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.home-product-copy {
|
||||
color: var(--cm-ink-soft);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.home-thread {
|
||||
background: var(--cm-thread);
|
||||
border-radius: 999px;
|
||||
height: 56px;
|
||||
margin: 16px auto;
|
||||
position: relative;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.home-thread::before,
|
||||
.home-thread::after {
|
||||
background: var(--cm-card);
|
||||
border: 2px solid var(--cm-line);
|
||||
border-radius: 999px;
|
||||
content: "";
|
||||
height: 12px;
|
||||
left: -4px;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.home-thread::before {
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.home-thread::after {
|
||||
bottom: -2px;
|
||||
}
|
||||
|
||||
.home-output-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.home-output {
|
||||
border: 1px solid var(--cm-line);
|
||||
border-radius: var(--cm-radius);
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.home-output-title {
|
||||
color: var(--cm-ink-strong);
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.home-output-text {
|
||||
color: var(--cm-ink-soft);
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.home-point-pill {
|
||||
background: var(--cm-chip-amber);
|
||||
border-radius: 999px;
|
||||
color: var(--cm-amber-ink);
|
||||
display: inline-flex;
|
||||
font-family: var(--cm-font-mono);
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
margin-top: 12px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.home-section {
|
||||
padding: 70px 0;
|
||||
}
|
||||
|
||||
.home-section-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
gap: 24px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.home-section-title {
|
||||
font-size: clamp(1.9rem, 4vw, 2.4rem);
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.home-section-copy {
|
||||
color: var(--cm-ink-soft);
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.home-steps,
|
||||
.home-cards {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.home-steps {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.home-cards {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.home-step,
|
||||
.home-card,
|
||||
.home-download-box {
|
||||
background: var(--cm-card);
|
||||
border: 1px solid var(--cm-line);
|
||||
border-radius: var(--cm-radius);
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.home-step-num {
|
||||
color: var(--cm-indigo);
|
||||
font-family: var(--cm-font-mono);
|
||||
font-size: 0.86rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.home-step h3,
|
||||
.home-card h3,
|
||||
.home-download-box h3 {
|
||||
color: var(--cm-ink-strong);
|
||||
font-size: 1.12rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.home-step p,
|
||||
.home-card p,
|
||||
.home-download-box p {
|
||||
color: var(--cm-ink-soft);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.home-card {
|
||||
min-height: 210px;
|
||||
}
|
||||
|
||||
.home-card-icon {
|
||||
align-items: center;
|
||||
background: var(--cm-chip-indigo);
|
||||
border-radius: var(--cm-radius);
|
||||
color: var(--cm-indigo-deep);
|
||||
display: inline-flex;
|
||||
font-weight: 700;
|
||||
height: 44px;
|
||||
justify-content: center;
|
||||
margin-bottom: 22px;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.home-band {
|
||||
background: linear-gradient(135deg, var(--cm-band-1), var(--cm-band-2));
|
||||
color: #FFFFFF;
|
||||
padding: 62px 0;
|
||||
}
|
||||
|
||||
.home-band-grid {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
}
|
||||
|
||||
.home-band-title {
|
||||
color: #FFFFFF;
|
||||
font-size: clamp(1.9rem, 4vw, 2.35rem);
|
||||
line-height: 1.18;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.home-band p {
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
line-height: 1.75;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.home-band-meter {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: var(--cm-radius);
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.home-band-meter strong {
|
||||
color: var(--cm-amber);
|
||||
display: block;
|
||||
font-family: var(--cm-font-mono);
|
||||
font-size: 2.2rem;
|
||||
line-height: 1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.home-download-grid {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.74fr);
|
||||
}
|
||||
|
||||
.home-release-meta {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.home-release-row {
|
||||
align-items: start;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 96px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.home-release-row span {
|
||||
color: var(--cm-faint);
|
||||
}
|
||||
|
||||
.home-release-row strong,
|
||||
.home-release-row code {
|
||||
color: var(--cm-ink);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.home-notice {
|
||||
background: var(--cm-chip-amber);
|
||||
border: 1px solid rgba(232, 160, 45, 0.34);
|
||||
border-radius: var(--cm-radius);
|
||||
color: #6F4708;
|
||||
line-height: 1.7;
|
||||
margin-top: 18px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.home-links {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.home-link-row {
|
||||
align-items: center;
|
||||
border: 1px solid var(--cm-line);
|
||||
border-radius: var(--cm-radius);
|
||||
color: var(--cm-ink);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-height: 54px;
|
||||
padding: 12px 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.home-link-row:hover {
|
||||
background: var(--cm-chip-indigo);
|
||||
color: var(--cm-indigo-deep);
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.home-hero-grid,
|
||||
.home-band-grid,
|
||||
.home-download-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.home-steps {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.cmhub-shell {
|
||||
padding: 28px 12px;
|
||||
}
|
||||
|
||||
.home-container {
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.home-hero {
|
||||
min-height: auto;
|
||||
padding: 44px 0 28px;
|
||||
}
|
||||
|
||||
.home-hero-grid,
|
||||
.home-output-grid,
|
||||
.home-steps,
|
||||
.home-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.home-section-heading {
|
||||
align-items: start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home-actions .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.home-product-frame,
|
||||
.home-release-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.home-product-frame {
|
||||
align-items: stretch;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.home-product-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user