From 4eaf10e753d9c4d71a140406adeaff661faa3ddf Mon Sep 17 00:00:00 2001 From: Falck Date: Mon, 6 Apr 2026 17:03:11 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E7=BD=91=E9=A1=B5CSS=E8=BF=9B?= =?UTF-8?q?=E8=A1=8C=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- website/architecture.html | 4 +- website/css/dock.css | 65 ++++++-- website/css/docs.css | 275 +++++++++++++++++++++++++++++++-- website/css/hero.css | 26 ++++ website/css/main.css | 55 ++++++- website/css/page.css | 221 ++++++++++++++++++++++---- website/css/quickstart.css | 65 -------- website/docs/architecture.html | 65 +++++++- website/docs/development.html | 65 +++++++- website/docs/index.html | 67 +++++++- website/docs/plugins.html | 65 +++++++- website/docs/quickstart.html | 106 ------------- website/docs/why-python.html | 65 +++++++- website/features.html | 4 +- website/index.html | 6 +- website/js/dock.js | 2 - website/js/parallax.js | 61 +++++--- website/plugins.html | 4 +- website/quickstart.html | 72 --------- website/sitemap.xml | 7 - 20 files changed, 951 insertions(+), 349 deletions(-) delete mode 100644 website/css/quickstart.css delete mode 100644 website/docs/quickstart.html delete mode 100644 website/quickstart.html diff --git a/website/architecture.html b/website/architecture.html index f726e30..f17fd37 100644 --- a/website/architecture.html +++ b/website/architecture.html @@ -24,13 +24,13 @@
-
+
架构设计

插件驱动的分层架构

一切皆为插件，框架本身只提供核心能力

-
+
Future OSS 核心
diff --git a/website/css/dock.css b/website/css/dock.css index d35161f..8032b22 100644 --- a/website/css/dock.css +++ b/website/css/dock.css @@ -1,4 +1,4 @@ -/* ===== Dock 侧边栏 ===== */ +/* ===== Dock 侧边栏 - 苹果液态玻璃 ===== */ #dock { position: fixed; right: 20px; @@ -9,30 +9,69 @@ flex-direction: column; align-items: center; gap: 8px; - padding: 12px 8px; - background: rgba(3, 7, 18, 0.7); - backdrop-filter: blur(16px); - border: 1px solid var(--border); - border-radius: 16px; + padding: 14px 10px; + /* 苹果液态玻璃 */ + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.18) 0%, + rgba(255, 255, 255, 0.08) 100% + ); + backdrop-filter: blur(50px) saturate(200%); + -webkit-backdrop-filter: blur(50px) saturate(200%); + border: 1px solid rgba(255, 255, 255, 0.25); + border-radius: 22px; + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.15), + 0 4px 12px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.6), + inset 0 -1px 0 rgba(255, 255, 255, 0.15); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +#dock:hover { + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.22) 0%, + rgba(255, 255, 255, 0.12) 100% + ); + border-color: rgba(255, 255, 255, 0.35); + box-shadow: + 0 16px 48px rgba(0, 0, 0, 0.18), + 0 6px 16px rgba(0, 0, 0, 0.12), + inset 0 1px 0 rgba(255, 255, 255, 0.7), + inset 0 -1px 0 rgba(255, 255, 255, 0.2); } .dock-item { display: flex; align-items: center; justify-content: center; - width: 36px; - height: 36px; - border-radius: 10px; + width: 38px; + height: 38px; + border-radius: 12px; color: var(--text-secondary); text-decoration: none; - transition: all 0.25s ease; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .dock-item:hover, .dock-item.active { - color: var(--cyan-light); - background: rgba(6, 182, 212, 0.15); - transform: scale(1.15); + color: #fff; + /* 苹果风格高光滑 */ + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.3) 0%, + rgba(255, 255, 255, 0.15) 100% + ); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.4); + transform: scale(1.2); + box-shadow: + 0 6px 16px rgba(0, 0, 0, 0.15), + 0 2px 6px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.8), + inset 0 -1px 0 rgba(255, 255, 255, 0.2); } .dock-item svg { diff --git a/website/css/docs.css b/website/css/docs.css index 1d6501a..b1dad02 100644 --- a/website/css/docs.css +++ b/website/css/docs.css @@ -8,7 +8,7 @@ overflow: hidden; } -/* 顶部栏 */ +/* 顶部栏 - 苹果液态玻璃 */ .docs-header { height: 56px; flex-shrink: 0; @@ -16,12 +16,86 @@ align-items: center; gap: 16px; padding: 0 24px; - background: rgba(3, 7, 18, 0.95); - border-bottom: 1px solid var(--border); - backdrop-filter: blur(12px); + /* 苹果液态玻璃 */ + background: linear-gradient( + 135deg, + rgba(3, 7, 18, 0.75) 0%, + rgba(3, 7, 18, 0.6) 100% + ); + backdrop-filter: blur(50px) saturate(200%); + -webkit-backdrop-filter: blur(50px) saturate(200%); + border-bottom: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); z-index: 100; } +/* 汉堡菜单按钮 - 苹果风格 */ +.docs-hamburger { + display: none; + width: 40px; + height: 40px; + border: none; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.08) 0%, + rgba(255, 255, 255, 0.03) 100% + ); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.1); + cursor: pointer; + position: relative; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + flex-shrink: 0; + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.3); +} + +.docs-hamburger:hover { + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.12) 0%, + rgba(255, 255, 255, 0.06) 100% + ); + border-color: rgba(255, 255, 255, 0.2); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.5); +} + +.docs-hamburger-line { + position: absolute; + left: 50%; + width: 20px; + height: 2px; + background: var(--text-secondary); + border-radius: 1px; + transform: translateX(-50%); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.docs-hamburger-line:nth-child(1) { top: 14px; } +.docs-hamburger-line:nth-child(2) { top: 19px; } +.docs-hamburger-line:nth-child(3) { top: 24px; } + +/* 汉堡菜单激活状态 - 变为 X */ +.docs-hamburger.is-active .docs-hamburger-line:nth-child(1) { + top: 19px; + transform: translateX(-50%) rotate(45deg); +} + +.docs-hamburger.is-active .docs-hamburger-line:nth-child(2) { + opacity: 0; + transform: translateX(-50%) scaleX(0); +} + +.docs-hamburger.is-active .docs-hamburger-line:nth-child(3) { + top: 19px; + transform: translateX(-50%) rotate(-45deg); +} + .docs-header-title { display: flex; align-items: center; @@ -74,14 +148,42 @@ overflow: hidden; } -/* 左侧导航 */ +/* 左侧导航 - 苹果液态玻璃 */ .docs-sidebar { width: 260px; flex-shrink: 0; - background: rgba(2, 5, 16, 0.6); - border-right: 1px solid var(--border); + /* 苹果液态玻璃 */ + background: linear-gradient( + 135deg, + rgba(2, 5, 16, 0.65) 0%, + rgba(2, 5, 16, 0.5) 100% + ); + backdrop-filter: blur(40px) saturate(180%); + -webkit-backdrop-filter: blur(40px) saturate(180%); + border-right: 1px solid rgba(255, 255, 255, 0.1); overflow-y: auto; padding: 20px 0; + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* 移动端遮罩层 */ +.docs-sidebar-overlay { + display: none; +} + +/* 液态玻璃效果 - 通用类 */ +.liquid-glass { + background: rgba(255, 255, 255, 0.02); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +.liquid-glass-strong { + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.08); } .docs-nav-section { @@ -126,7 +228,7 @@ font-family: 'JetBrains Mono', monospace; } -/* 左下角固定按钮 */ +/* 左下角固定按钮 - 苹果液态玻璃 */ .docs-wiki-btn { position: fixed; bottom: 24px; @@ -135,21 +237,39 @@ align-items: center; gap: 8px; padding: 12px 20px; - background: linear-gradient(135deg, var(--cyan), var(--blue)); - border: none; - border-radius: 12px; + /* 苹果液态玻璃按钮 */ + background: linear-gradient( + 135deg, + rgba(6, 182, 212, 0.8) 0%, + rgba(59, 130, 246, 0.7) 100% + ); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 16px; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; z-index: 200; - box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3); - transition: all 0.2s; + box-shadow: + 0 8px 24px rgba(6, 182, 212, 0.3), + 0 2px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.4); + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .docs-wiki-btn:hover { - transform: translateY(-2px); - box-shadow: 0 8px 30px rgba(6, 182, 212, 0.4); + transform: translateY(-2px) scale(1.05); + background: linear-gradient( + 135deg, + rgba(6, 182, 212, 0.9) 0%, + rgba(59, 130, 246, 0.8) 100% + ); + box-shadow: + 0 12px 32px rgba(6, 182, 212, 0.4), + 0 4px 12px rgba(0, 0, 0, 0.25), + inset 0 1px 0 rgba(255, 255, 255, 0.6); } .docs-wiki-btn svg { @@ -282,7 +402,130 @@ } @media (max-width: 768px) { - .docs-sidebar { display: none; } + /* 显示汉堡菜单按钮 */ + .docs-hamburger { + display: block; + } + + /* 隐藏桌面端面包屑 */ + .docs-header-breadcrumb { + display: none; + } + + /* 侧边栏变为滑出式 - 苹果液态玻璃 */ + .docs-sidebar { + position: fixed; + top: 56px; + left: 0; + bottom: 0; + width: 280px; + z-index: 200; + transform: translateX(-100%); + /* 苹果液态玻璃 */ + background: linear-gradient( + 135deg, + rgba(2, 5, 16, 0.85) 0%, + rgba(2, 5, 16, 0.75) 100% + ); + backdrop-filter: blur(60px) saturate(220%); + -webkit-backdrop-filter: blur(60px) saturate(220%); + border-right: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: + 10px 0 40px rgba(0, 0, 0, 0.3), + 0 0 1px rgba(255, 255, 255, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.1); + } + + /* 侧边栏激活状态 */ + .docs-sidebar.is-open { + transform: translateX(0); + } + + /* 遮罩层 */ + .docs-sidebar-overlay { + display: block; + position: fixed; + inset: 0; + top: 56px; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + z-index: 150; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease; + } + + .docs-sidebar-overlay.is-visible { + opacity: 1; + pointer-events: auto; + } + .docs-content { padding: 24px 20px 100px; } .docs-wiki-btn span { display: none; } + + /* 移动端顶部栏 */ + .docs-header { + padding: 0 16px; + height: 56px; + } + .docs-header-title { + font-size: 14px; + } + .docs-header-breadcrumb { + font-size: 12px; + } + + /* 移动端内容区 */ + .docs-content h1 { + font-size: 24px; + } + .docs-content h2 { + font-size: 18px; + } + .docs-content h3 { + font-size: 16px; + } + .docs-content p, + .docs-content li { + font-size: 14px; + } + .docs-content pre { + padding: 12px 16px; + font-size: 12px; + } + .docs-content table { + font-size: 13px; + overflow-x: auto; + display: block; + } + + /* 底部固定按钮只显示图标 */ + .docs-wiki-btn { + bottom: 16px; + left: 16px; + padding: 12px; + border-radius: 50%; + width: 48px; + height: 48px; + justify-content: center; + } +} + +@media (max-width: 480px) { + .docs-content { + padding: 20px 16px 100px; + } + .docs-content h1 { + font-size: 22px; + } + .docs-content h2 { + font-size: 17px; + } + .docs-content pre { + font-size: 11px; + } } diff --git a/website/css/hero.css b/website/css/hero.css index 2bab651..1e44e07 100644 --- a/website/css/hero.css +++ b/website/css/hero.css @@ -371,7 +371,18 @@ } @media (max-width: 640px) { + .hero-container { + padding: 40px 16px; + } .hero-stats { grid-template-columns: 1fr; gap: 16px; } + .hero-actions { + justify-content: center; + } + .btn { + width: 100%; + max-width: 280px; + justify-content: center; + } .ripple-container { width: 240px; height: 240px; @@ -391,4 +402,19 @@ .cube-face-left { transform: rotateY(-90deg) translateZ(70px); } .cube-face-top { transform: rotateX(90deg) translateZ(70px); } .cube-face-bottom { transform: rotateX(-90deg) translateZ(70px); } + + .hero-title { + font-size: 40px; + } + .hero-subtitle { + font-size: 18px; + } + .hero-desc { + font-size: 14px; + padding: 0 8px; + } + .badge { + font-size: 12px; + padding: 6px 14px; + } } diff --git a/website/css/main.css b/website/css/main.css index d33eb5d..87160b8 100644 --- a/website/css/main.css +++ b/website/css/main.css @@ -87,10 +87,57 @@ body { } .glass { - background: var(--bg-glass); - backdrop-filter: blur(12px); - border: 1px solid var(--border); - border-radius: 16px; + /* 苹果液态玻璃效果 */ + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.1) 0%, + rgba(255, 255, 255, 0.05) 50%, + rgba(255, 255, 255, 0.02) 100% + ); + backdrop-filter: blur(40px) saturate(200%); + -webkit-backdrop-filter: blur(40px) saturate(200%); + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: 24px; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.12), + 0 2px 8px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.4), + inset 0 -1px 0 rgba(255, 255, 255, 0.1); +} + +/* 苹果液态玻璃 - 轻量版 */ +.liquid-glass { + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.12) 0%, + rgba(255, 255, 255, 0.06) 100% + ); + backdrop-filter: blur(30px) saturate(180%); + -webkit-backdrop-filter: blur(30px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 20px; + box-shadow: + 0 4px 16px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.5); +} + +/* 苹果液态玻璃 - 加强版 */ +.liquid-glass-strong { + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.15) 0%, + rgba(255, 255, 255, 0.08) 50%, + rgba(255, 255, 255, 0.03) 100% + ); + backdrop-filter: blur(50px) saturate(220%); + -webkit-backdrop-filter: blur(50px) saturate(220%); + border: 1px solid rgba(255, 255, 255, 0.22); + border-radius: 28px; + box-shadow: + 0 16px 48px rgba(0, 0, 0, 0.15), + 0 4px 12px rgba(0, 0, 0, 0.1), + inset 0 2px 0 rgba(255, 255, 255, 0.6), + inset 0 -2px 0 rgba(255, 255, 255, 0.15); } /* 按钮 */ diff --git a/website/css/page.css b/website/css/page.css index 706c6d4..0912a70 100644 --- a/website/css/page.css +++ b/website/css/page.css @@ -105,17 +105,40 @@ } .feature-card { - background: var(--bg-glass); - border: 1px solid var(--border); - border-radius: 20px; + /* 苹果液态玻璃 */ + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.1) 0%, + rgba(255, 255, 255, 0.04) 100% + ); + backdrop-filter: blur(40px) saturate(180%); + -webkit-backdrop-filter: blur(40px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: 24px; padding: 32px; - transition: all 0.4s ease; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: + 0 8px 24px rgba(0, 0, 0, 0.12), + 0 2px 6px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.5); } .feature-card:hover { - border-color: var(--border-hover); transform: translateY(-8px); - box-shadow: 0 20px 40px rgba(6, 182, 212, 0.1); + /* 悬停时增强玻璃效果 */ + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.15) 0%, + rgba(255, 255, 255, 0.06) 100% + ); + backdrop-filter: blur(50px) saturate(200%); + -webkit-backdrop-filter: blur(50px) saturate(200%); + border-color: rgba(255, 255, 255, 0.3); + box-shadow: + 0 20px 48px rgba(0, 0, 0, 0.18), + 0 8px 16px rgba(0, 0, 0, 0.12), + inset 0 1px 0 rgba(255, 255, 255, 0.7), + inset 0 -1px 0 rgba(255, 255, 255, 0.2); } .feature-icon { @@ -195,10 +218,21 @@ .install-demo { max-width: 700px; margin: 0 auto 48px; - background: rgba(10, 15, 30, 0.9); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 16px; + /* 苹果液态玻璃 */ + background: linear-gradient( + 135deg, + rgba(10, 15, 30, 0.7) 0%, + rgba(10, 15, 30, 0.5) 100% + ); + backdrop-filter: blur(40px) saturate(180%); + -webkit-backdrop-filter: blur(40px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 20px; overflow: hidden; + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.2), + 0 4px 10px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.3); } .demo-header { @@ -264,14 +298,33 @@ .arch-diagram { max-width: 900px; margin: 0 auto 64px; } .arch-layer { - border-radius: 16px; + /* 苹果液态玻璃 */ + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.08) 0%, + rgba(255, 255, 255, 0.03) 100% + ); + backdrop-filter: blur(30px) saturate(160%); + -webkit-backdrop-filter: blur(30px) saturate(160%); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 20px; padding: 24px; - border: 1px solid var(--border); + box-shadow: + 0 6px 20px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.4); } .arch-core { - background: rgba(6, 182, 212, 0.05); - border-color: rgba(6, 182, 212, 0.2); + background: linear-gradient( + 135deg, + rgba(6, 182, 212, 0.15) 0%, + rgba(6, 182, 212, 0.08) 100% + ); + border-color: rgba(6, 182, 212, 0.3); + box-shadow: + 0 8px 24px rgba(6, 182, 212, 0.15), + 0 2px 8px rgba(6, 182, 212, 0.08), + inset 0 1px 0 rgba(6, 182, 212, 0.2); } .arch-label { @@ -330,17 +383,38 @@ } .arch-plugin { - background: rgba(255, 255, 255, 0.02); - border: 1px solid var(--border); - border-radius: 12px; + /* 苹果液态玻璃 */ + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.06) 0%, + rgba(255, 255, 255, 0.02) 100% + ); + backdrop-filter: blur(20px) saturate(150%); + -webkit-backdrop-filter: blur(20px) saturate(150%); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 16px; padding: 20px; text-align: center; - transition: all 0.3s; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.3); } .arch-plugin:hover { - border-color: var(--border-hover); transform: translateY(-4px); + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.1) 0%, + rgba(255, 255, 255, 0.04) 100% + ); + backdrop-filter: blur(30px) saturate(170%); + -webkit-backdrop-filter: blur(30px) saturate(170%); + border-color: rgba(255, 255, 255, 0.22); + box-shadow: + 0 10px 28px rgba(0, 0, 0, 0.12), + 0 3px 8px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.5); } .arch-plugin-title { @@ -373,11 +447,38 @@ align-items: center; gap: 10px; padding: 12px 20px; - background: var(--bg-glass); - border: 1px solid var(--border); - border-radius: 12px; + /* 苹果液态玻璃 */ + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.08) 0%, + rgba(255, 255, 255, 0.03) 100% + ); + backdrop-filter: blur(20px) saturate(150%); + -webkit-backdrop-filter: blur(20px) saturate(150%); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 16px; font-size: 14px; font-weight: 500; + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.4); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.flow-step:hover { + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.12) 0%, + rgba(255, 255, 255, 0.05) 100% + ); + backdrop-filter: blur(30px) saturate(170%); + -webkit-backdrop-filter: blur(30px) saturate(170%); + border-color: rgba(255, 255, 255, 0.25); + box-shadow: + 0 8px 24px rgba(0, 0, 0, 0.12), + 0 2px 6px rgba(0, 0, 0, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.6); + transform: translateY(-2px); } .flow-step-num { @@ -404,17 +505,39 @@ } .step-card { - background: var(--bg-glass); - border: 1px solid var(--border); - border-radius: 16px; + /* 苹果液态玻璃 */ + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.08) 0%, + rgba(255, 255, 255, 0.03) 100% + ); + backdrop-filter: blur(30px) saturate(160%); + -webkit-backdrop-filter: blur(30px) saturate(160%); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 20px; padding: 32px; text-align: center; - transition: all 0.3s; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: + 0 6px 20px rgba(0, 0, 0, 0.1), + 0 2px 6px rgba(0, 0, 0, 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.4); } .step-card:hover { - border-color: var(--border-hover); transform: translateY(-4px); + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.12) 0%, + rgba(255, 255, 255, 0.05) 100% + ); + backdrop-filter: blur(40px) saturate(180%); + -webkit-backdrop-filter: blur(40px) saturate(180%); + border-color: rgba(255, 255, 255, 0.25); + box-shadow: + 0 12px 32px rgba(0, 0, 0, 0.15), + 0 4px 10px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.6); } .step-number { @@ -457,7 +580,9 @@ } @media (max-width: 768px) { - .page-content { padding-left: 24px; } + .page-content { + padding: 80px 20px 60px; + } .features-grid { grid-template-columns: 1fr; } .arch-plugin-grid { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr; } @@ -465,4 +590,46 @@ .flow-arrow { transform: rotate(90deg); } .pkg-explain { grid-template-columns: 1fr; } .pkg-table { overflow-x: auto; } + + /* 移动端页面标题区域 */ + .page-header { + margin-bottom: 40px; + } + .page-title { + font-size: 28px; + } + .page-desc { + font-size: 15px; + } + + /* 移动端特性卡片 */ + .feature-card { + padding: 24px; + } + .feature-icon { + width: 48px; + height: 48px; + } + .feature-icon svg { + width: 24px; + height: 24px; + } +} + +@media (max-width: 480px) { + .page-content { + padding: 60px 16px 40px; + } + .page-header { + margin-bottom: 32px; + } + .page-title { + font-size: 24px; + } + .page-desc { + font-size: 14px; + } + .feature-card { + padding: 20px; + } } diff --git a/website/css/quickstart.css b/website/css/quickstart.css deleted file mode 100644 index f0eed4e..0000000 --- a/website/css/quickstart.css +++ /dev/null @@ -1,65 +0,0 @@ -/* ===== 快速开始 ===== */ -#quickstart { - padding: 120px 0; - position: relative; - z-index: 1; -} - -.steps-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 24px; - margin-bottom: 64px; -} - -.step-card { - background: var(--bg-glass); - border: 1px solid var(--border); - border-radius: 16px; - padding: 32px; - text-align: center; - transition: all 0.3s; -} - -.step-card:hover { - border-color: var(--border-hover); - transform: translateY(-4px); -} - -.step-number { - display: inline-flex; - align-items: center; - justify-content: center; - width: 48px; - height: 48px; - border-radius: 50%; - background: linear-gradient(135deg, var(--cyan), var(--blue)); - font-size: 20px; - font-weight: 800; - margin-bottom: 20px; -} - -.step-title { - font-size: 20px; - font-weight: 700; - margin-bottom: 16px; -} - -.step-code { - font-family: 'JetBrains Mono', monospace; - font-size: 13px; - line-height: 1.8; - color: var(--text-secondary); - text-align: left; - background: rgba(10, 15, 30, 0.6); - padding: 16px; - border-radius: 8px; -} - -.quickstart-cta { - text-align: center; -} - -@media (max-width: 768px) { - .steps-grid { grid-template-columns: 1fr; } -} diff --git a/website/docs/architecture.html b/website/docs/architecture.html index 51b9674..311f0a7 100644 --- a/website/docs/architecture.html +++ b/website/docs/architecture.html @@ -16,6 +16,11 @@
+
@@ -28,8 +33,10 @@
+
+
-