Skip to content

Commit 65c18b9

Browse files
Tam-LealTam-Leal
committed
docs(site): refactor landing SEO, layout, and assets
Split landing into external CSS/JS with static manifest and sitemap.xml. Update SEO to dashboard screenshot, security panel, How it works copy, and Octicons. Keep tentacle preview behavior unchanged. Align download page head; remove obsolete sitemap.txt.
1 parent 73a78ce commit 65c18b9

11 files changed

Lines changed: 1740 additions & 537 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1616

1717
### Changed
1818

19-
- Download page (`site/download.html`): centered OS picker, clearer prerequisites table, tighter install steps, condensed trust section.
19+
- Landing page (`site/index.html`): external CSS/JS, SEO (dashboard screenshot, manifest, sitemap.xml), security panel, aligned copy and Octicons; tentacle preview unchanged.
20+
- Download page (`site/download.html`): static manifest, shared nav styles via `common.css`, centered OS picker, clearer prerequisites, tighter install steps.
2021
- README header uses `site/gitdock-logo-removebg-preview.png` (transparent logo for GitHub light and dark themes).
2122
- `server.js` imports validation helpers from `lib/` (behavior preserved; easier to test).
2223
- Account name validation now rejects names that require stripping unsafe characters (e.g. `bad name!`, `work;rm`).

‎site/css/common.css‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
:root {
2+
--bg0: #0d1117;
3+
--bg1: #161b22;
4+
--bg2: #21262d;
5+
--bg3: #30363d;
6+
--border: #30363d;
7+
--t1: #e6edf3;
8+
--t2: #8b949e;
9+
--t3: #6e7681;
10+
--blue: #58a6ff;
11+
--green: #3fb950;
12+
--yellow: #d29922;
13+
--red: #f85149;
14+
--purple: #bc8cff;
15+
--orange: #f0883e;
16+
--cyan: #39c5cf;
17+
--grad: linear-gradient(135deg, #58a6ff, #bc8cff);
18+
}
19+
20+
* {
21+
margin: 0;
22+
padding: 0;
23+
box-sizing: border-box;
24+
}
25+
26+
html {
27+
scroll-behavior: smooth;
28+
}
29+
30+
body {
31+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
32+
background: var(--bg0);
33+
color: var(--t1);
34+
line-height: 1.6;
35+
overflow-x: hidden;
36+
}
37+
38+
a {
39+
color: var(--blue);
40+
text-decoration: none;
41+
}
42+
43+
a:hover {
44+
text-decoration: underline;
45+
}
46+
47+
.skip-link {
48+
position: absolute;
49+
top: -100px;
50+
left: 16px;
51+
z-index: 200;
52+
padding: 8px 16px;
53+
border-radius: 6px;
54+
background: var(--blue);
55+
color: #fff;
56+
font-size: 14px;
57+
font-weight: 600;
58+
text-decoration: none;
59+
}
60+
61+
.skip-link:focus {
62+
top: 16px;
63+
outline: 2px solid var(--cyan);
64+
outline-offset: 2px;
65+
}
66+
67+
/* Navigation */
68+
.nav {
69+
position: fixed;
70+
top: 0;
71+
left: 0;
72+
right: 0;
73+
z-index: 100;
74+
background: rgba(13, 17, 23, 0.85);
75+
backdrop-filter: blur(12px);
76+
border-bottom: 1px solid var(--border);
77+
padding: 0 24px;
78+
}
79+
80+
.nav-inner {
81+
max-width: 1200px;
82+
margin: 0 auto;
83+
display: flex;
84+
align-items: center;
85+
justify-content: space-between;
86+
height: 56px;
87+
}
88+
89+
.nav-brand {
90+
display: flex;
91+
align-items: center;
92+
gap: 10px;
93+
font-weight: 600;
94+
font-size: 15px;
95+
color: var(--t1);
96+
text-decoration: none;
97+
}
98+
99+
.nav-brand:hover {
100+
text-decoration: none;
101+
color: var(--t1);
102+
}
103+
104+
.nav-logo {
105+
width: 28px;
106+
height: 28px;
107+
border-radius: 6px;
108+
overflow: hidden;
109+
display: inline-flex;
110+
align-items: center;
111+
justify-content: center;
112+
flex: 0 0 28px;
113+
transform: scale(1.25);
114+
transform-origin: center;
115+
}
116+
117+
.nav-logo img {
118+
width: 100%;
119+
height: 100%;
120+
object-fit: cover;
121+
transform: scale(1.25);
122+
transform-origin: center;
123+
}
124+
125+
.nav-links {
126+
display: flex;
127+
gap: 24px;
128+
align-items: center;
129+
}
130+
131+
.nav-links a {
132+
color: var(--t2);
133+
font-size: 13px;
134+
text-decoration: none;
135+
transition: color 0.2s;
136+
}
137+
138+
.nav-links a:hover {
139+
color: var(--t1);
140+
text-decoration: none;
141+
}
142+
143+
.btn-nav {
144+
padding: 6px 16px;
145+
border-radius: 6px;
146+
background: var(--blue);
147+
color: #fff !important;
148+
font-weight: 500;
149+
font-size: 13px;
150+
transition: opacity 0.2s;
151+
}
152+
153+
.btn-nav:hover {
154+
opacity: 0.9;
155+
text-decoration: none !important;
156+
}
157+
158+
/* Section base */
159+
.section {
160+
padding: 100px 24px;
161+
}
162+
163+
.section-inner {
164+
max-width: 1100px;
165+
margin: 0 auto;
166+
}
167+
168+
.section-label {
169+
font-size: 11px;
170+
text-transform: uppercase;
171+
letter-spacing: 1.5px;
172+
color: var(--blue);
173+
font-weight: 600;
174+
margin-bottom: 8px;
175+
}
176+
177+
.section-title {
178+
font-size: clamp(28px, 4vw, 40px);
179+
font-weight: 700;
180+
margin-bottom: 16px;
181+
letter-spacing: -0.01em;
182+
}
183+
184+
.section-desc {
185+
font-size: 16px;
186+
color: var(--t2);
187+
max-width: 600px;
188+
line-height: 1.6;
189+
}
190+
191+
.section-header {
192+
margin-bottom: 56px;
193+
}
194+
195+
/* Buttons */
196+
.btn-hero {
197+
padding: 12px 28px;
198+
border-radius: 8px;
199+
font-size: 15px;
200+
font-weight: 600;
201+
cursor: pointer;
202+
border: none;
203+
transition: all 0.2s;
204+
text-decoration: none;
205+
display: inline-flex;
206+
align-items: center;
207+
gap: 8px;
208+
}
209+
210+
.btn-hero:hover {
211+
text-decoration: none;
212+
}
213+
214+
.btn-primary {
215+
background: var(--blue);
216+
color: #fff;
217+
}
218+
219+
.btn-primary:hover {
220+
background: #4a96ef;
221+
box-shadow: 0 0 20px rgba(88, 166, 255, 0.3);
222+
}
223+
224+
.btn-secondary {
225+
background: transparent;
226+
color: var(--t1);
227+
border: 1px solid var(--border);
228+
}
229+
230+
.btn-secondary:hover {
231+
border-color: var(--t2);
232+
background: var(--bg1);
233+
}
234+
235+
/* Animations */
236+
.fade-in {
237+
opacity: 0;
238+
transform: translateY(24px);
239+
}
240+
241+
.fade-in.visible {
242+
animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--stagger, 0s) both;
243+
}
244+
245+
@keyframes fadeInUp {
246+
to {
247+
opacity: 1;
248+
transform: none;
249+
}
250+
}
251+
252+
/* Footer */
253+
.footer {
254+
padding: 32px 24px;
255+
border-top: 1px solid var(--border);
256+
text-align: center;
257+
}
258+
259+
.footer p {
260+
font-size: 12px;
261+
color: var(--t3);
262+
}
263+
264+
.footer-links {
265+
margin-bottom: 8px;
266+
}
267+
268+
.footer-links a {
269+
color: var(--t3);
270+
margin: 0 8px;
271+
font-size: 12px;
272+
text-decoration: none;
273+
}
274+
275+
.footer-links a:hover {
276+
color: var(--t1);
277+
}

0 commit comments

Comments
 (0)