Skip to content

Commit 87ed323

Browse files
LauraGPTLauraGPT
committed
docs: add shared CSS design system, optimize visual consistency
1 parent 5c51568 commit 87ed323

4 files changed

Lines changed: 243 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>FunASR - A Fundamental End-to-End Speech Recognition Toolkit</title>
7+
<link rel="stylesheet" href="style.css">
78
<style>
89
:root {
910
--primary: #2563eb;

‎model-registration.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>FunASR - Model Registration Guide</title>
7+
<link rel="stylesheet" href="style.css">
78
<style>
89
:root { --primary: #2563eb; --bg: #f8fafc; --text: #1e293b; --text-light: #64748b; --card-bg: #ffffff; --border: #e2e8f0; --code-bg: #1e293b; }
910
* { margin: 0; padding: 0; box-sizing: border-box; }

‎style.css‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
/* FunASR Design System */
2+
:root {
3+
--primary: #3b82f6;
4+
--primary-dark: #2563eb;
5+
--primary-light: #dbeafe;
6+
--accent: #06b6d4;
7+
--bg: #fafbfc;
8+
--bg-dark: #0f172a;
9+
--text: #1e293b;
10+
--text-light: #64748b;
11+
--text-muted: #94a3b8;
12+
--card-bg: #ffffff;
13+
--border: #e2e8f0;
14+
--code-bg: #1e293b;
15+
--success: #10b981;
16+
--warning: #f59e0b;
17+
--radius: 12px;
18+
--shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
19+
--shadow-lg: 0 10px 25px rgba(0,0,0,0.08);
20+
}
21+
22+
* { margin: 0; padding: 0; box-sizing: border-box; }
23+
24+
body {
25+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
26+
background: var(--bg);
27+
color: var(--text);
28+
line-height: 1.7;
29+
-webkit-font-smoothing: antialiased;
30+
}
31+
32+
/* Layout */
33+
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
34+
.narrow { max-width: 800px; }
35+
36+
/* Navigation */
37+
.nav {
38+
background: rgba(255,255,255,0.92);
39+
backdrop-filter: blur(12px);
40+
border-bottom: 1px solid var(--border);
41+
position: sticky;
42+
top: 0;
43+
z-index: 100;
44+
}
45+
.nav .container {
46+
display: flex;
47+
align-items: center;
48+
gap: 28px;
49+
padding: 14px 24px;
50+
}
51+
.nav-logo {
52+
font-weight: 800;
53+
font-size: 1.3rem;
54+
color: var(--primary-dark);
55+
text-decoration: none;
56+
letter-spacing: -0.5px;
57+
}
58+
.nav-links { display: flex; gap: 20px; }
59+
.nav-links a {
60+
color: var(--text-light);
61+
text-decoration: none;
62+
font-size: 0.9rem;
63+
font-weight: 500;
64+
padding: 4px 0;
65+
transition: color 0.2s;
66+
}
67+
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
68+
.nav-github {
69+
margin-left: auto;
70+
color: var(--text);
71+
text-decoration: none;
72+
font-size: 0.85rem;
73+
font-weight: 500;
74+
padding: 6px 14px;
75+
border: 1px solid var(--border);
76+
border-radius: 6px;
77+
transition: all 0.2s;
78+
}
79+
.nav-github:hover { border-color: var(--primary); color: var(--primary); }
80+
81+
/* Hero */
82+
.hero {
83+
background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%);
84+
color: white;
85+
padding: 100px 0 80px;
86+
text-align: center;
87+
position: relative;
88+
overflow: hidden;
89+
}
90+
.hero::before {
91+
content: '';
92+
position: absolute;
93+
top: -50%; left: -50%;
94+
width: 200%; height: 200%;
95+
background: radial-gradient(circle at 30% 50%, rgba(59,130,246,0.15) 0%, transparent 50%),
96+
radial-gradient(circle at 70% 80%, rgba(6,182,212,0.1) 0%, transparent 40%);
97+
}
98+
.hero-content { position: relative; z-index: 1; }
99+
.hero h1 { font-size: 3.5rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 16px; }
100+
.hero p { font-size: 1.2rem; opacity: 0.85; max-width: 600px; margin: 0 auto 32px; }
101+
.hero-badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
102+
.hero-badges img { height: 22px; }
103+
.hero-actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; }
104+
105+
/* Buttons */
106+
.btn {
107+
display: inline-flex; align-items: center; gap: 8px;
108+
padding: 12px 24px; border-radius: 8px;
109+
text-decoration: none; font-weight: 600; font-size: 0.9rem;
110+
transition: all 0.2s; cursor: pointer; border: none;
111+
}
112+
.btn-white { background: white; color: var(--text); }
113+
.btn-white:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
114+
.btn-outline-white { border: 1.5px solid rgba(255,255,255,0.4); color: white; background: transparent; }
115+
.btn-outline-white:hover { border-color: white; background: rgba(255,255,255,0.1); }
116+
.btn-primary { background: var(--primary); color: white; }
117+
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
118+
119+
/* Sections */
120+
section { padding: 80px 0; }
121+
section.alt { background: white; }
122+
.section-title { font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 12px; letter-spacing: -0.5px; }
123+
.section-subtitle { text-align: center; color: var(--text-light); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; }
124+
125+
/* Grid */
126+
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
127+
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
128+
129+
/* Cards */
130+
.card {
131+
background: var(--card-bg);
132+
border: 1px solid var(--border);
133+
border-radius: var(--radius);
134+
padding: 28px;
135+
transition: all 0.2s;
136+
}
137+
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
138+
.card-icon { font-size: 2rem; margin-bottom: 12px; }
139+
.card h3 { font-size: 1.1rem; margin-bottom: 8px; font-weight: 700; }
140+
.card p { color: var(--text-light); font-size: 0.9rem; line-height: 1.6; }
141+
.card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
142+
.tag {
143+
background: var(--primary-light);
144+
color: var(--primary-dark);
145+
padding: 3px 10px;
146+
border-radius: 20px;
147+
font-size: 0.72rem;
148+
font-weight: 600;
149+
}
150+
151+
/* Code blocks */
152+
pre {
153+
background: var(--code-bg);
154+
color: #e2e8f0;
155+
border-radius: var(--radius);
156+
padding: 20px 24px;
157+
overflow-x: auto;
158+
margin: 16px 0 24px;
159+
font-size: 0.84rem;
160+
line-height: 1.6;
161+
box-shadow: var(--shadow);
162+
}
163+
code { font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace; }
164+
p code, li code, td code {
165+
background: #f1f5f9;
166+
padding: 2px 7px;
167+
border-radius: 4px;
168+
font-size: 0.82rem;
169+
color: #dc2626;
170+
}
171+
172+
/* Content pages */
173+
.content { padding: 48px 0 80px; }
174+
.content h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 8px; }
175+
.content h1 + p { color: var(--text-light); margin-bottom: 40px; font-size: 1.05rem; }
176+
.content h2 { font-size: 1.4rem; font-weight: 700; margin: 56px 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--border); }
177+
.content h3 { font-size: 1.1rem; font-weight: 600; margin: 32px 0 12px; }
178+
.content p { margin-bottom: 12px; }
179+
.content ul, .content ol { margin: 12px 0 12px 24px; }
180+
.content li { margin-bottom: 8px; }
181+
182+
/* Note/Warning boxes */
183+
.note {
184+
background: #eff6ff;
185+
border-left: 4px solid var(--primary);
186+
padding: 14px 18px;
187+
border-radius: 0 8px 8px 0;
188+
margin: 16px 0;
189+
font-size: 0.9rem;
190+
}
191+
.warning {
192+
background: #fffbeb;
193+
border-left: 4px solid var(--warning);
194+
padding: 14px 18px;
195+
border-radius: 0 8px 8px 0;
196+
margin: 16px 0;
197+
font-size: 0.9rem;
198+
}
199+
200+
/* Tables */
201+
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.88rem; }
202+
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
203+
th { background: #f8fafc; font-weight: 600; color: var(--text-light); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; }
204+
205+
/* Steps */
206+
.step {
207+
background: var(--card-bg);
208+
border: 1px solid var(--border);
209+
border-radius: var(--radius);
210+
padding: 24px;
211+
margin: 16px 0;
212+
}
213+
.step-num {
214+
display: inline-flex; align-items: center; justify-content: center;
215+
width: 28px; height: 28px;
216+
background: var(--primary); color: white;
217+
border-radius: 50%; font-weight: 700; font-size: 0.8rem;
218+
margin-right: 10px;
219+
}
220+
221+
/* Footer */
222+
footer {
223+
background: var(--bg-dark);
224+
color: var(--text-muted);
225+
padding: 48px 0;
226+
text-align: center;
227+
}
228+
footer a { color: var(--accent); text-decoration: none; }
229+
footer a:hover { text-decoration: underline; }
230+
footer p { margin-bottom: 8px; }
231+
232+
/* Responsive */
233+
@media (max-width: 768px) {
234+
.hero h1 { font-size: 2.2rem; }
235+
.hero p { font-size: 1rem; }
236+
.nav .container { gap: 12px; }
237+
.nav-links { gap: 12px; }
238+
.grid-3, .grid-2 { grid-template-columns: 1fr; }
239+
section { padding: 48px 0; }
240+
}

‎tutorial.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>FunASR Tutorial</title>
7+
<link rel="stylesheet" href="style.css">
78
<style>
89
:root {
910
--primary: #2563eb;

0 commit comments

Comments
 (0)