Skip to content

Commit 4d8b23f

Browse files
ellieyhchengellieyhcheng
authored
Basic Docs
Setup initial documentation page.
1 parent 1de8afa commit 4d8b23f

8 files changed

Lines changed: 1121 additions & 0 deletions

File tree

‎docs/assets/nightjar.png‎

670 KB
Loading

‎docs/assets/nightjar1.png‎

517 KB
Loading

‎docs/assets/nightjar2.png‎

379 KB
Loading

‎docs/assets/style.css‎

Lines changed: 343 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,343 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@400;500&display=swap');
2+
3+
:root {
4+
--bg: #f8f7f3;
5+
--panel: #ffffff;
6+
--panel-soft: #f0eeea;
7+
--accent: #d4941f;
8+
--accent-2: #e6a832;
9+
--text: #2d3748;
10+
--muted: #5a6474;
11+
--line: rgba(0, 0, 0, 0.1);
12+
--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
13+
}
14+
15+
* { box-sizing: border-box; }
16+
17+
html, body {
18+
min-height: 100vh;
19+
margin: 0;
20+
}
21+
22+
body {
23+
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
24+
background: radial-gradient(circle at 15% 20%, rgba(212, 148, 31, 0.06), transparent 38%),
25+
radial-gradient(circle at 85% 5%, rgba(107, 138, 181, 0.08), transparent 45%),
26+
var(--bg);
27+
color: var(--text);
28+
display: flex;
29+
flex-direction: column;
30+
}
31+
32+
a { color: inherit; text-decoration: none; }
33+
34+
header {
35+
position: sticky;
36+
top: 0;
37+
z-index: 10;
38+
background: rgba(248, 247, 243, 0.95);
39+
backdrop-filter: blur(14px);
40+
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
41+
}
42+
43+
.nav {
44+
max-width: 1100px;
45+
margin: 0 auto;
46+
padding: 18px 20px;
47+
display: flex;
48+
align-items: center;
49+
justify-content: space-between;
50+
gap: 16px;
51+
}
52+
53+
.logo {
54+
display: flex;
55+
align-items: center;
56+
gap: 10px;
57+
font-family: 'Oswald', 'Inter', sans-serif;
58+
letter-spacing: 0.08em;
59+
}
60+
61+
.logo img {
62+
height: 46px;
63+
width: auto;
64+
object-fit: contain;
65+
display: block;
66+
}
67+
68+
.nav-links { display: flex; gap: 18px; font-weight: 500; color: var(--muted); align-items: center; }
69+
70+
.nav-links a:hover,
71+
.nav-links a:focus-visible { color: var(--text); }
72+
73+
.button {
74+
padding: 10px 18px;
75+
border-radius: 6px;
76+
background: linear-gradient(135deg, #d4941f, #e6a832);
77+
color: #fff;
78+
font-weight: 600;
79+
border: none;
80+
box-shadow: var(--shadow);
81+
transition: transform 150ms ease, opacity 150ms ease;
82+
}
83+
84+
.button:hover,
85+
.button:focus-visible { transform: translateY(-2px); opacity: 0.9; }
86+
87+
main {
88+
flex: 1;
89+
max-width: 1100px;
90+
margin: 0 auto;
91+
padding: 60px 20px 120px;
92+
}
93+
94+
.hero {
95+
position: relative;
96+
margin-top: 40px;
97+
padding-top: 30px;
98+
}
99+
100+
.hero::before {
101+
content: '';
102+
position: absolute;
103+
top: 0;
104+
left: 0;
105+
width: 60%;
106+
height: 1px;
107+
background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
108+
}
109+
110+
.hero-grid {
111+
display: grid;
112+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
113+
gap: 40px;
114+
align-items: start;
115+
}
116+
117+
.tag {
118+
display: inline-flex;
119+
padding: 6px 14px;
120+
border-radius: 4px;
121+
background: rgba(212, 148, 31, 0.12);
122+
font-size: 13px;
123+
letter-spacing: 0.12em;
124+
text-transform: uppercase;
125+
color: var(--muted);
126+
}
127+
128+
.hero-copy h1 {
129+
font-family: 'Oswald', 'Inter', sans-serif;
130+
font-size: clamp(34px, 4.6vw, 58px);
131+
margin: 0 0 14px;
132+
}
133+
134+
.hero-copy p { color: var(--muted); line-height: 1.7; }
135+
136+
pre,
137+
pre.snippet {
138+
margin: 0;
139+
padding: 18px;
140+
border-radius: 10px;
141+
background: var(--panel-soft);
142+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
143+
color: #2d3748;
144+
font-size: 14px;
145+
line-height: 1.55;
146+
white-space: pre-wrap;
147+
word-wrap: break-word;
148+
overflow-x: visible;
149+
}
150+
151+
code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; }
152+
153+
.natural-block {
154+
display: block;
155+
white-space: pre-wrap;
156+
padding-left: var(--natural-indent, 0);
157+
text-indent: 0;
158+
margin-left: 0;
159+
}
160+
161+
/* Syntax highlighting */
162+
.token.keyword { color: #a0785d; font-weight: 500; }
163+
.token.string { color: #6b7d6f; }
164+
.token.comment { color: #9ca3af; font-style: italic; }
165+
.token.function { color: #5a6f8a; }
166+
.token.decorator { color: #d4941f; font-weight: 500; }
167+
.token.number { color: #c97d3a; }
168+
.token.operator { color: #5a6474; }
169+
.token.builtin { color: #8a7268; }
170+
171+
.warning-line {
172+
margin-top: 16px;
173+
padding-top: 12px;
174+
color: var(--muted);
175+
font-size: 14px;
176+
border-top: 1px solid rgba(0, 0, 0, 0.08);
177+
}
178+
179+
.highlight-panels {
180+
margin-top: 70px;
181+
display: grid;
182+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
183+
gap: 26px;
184+
}
185+
186+
.panel-line {
187+
background: #ffffff;
188+
padding: 22px;
189+
border-radius: 5px;
190+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
191+
position: relative;
192+
border: 1px solid rgba(0, 0, 0, 0.06);
193+
}
194+
195+
.panel-line::before {
196+
content: '';
197+
display: block;
198+
height: 2px;
199+
width: 110px;
200+
margin-bottom: 16px;
201+
background: linear-gradient(90deg, var(--accent-2), transparent);
202+
}
203+
204+
.panel-line h3 {
205+
margin: 0 0 10px;
206+
font-family: 'Oswald', 'Inter', sans-serif;
207+
letter-spacing: 0.08em;
208+
text-transform: uppercase;
209+
font-size: 15px;
210+
}
211+
212+
.panel-line p { color: var(--muted); line-height: 1.6; }
213+
214+
.cta-line {
215+
margin-top: 60px;
216+
padding-top: 24px;
217+
border-top: 1px solid var(--line);
218+
display: flex;
219+
flex-wrap: wrap;
220+
justify-content: space-between;
221+
gap: 16px;
222+
color: var(--muted);
223+
}
224+
225+
footer {
226+
margin-top: auto;
227+
background: rgba(240, 238, 234, 0.95);
228+
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08);
229+
}
230+
231+
.footer-inner {
232+
max-width: 1100px;
233+
margin: 0 auto;
234+
padding: 24px 20px;
235+
display: flex;
236+
justify-content: space-between;
237+
gap: 12px;
238+
flex-wrap: wrap;
239+
color: var(--muted);
240+
}
241+
242+
/* Docs */
243+
244+
.docs main { padding-top: 50px; }
245+
246+
.docs-layout {
247+
display: grid;
248+
grid-template-columns: 220px 1fr;
249+
gap: 30px;
250+
}
251+
252+
@media (max-width: 900px) {
253+
.docs-layout { grid-template-columns: 1fr; }
254+
.toc { position: static; }
255+
.nav { flex-wrap: wrap; }
256+
}
257+
258+
.toc {
259+
position: sticky;
260+
top: 110px;
261+
background: rgba(255, 255, 255, 0.95);
262+
padding: 18px;
263+
border-radius: 12px;
264+
border: 1px solid rgba(0, 0, 0, 0.08);
265+
}
266+
267+
.toc h2 {
268+
margin: 0 0 12px;
269+
font-size: 15px;
270+
letter-spacing: 0.16em;
271+
text-transform: uppercase;
272+
color: var(--muted);
273+
}
274+
275+
.toc ul { list-style: none; padding: 0; margin: 0; }
276+
277+
.toc a { display: block; padding: 6px 0; color: var(--muted); }
278+
279+
.toc a:hover { color: var(--text); }
280+
281+
.docs article h1,
282+
.docs article h2,
283+
.docs article h3 {
284+
font-family: 'Oswald', 'Inter', sans-serif;
285+
letter-spacing: 0.04em;
286+
}
287+
288+
.docs article h1 { font-size: 42px; margin-bottom: 12px; }
289+
.docs article h2 { font-size: 28px; margin: 44px 0 12px; }
290+
.docs article h3 { font-size: 20px; margin: 32px 0 12px; }
291+
292+
.docs article p { color: var(--muted); line-height: 1.8; }
293+
294+
.docs article pre { margin: 14px 0 20px; }
295+
296+
.docs-hero { text-align: left; margin-bottom: 24px; }
297+
298+
.docs-hero-line {
299+
font-size: 13px;
300+
letter-spacing: 0.3em;
301+
text-transform: uppercase;
302+
color: var(--muted);
303+
position: relative;
304+
padding-left: 90px;
305+
margin-bottom: 12px;
306+
}
307+
308+
.docs-hero-line::before {
309+
content: '';
310+
position: absolute;
311+
left: 0;
312+
top: 50%;
313+
width: 70px;
314+
height: 1px;
315+
background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
316+
}
317+
318+
.callout {
319+
border-left: 3px solid var(--accent);
320+
padding: 14px 18px;
321+
border-radius: 3px;
322+
background: rgba(212, 148, 31, 0.08);
323+
color: var(--text);
324+
}
325+
326+
blockquote {
327+
margin: 20px 0;
328+
padding: 14px 18px;
329+
border-left: 3px solid var(--accent-2);
330+
background: rgba(240, 238, 234, 0.8);
331+
border-radius: 3px;
332+
}
333+
334+
kbd {
335+
background: rgba(0, 0, 0, 0.06);
336+
padding: 2px 7px;
337+
border-radius: 4px;
338+
}
339+
340+
@media (max-width: 720px) {
341+
.hero-grid { grid-template-columns: 1fr; }
342+
.cta-line { flex-direction: column; }
343+
}

0 commit comments

Comments
 (0)