feat: 全面重构网站工程化体系与 UI 架构
- 将单体 style.css 拆分为 tokens/reset/fonts/layout/responsive/组件级 CSS 模块 - 从 Google Fonts CDN 迁移至本地自托管字体（JetBrainsMono、NotoSansSC） - 引入 Vitest + Testing Library 测试体系，新增单元测试 - 添加 GitHub Actions CI 流水线（lint → build → test） - 新增 Prettier 格式化与 ESLint 规则强化 - 重构全部 YAML 数据文件，完善项目详情页（截图轮播、更新日志） - 新增项目文档编写指南（docs/create-project.md）
This commit is contained in:
@@ -0,0 +1,414 @@
|
||||
/* ── Breadcrumb ──────────────────────────────────────── */
|
||||
.breadcrumb {
|
||||
padding: 8px 0;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.breadcrumb-current {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
/* ── Detail page ─────────────────────────────────────── */
|
||||
.detail-header {
|
||||
padding-top: 48px;
|
||||
padding-bottom: 36px;
|
||||
padding-inline: 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 60% 80% at 10% 50%, oklch(74% 0.2 45 / 8%) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 40% 60% at 90% 30%, oklch(70% 0.24 20 / 6%) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:root.light .detail-header::before {
|
||||
background:
|
||||
radial-gradient(ellipse 60% 80% at 10% 50%, oklch(58% 0.22 45 / 5%) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 40% 60% at 90% 30%, oklch(55% 0.24 20 / 4%) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.detail-header-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid oklch(74% 0.2 45 / 15%);
|
||||
background: oklch(74% 0.2 45 / 8%);
|
||||
color: var(--accent);
|
||||
box-shadow: 0 0 24px oklch(74% 0.2 45 / 10%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.detail-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(135deg, oklch(100% 0 0 / 10%) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
background: var(--gradient-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.detail-slogan {
|
||||
font-size: 16px;
|
||||
color: var(--muted);
|
||||
margin-top: 6px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.detail-badges {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.detail-body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px;
|
||||
gap: 40px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.detail-sidebar {
|
||||
position: sticky;
|
||||
top: calc(var(--nav-height) + 32px);
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-bottom: 40px;
|
||||
scroll-margin-top: calc(var(--nav-height) + 24px);
|
||||
}
|
||||
|
||||
.detail-section-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
position: relative;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.detail-section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background: var(--gradient-primary);
|
||||
box-shadow: 0 0 8px oklch(74% 0.2 45 / 25%);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.detail-prose {
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.detail-prose + .detail-prose {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
/* Sidebar compact metadata */
|
||||
.detail-meta-panel {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
background: oklch(15% 0.025 270 / 50%);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border);
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
:root.light .detail-meta-panel {
|
||||
background: oklch(100% 0 0 / 70%);
|
||||
}
|
||||
|
||||
.detail-meta-item {
|
||||
min-width: 0;
|
||||
padding: 9px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: oklch(74% 0.2 45 / 4%);
|
||||
border: 1px solid oklch(74% 0.2 45 / 8%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
:root.light .detail-meta-item {
|
||||
background: oklch(98% 0.005 270 / 70%);
|
||||
}
|
||||
|
||||
.detail-meta-label {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.detail-meta-value {
|
||||
min-width: 0;
|
||||
color: var(--fg);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-meta-value.mono {
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.detail-link-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.detail-link-btn {
|
||||
min-width: 0;
|
||||
min-height: 38px;
|
||||
padding: 8px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: oklch(15% 0.025 270 / 45%);
|
||||
color: var(--fg);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
transition:
|
||||
color var(--transition),
|
||||
border-color var(--transition),
|
||||
background var(--transition);
|
||||
}
|
||||
|
||||
.detail-link-btn:hover {
|
||||
color: var(--accent);
|
||||
border-color: oklch(74% 0.2 45 / 25%);
|
||||
background: oklch(74% 0.2 45 / 7%);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
:root.light .detail-link-btn {
|
||||
background: oklch(100% 0 0 / 65%);
|
||||
}
|
||||
|
||||
/* Feature tags — compact highlight */
|
||||
.feature-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.feature-tag {
|
||||
padding: 4px 12px;
|
||||
border-radius: 99px;
|
||||
font-size: 13px;
|
||||
background: oklch(74% 0.2 45 / 10%);
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.feature-tag::before {
|
||||
content: '\2713';
|
||||
margin-inline-end: 6px;
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.feature-tag:hover {
|
||||
background: oklch(74% 0.2 45 / 18%);
|
||||
}
|
||||
|
||||
:root.light .feature-tag {
|
||||
background: oklch(58% 0.22 45 / 8%);
|
||||
}
|
||||
|
||||
:root.light .feature-tag:hover {
|
||||
background: oklch(58% 0.22 45 / 14%);
|
||||
}
|
||||
|
||||
/* Screenshot carousel */
|
||||
.screenshot-carousel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.screenshot-scroll {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.screenshot-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.screenshot-slide {
|
||||
flex: 0 0 85%;
|
||||
max-width: 400px;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
|
||||
.screenshot-slide:first-child {
|
||||
margin-inline-start: 4px;
|
||||
}
|
||||
|
||||
.screenshot-placeholder {
|
||||
aspect-ratio: 16/10;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
background: oklch(15% 0.025 270 / 60%);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.screenshot-placeholder::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--gradient-glow);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
:root.light .screenshot-placeholder {
|
||||
background: oklch(96% 0.008 270 / 70%);
|
||||
}
|
||||
|
||||
.screenshot-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.screenshot-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: var(--border);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.screenshot-dot.active {
|
||||
background: var(--accent);
|
||||
width: 18px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 8px oklch(74% 0.2 45 / 30%);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.screenshot-slide {
|
||||
flex: 0 0 calc(33.333% - 8px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Install guide ───────────────────────────────────── */
|
||||
.install-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.install-item {
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 13px;
|
||||
background: oklch(15% 0.025 270 / 40%);
|
||||
transition: all var(--transition);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
:root.light .install-item {
|
||||
background: oklch(98% 0.005 270);
|
||||
}
|
||||
|
||||
.install-item:hover {
|
||||
background: oklch(74% 0.2 45 / 6%);
|
||||
}
|
||||
|
||||
.install-item strong {
|
||||
display: inline;
|
||||
margin-inline-end: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
/* ── Project selector (for roadmap/changelog) ────────── */
|
||||
.project-selector {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
Reference in New Issue
Block a user