Skip to content

Commit bbec868

Browse files
CopilotJusterZhu
Copilot
and
JusterZhu
committed
Complete redesign: New cosmic pixel art homepage
Co-authored-by: JusterZhu <11714536+JusterZhu@users.noreply.github.com>
1 parent 4baa127 commit bbec868

3 files changed

Lines changed: 617 additions & 117 deletions

File tree

‎website/src/css/custom.css‎

Lines changed: 67 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,45 +6,87 @@
66

77
/* You can override the default Infima variables here. */
88
:root {
9-
--ifm-color-primary: #2c3e50;
10-
--ifm-color-primary-dark: #243342;
11-
--ifm-color-primary-darker: #20303b;
12-
--ifm-color-primary-darkest: #1a2731;
13-
--ifm-color-primary-light: #34495e;
14-
--ifm-color-primary-lighter: #3d5368;
15-
--ifm-color-primary-lightest: #4a5f7a;
16-
--ifm-code-font-size: 95%;
17-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
18-
}
19-
20-
/* For readability concerns, you should choose a lighter palette in dark mode. */
21-
[data-theme='dark'] {
229
--ifm-color-primary: #3498db;
2310
--ifm-color-primary-dark: #2e86c1;
2411
--ifm-color-primary-darker: #2b7db8;
2512
--ifm-color-primary-darkest: #236599;
2613
--ifm-color-primary-light: #5dade2;
2714
--ifm-color-primary-lighter: #6ab6e5;
2815
--ifm-color-primary-lightest: #85c5eb;
29-
--docusaurus-highlighted-code-line-bg: rgba(52, 152, 219, 0.3);
30-
--ifm-background-color: #0a0e27;
16+
--ifm-code-font-size: 95%;
17+
--docusaurus-highlighted-code-line-bg: rgba(52, 152, 219, 0.1);
3118
}
3219

33-
/* Pixel art font styling */
34-
html {
35-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
36-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
37-
sans-serif;
38-
image-rendering: auto;
20+
/* For readability concerns, you should choose a lighter palette in dark mode. */
21+
[data-theme='dark'] {
22+
--ifm-color-primary: #5dade2;
23+
--ifm-color-primary-dark: #4aa3de;
24+
--ifm-color-primary-darker: #3d9adc;
25+
--ifm-color-primary-darkest: #2585cc;
26+
--ifm-color-primary-light: #70b7e6;
27+
--ifm-color-primary-lighter: #7dbde8;
28+
--ifm-color-primary-lightest: #98caed;
29+
--docusaurus-highlighted-code-line-bg: rgba(93, 173, 226, 0.2);
30+
--ifm-background-color: #0a0420;
31+
--ifm-background-surface-color: #1a0f3e;
3932
}
4033

4134
/* Enhanced dark mode cosmic theme */
4235
[data-theme='dark'] .navbar {
43-
background-color: #0a0e27;
44-
border-bottom: 2px solid #1a1f3a;
36+
background-color: #0a0420;
37+
border-bottom: 2px solid #1a0f3e;
4538
}
4639

4740
[data-theme='dark'] .footer {
48-
background-color: #0a0e27;
49-
border-top: 2px solid #1a1f3a;
41+
background-color: #0a0420;
42+
border-top: 2px solid #1a0f3e;
43+
}
44+
45+
/* Dark mode adjustments for new homepage */
46+
[data-theme='dark'] .featuresSection {
47+
background: linear-gradient(180deg, #1a0f3e 0%, #0a0420 100%);
48+
}
49+
50+
[data-theme='dark'] .featureCard {
51+
background: #1a0f3e;
52+
border-color: #5dade2;
53+
box-shadow: 8px 8px 0 rgba(93, 173, 226, 0.2);
54+
}
55+
56+
[data-theme='dark'] .featureCard:hover {
57+
box-shadow: 12px 12px 0 rgba(93, 173, 226, 0.3);
58+
}
59+
60+
[data-theme='dark'] .cardTitle {
61+
color: #fff;
62+
}
63+
64+
[data-theme='dark'] .cardDesc {
65+
color: #a8c5e8;
66+
}
67+
68+
[data-theme='dark'] .sectionTitle {
69+
color: #fff;
70+
}
71+
72+
[data-theme='dark'] .techSection {
73+
background: #0a0420;
74+
}
75+
76+
[data-theme='dark'] .techTitle {
77+
color: #fff;
78+
}
79+
80+
[data-theme='dark'] .techBadge {
81+
background: #1a0f3e;
82+
box-shadow: 4px 4px 0 rgba(93, 173, 226, 0.2);
83+
}
84+
85+
[data-theme='dark'] .techBadge:hover {
86+
box-shadow: 6px 6px 0 rgba(93, 173, 226, 0.3);
87+
}
88+
89+
/* Smooth transitions */
90+
* {
91+
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
5092
}

‎website/src/pages/index.js‎

Lines changed: 100 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,123 @@ import clsx from 'clsx';
22
import Link from '@docusaurus/Link';
33
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
44
import Layout from '@theme/Layout';
5-
import HomepageFeatures from '@site/src/components/HomepageFeatures';
6-
75
import Heading from '@theme/Heading';
86
import styles from './index.module.css';
97

10-
function HomepageHeader() {
8+
function CosmicHero() {
119
const {siteConfig} = useDocusaurusContext();
1210
return (
13-
<header className={clsx('hero hero--primary', styles.heroBanner)}>
14-
<div className="container">
15-
<Heading as="h1" className="hero__title">
11+
<section className={styles.cosmicHero}>
12+
<div className={styles.cosmicBackground}>
13+
<div className={styles.stars}></div>
14+
<div className={styles.planets}></div>
15+
</div>
16+
<div className={styles.heroContent}>
17+
<div className={styles.pixelLogo}>
18+
<div className={styles.logoPixel}></div>
19+
</div>
20+
<Heading as="h1" className={styles.cosmicTitle}>
1621
{siteConfig.title}
1722
</Heading>
18-
<p className="hero__subtitle">{siteConfig.tagline}</p>
19-
<div className={styles.buttons}>
20-
<Link
21-
className="button button--secondary button--lg"
22-
to="/docs/doc/GeneralSpacestation">
23-
Go!
23+
<p className={styles.cosmicSubtitle}>
24+
🚀 跨平台自动更新框架 · 极简 · 高效 · 开源
25+
</p>
26+
<div className={styles.actionButtons}>
27+
<Link className={styles.primaryBtn} to="/docs/doc/GeneralSpacestation">
28+
<span className={styles.btnIcon}>▶</span> 开始探索
2429
</Link>
30+
<a className={styles.secondaryBtn} href="https://github.com/GeneralLibrary" target="_blank" rel="noopener noreferrer">
31+
<span className={styles.btnIcon}>★</span> GitHub
32+
</a>
33+
</div>
34+
</div>
35+
</section>
36+
);
37+
}
38+
39+
function FeatureCard({ icon, title, description, link }) {
40+
return (
41+
<Link to={link} className={styles.featureCard}>
42+
<div className={styles.cardIcon}>{icon}</div>
43+
<h3 className={styles.cardTitle}>{title}</h3>
44+
<p className={styles.cardDesc}>{description}</p>
45+
<div className={styles.cardArrow}>→</div>
46+
</Link>
47+
);
48+
}
49+
50+
function Features() {
51+
return (
52+
<section className={styles.featuresSection}>
53+
<div className={styles.container}>
54+
<div className={styles.sectionHeader}>
55+
<Heading as="h2" className={styles.sectionTitle}>
56+
核心组件
57+
</Heading>
58+
<div className={styles.titleUnderline}></div>
59+
</div>
60+
<div className={styles.featureGrid}>
61+
<FeatureCard
62+
icon="🚀"
63+
title="GeneralUpdate"
64+
description="轻量级跨平台自动更新客户端"
65+
link="/docs/doc/GeneralSpacestation"
66+
/>
67+
<FeatureCard
68+
icon="🛠️"
69+
title="Update Tools"
70+
description="自动化补丁包生成与发布工具"
71+
link="/docs/doc/GeneralSpacestation"
72+
/>
73+
<FeatureCard
74+
icon="💡"
75+
title="Quick Start"
76+
description="快速上手示例与最佳实践"
77+
link="/docs/doc/GeneralSpacestation"
78+
/>
79+
</div>
80+
</div>
81+
</section>
82+
);
83+
}
84+
85+
function TechStack() {
86+
const techs = [
87+
{ name: '.NET', color: '#512bd4' },
88+
{ name: 'WPF', color: '#0078d4' },
89+
{ name: 'Avalonia', color: '#8b5cf6' },
90+
{ name: 'MAUI', color: '#3498db' },
91+
{ name: 'Console', color: '#2ecc71' },
92+
];
93+
94+
return (
95+
<section className={styles.techSection}>
96+
<div className={styles.container}>
97+
<Heading as="h3" className={styles.techTitle}>
98+
支持平台
99+
</Heading>
100+
<div className={styles.techGrid}>
101+
{techs.map((tech, idx) => (
102+
<div key={idx} className={styles.techBadge} style={{ borderColor: tech.color }}>
103+
<span className={styles.techDot} style={{ backgroundColor: tech.color }}></span>
104+
{tech.name}
105+
</div>
106+
))}
25107
</div>
26108
</div>
27-
</header>
109+
</section>
28110
);
29111
}
30112

31113
export default function Home() {
32114
const {siteConfig} = useDocusaurusContext();
33115
return (
34116
<Layout
35-
title={`Hello from ${siteConfig.title}`}
36-
description="Description will go into a meta tag in <head />">
37-
<HomepageHeader />
38-
<main>
39-
<HomepageFeatures />
40-
</main>
117+
title={`${siteConfig.title} - 跨平台自动更新框架`}
118+
description="GeneralUpdate - 轻量级、跨平台、易用的 .NET 自动更新框架">
119+
<CosmicHero />
120+
<Features />
121+
<TechStack />
41122
</Layout>
42123
);
43124
}

0 commit comments

Comments
 (0)