ekko
9edb76ac64
* feat: add landing page and docs website package Add packages/website — a Vue 3 + Naive UI static site with landing page and documentation, sharing the Pure Ink monochrome design with the main app. Features: particle network hero animation, screenshot carousel, feature grid, install guide tabs, GitHub star history, scroll reveal animations, and Chinese/English bilingual support. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * chore: add favicon to website package Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix: use dynamic theme param for star history chart Switch from CSS media query to JS-based dark mode detection so the star-history SVG matches the current theme toggle state. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix: resolve TypeScript strict mode errors in website components - Remove unused isDark import in HeroSection - Add null check for canvas parent element - Rename unused img loop variable in ScreenshotsSection - Remove unused NIcon import in SiteHeader Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix: resolve TS narrowing errors in canvas resize closure Use canvasRef.value directly inside resize() with local null check instead of relying on outer closure narrowing. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
133 lines
2.4 KiB
SCSS
133 lines
2.4 KiB
SCSS
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: $font-ui;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
a {
|
|
color: var(--accent-primary);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: var(--accent-hover);
|
|
}
|
|
}
|
|
|
|
code {
|
|
font-family: $font-code;
|
|
background: var(--code-bg);
|
|
padding: 2px 6px;
|
|
border-radius: $radius-sm;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
pre {
|
|
code {
|
|
display: block;
|
|
padding: 16px;
|
|
border-radius: $radius-md;
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
|
|
.section {
|
|
max-width: 1120px;
|
|
margin: 0 auto;
|
|
padding: 80px 24px;
|
|
|
|
@media (max-width: $breakpoint-mobile) {
|
|
padding: 48px 16px;
|
|
}
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
margin-bottom: 16px;
|
|
color: var(--text-primary);
|
|
|
|
@media (max-width: $breakpoint-mobile) {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
.section-desc {
|
|
text-align: center;
|
|
color: var(--text-secondary);
|
|
font-size: 16px;
|
|
max-width: 640px;
|
|
margin: 0 auto 48px;
|
|
}
|
|
|
|
// ─── Scroll reveal animations ────────────────────────────
|
|
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
transition: opacity 0.6s ease, transform 0.6s ease;
|
|
|
|
&.revealed {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.reveal-delay-1 { transition-delay: 0.08s; }
|
|
.reveal-delay-2 { transition-delay: 0.16s; }
|
|
.reveal-delay-3 { transition-delay: 0.24s; }
|
|
.reveal-delay-4 { transition-delay: 0.32s; }
|
|
|
|
// ─── Keyframes ────────────────────────────────────────────
|
|
|
|
@keyframes fade-in-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(32px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes pulse-border {
|
|
0%, 100% { border-color: var(--border-color); }
|
|
50% { border-color: var(--text-muted); }
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fade-in-up 0.7s ease both;
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fade-in 0.5s ease both;
|
|
}
|
|
|
|
.animate-delay-1 { animation-delay: 0.1s; }
|
|
.animate-delay-2 { animation-delay: 0.2s; }
|
|
.animate-delay-3 { animation-delay: 0.3s; }
|
|
.animate-delay-4 { animation-delay: 0.4s; }
|
|
.animate-delay-5 { animation-delay: 0.5s; }
|