Skip to content

Commit 130c434

Browse files
CopilotJusterZhu
Copilot
and
JusterZhu
authored
Complete redesign: New cosmic pixel art homepage (#25)
* Initial plan * Add cosmic pixel art theme to homepage Co-authored-by: JusterZhu <11714536+JusterZhu@users.noreply.github.com> * Complete redesign: New cosmic pixel art homepage Co-authored-by: JusterZhu <11714536+JusterZhu@users.noreply.github.com> * Address code review feedback: improve accessibility and performance Co-authored-by: JusterZhu <11714536+JusterZhu@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: JusterZhu <11714536+JusterZhu@users.noreply.github.com>
1 parent b977def commit 130c434

8 files changed

Lines changed: 755 additions & 50 deletions

File tree

‎website/src/components/HomepageFeatures/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import styles from './styles.module.css';
55
const FeatureList = [
66
{
77
title: 'GeneralUpdate',
8-
Svg: require('@site/static/img/upgrade.svg').default,
8+
Svg: require('@site/static/img/cosmic-rocket.svg').default,
99
//description: (
1010
// <>
1111
// 帮助你的客户端应用以最快最小的资源的占用完成自动升级！
@@ -14,7 +14,7 @@ const FeatureList = [
1414
},
1515
{
1616
title: 'GeneralUpdate Tools',
17-
Svg: require('@site/static/img/packet.svg').default,
17+
Svg: require('@site/static/img/cosmic-planet.svg').default,
1818
//description: (
1919
// <>
2020
// 打包工具帮助您发布更新补丁包文件！
@@ -23,7 +23,7 @@ const FeatureList = [
2323
},
2424
{
2525
title: 'GeneralUpdate Samples',
26-
Svg: require('@site/static/img/samples.svg').default,
26+
Svg: require('@site/static/img/cosmic-star.svg').default,
2727
//description: (
2828
// <>
2929
// 快速启动，更快的了解项目如何使用！

‎website/src/components/HomepageFeatures/styles.module.css‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,31 @@
11
.features {
22
display: flex;
33
align-items: center;
4-
padding: 2rem 0;
4+
padding: 4rem 0;
55
width: 100%;
6+
background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
67
}
78

89
.featureSvg {
9-
height: 200px;
10-
width: 200px;
10+
height: 180px;
11+
width: 180px;
12+
filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.2));
13+
image-rendering: pixelated;
14+
image-rendering: crisp-edges;
15+
transition: transform 0.3s ease;
16+
}
17+
18+
.featureSvg:hover {
19+
transform: scale(1.1) rotate(5deg);
20+
filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.3));
21+
}
22+
23+
/* Pixel art card style */
24+
.features h3 {
25+
font-family: 'Courier New', monospace;
26+
font-weight: bold;
27+
text-transform: uppercase;
28+
letter-spacing: 1px;
29+
margin-top: 1.5rem;
30+
color: #2c3e50;
1131
}

‎website/src/css/custom.css‎

Lines changed: 85 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,94 @@
66

77
/* You can override the default Infima variables here. */
88
:root {
9-
--ifm-color-primary: #000000; /* 黑色 */
10-
--ifm-color-primary-dark: #000000;
11-
--ifm-color-primary-darker: #000000;
12-
--ifm-color-primary-darkest: #000000;
13-
--ifm-color-primary-light: #333333; /* 更浅的黑色 */
14-
--ifm-color-primary-lighter: #666666;
15-
--ifm-color-primary-lightest: #999999;
9+
--ifm-color-primary: #3498db;
10+
--ifm-color-primary-dark: #2e86c1;
11+
--ifm-color-primary-darker: #2b7db8;
12+
--ifm-color-primary-darkest: #236599;
13+
--ifm-color-primary-light: #5dade2;
14+
--ifm-color-primary-lighter: #6ab6e5;
15+
--ifm-color-primary-lightest: #85c5eb;
1616
--ifm-code-font-size: 95%;
17-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
17+
--docusaurus-highlighted-code-line-bg: rgba(52, 152, 219, 0.1);
1818
}
1919

2020
/* For readability concerns, you should choose a lighter palette in dark mode. */
2121
[data-theme='dark'] {
22-
--ifm-color-primary: #ffffff; /* 白色 */
23-
--ifm-color-primary-dark: #eeeeee;
24-
--ifm-color-primary-darker: #dddddd;
25-
--ifm-color-primary-darkest: #cccccc;
26-
--ifm-color-primary-light: #ffffff;
27-
--ifm-color-primary-lighter: #ffffff;
28-
--ifm-color-primary-lightest: #ffffff;
29-
--docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.3);
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;
32+
}
33+
34+
/* Enhanced dark mode cosmic theme */
35+
[data-theme='dark'] .navbar {
36+
background-color: #0a0420;
37+
border-bottom: 2px solid #1a0f3e;
38+
}
39+
40+
[data-theme='dark'] .footer {
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 for theme components */
90+
.cosmicHero,
91+
.cosmicHero *,
92+
.featuresSection,
93+
.featuresSection *,
94+
.techSection,
95+
.techSection *,
96+
.navbar,
97+
.footer {
98+
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
3099
}

‎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} aria-label="跨平台自动更新框架 极简 高效 开源">
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)