dignity.js 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,68 +1,479 @@
1
1
  :root {
2
- --bg: #0b1020;
3
- --card: #121a33;
4
- --text: #e7ecff;
5
- --muted: #9fb0de;
6
- --accent: #66b3ff;
7
- --line: #26335f;
2
+ --bg: #ffffff;
3
+ --bg-subtle: #f6f8fa;
4
+ --bg-code: #f3f4f6;
5
+ --sidebar-bg: #fafbfc;
6
+ --text: #24292f;
7
+ --text-muted: #57606a;
8
+ --heading: #1f2328;
9
+ --border: #d0d7de;
10
+ --border-light: #eaeef2;
11
+ --accent: #5b7fff;
12
+ --accent-hover: #4468e8;
13
+ --accent-soft: #eef2ff;
14
+ --green: #1a7f37;
15
+ --green-bg: #dafbe1;
16
+ --sidebar-width: 280px;
17
+ --header-height: 56px;
18
+ --content-max: 920px;
19
+ --radius: 8px;
20
+ --shadow: 0 1px 3px rgba(27, 31, 36, 0.08);
21
+ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
22
+ --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
23
+ --font-size-base: 18px;
8
24
  }
9
25
 
10
- * {
26
+ html {
27
+ font-size: var(--font-size-base);
28
+ scroll-behavior: smooth;
29
+ scroll-padding-top: calc(var(--header-height) + 24px);
30
+ }
31
+
32
+ *,
33
+ *::before,
34
+ *::after {
11
35
  box-sizing: border-box;
12
36
  }
13
37
 
14
38
  body {
15
39
  margin: 0;
16
- padding: 32px;
40
+ color: var(--text);
17
41
  background: var(--bg);
42
+ font-family: var(--font-sans);
43
+ font-size: 1rem;
44
+ line-height: 1.6;
45
+ }
46
+
47
+ a {
48
+ color: var(--accent);
49
+ text-decoration: none;
50
+ }
51
+
52
+ a:hover {
53
+ color: var(--accent-hover);
54
+ text-decoration: underline;
55
+ }
56
+
57
+ code {
58
+ font-family: var(--font-mono);
59
+ font-size: 0.875em;
60
+ background: var(--bg-code);
61
+ border: 1px solid var(--border-light);
62
+ border-radius: 4px;
63
+ padding: 0.15em 0.35em;
64
+ }
65
+
66
+ pre {
67
+ margin: 0;
68
+ overflow: auto;
69
+ }
70
+
71
+ pre code {
72
+ display: block;
73
+ padding: 16px 18px;
74
+ font-size: 0.9375rem;
75
+ line-height: 1.55;
76
+ }
77
+
78
+ pre code:not(.hljs) {
79
+ background: var(--bg-subtle);
80
+ border: 1px solid var(--border);
81
+ border-radius: var(--radius);
82
+ border-left: 3px solid var(--accent);
83
+ }
84
+
85
+ pre code.hljs {
86
+ border: 1px solid var(--border);
87
+ border-radius: var(--radius);
88
+ border-left: 3px solid var(--accent);
89
+ padding: 16px 18px;
90
+ }
91
+
92
+ /* Header */
93
+ .site-header {
94
+ position: sticky;
95
+ top: 0;
96
+ z-index: 100;
97
+ height: var(--header-height);
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: space-between;
101
+ padding: 0 24px;
102
+ background: var(--bg);
103
+ border-bottom: 1px solid var(--border);
104
+ }
105
+
106
+ .site-header__brand {
107
+ display: flex;
108
+ align-items: center;
109
+ gap: 12px;
110
+ color: var(--heading);
111
+ font-weight: 600;
112
+ font-size: 1.05rem;
113
+ text-decoration: none;
114
+ }
115
+
116
+ .site-header__brand:hover {
117
+ text-decoration: none;
118
+ color: var(--heading);
119
+ }
120
+
121
+ .site-header__brand img {
122
+ height: 40px;
123
+ width: auto;
124
+ }
125
+
126
+ .site-header__version {
127
+ font-size: 0.75rem;
128
+ font-weight: 500;
129
+ color: var(--text-muted);
130
+ background: var(--bg-subtle);
131
+ border: 1px solid var(--border);
132
+ border-radius: 999px;
133
+ padding: 2px 10px;
134
+ }
135
+
136
+ .site-header__links {
137
+ display: flex;
138
+ align-items: center;
139
+ gap: 16px;
140
+ }
141
+
142
+ .site-header__links a {
143
+ font-size: 0.875rem;
144
+ font-weight: 500;
145
+ color: var(--text-muted);
146
+ text-decoration: none;
147
+ }
148
+
149
+ .site-header__links a:hover {
150
+ color: var(--accent);
151
+ }
152
+
153
+ .menu-toggle {
154
+ display: none;
155
+ background: none;
156
+ border: 1px solid var(--border);
157
+ border-radius: var(--radius);
158
+ padding: 6px 10px;
159
+ font: inherit;
160
+ cursor: pointer;
18
161
  color: var(--text);
19
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
20
- line-height: 1.5;
21
162
  }
22
163
 
23
- main {
24
- max-width: 980px;
25
- margin: 0 auto;
164
+ /* Layout */
165
+ .layout {
166
+ display: grid;
167
+ grid-template-columns: var(--sidebar-width) 1fr;
168
+ min-height: calc(100vh - var(--header-height));
26
169
  }
27
170
 
28
- h1, h2, h3 {
29
- margin-top: 0;
171
+ .sidebar {
172
+ position: sticky;
173
+ top: var(--header-height);
174
+ height: calc(100vh - var(--header-height));
175
+ overflow-y: auto;
176
+ padding: 24px 0 48px;
177
+ background: var(--sidebar-bg);
178
+ border-right: 1px solid var(--border);
30
179
  }
31
180
 
32
- h1 {
33
- margin-bottom: 8px;
181
+ .sidebar__group {
182
+ margin-bottom: 20px;
34
183
  }
35
184
 
36
- .subtitle {
37
- color: var(--muted);
38
- margin-top: 0;
185
+ .sidebar__label {
186
+ padding: 0 20px 8px;
187
+ font-size: 0.6875rem;
188
+ font-weight: 700;
189
+ letter-spacing: 0.06em;
190
+ text-transform: uppercase;
191
+ color: var(--text-muted);
39
192
  }
40
193
 
41
- section {
42
- background: var(--card);
43
- border: 1px solid var(--line);
44
- border-radius: 12px;
45
- padding: 18px 20px;
46
- margin-bottom: 16px;
194
+ .sidebar nav a {
195
+ display: block;
196
+ padding: 6px 20px;
197
+ font-size: 0.875rem;
198
+ color: var(--text-muted);
199
+ text-decoration: none;
200
+ border-left: 2px solid transparent;
47
201
  }
48
202
 
49
- code, pre {
50
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
203
+ .sidebar nav a:hover {
204
+ color: var(--text);
205
+ background: rgba(91, 127, 255, 0.06);
51
206
  }
52
207
 
53
- pre {
54
- background: #0a142d;
55
- border: 1px solid var(--line);
56
- border-radius: 8px;
57
- padding: 12px;
58
- overflow: auto;
59
- white-space: pre;
208
+ .sidebar nav a.active {
209
+ color: var(--accent);
210
+ font-weight: 600;
211
+ border-left-color: var(--accent);
212
+ background: var(--accent-soft);
60
213
  }
61
214
 
62
- a {
215
+ .content {
216
+ padding: 40px 48px 80px;
217
+ }
218
+
219
+ .content__inner {
220
+ max-width: var(--content-max);
221
+ }
222
+
223
+ /* Typography */
224
+ .page-title {
225
+ margin: 0 0 8px;
226
+ font-size: 2rem;
227
+ font-weight: 700;
228
+ letter-spacing: -0.02em;
229
+ color: var(--heading);
230
+ line-height: 1.2;
231
+ }
232
+
233
+ .lead {
234
+ margin: 0 0 32px;
235
+ font-size: 1.125rem;
236
+ color: var(--text-muted);
237
+ max-width: 720px;
238
+ }
239
+
240
+ .section {
241
+ margin-bottom: 48px;
242
+ scroll-margin-top: calc(var(--header-height) + 24px);
243
+ }
244
+
245
+ .section h2 {
246
+ margin: 0 0 16px;
247
+ padding-bottom: 8px;
248
+ font-size: 1.5rem;
249
+ font-weight: 600;
250
+ color: var(--heading);
251
+ border-bottom: 1px solid var(--border-light);
252
+ }
253
+
254
+ .section h3 {
255
+ margin: 28px 0 12px;
256
+ font-size: 1.125rem;
257
+ font-weight: 600;
258
+ color: var(--heading);
259
+ }
260
+
261
+ .section p {
262
+ margin: 0 0 16px;
263
+ }
264
+
265
+ .section ul,
266
+ .section ol {
267
+ margin: 0 0 16px;
268
+ padding-left: 1.4rem;
269
+ }
270
+
271
+ .section li {
272
+ margin-bottom: 6px;
273
+ }
274
+
275
+ .section li code {
276
+ font-size: 0.8125em;
277
+ }
278
+
279
+ .callout {
280
+ margin: 20px 0;
281
+ padding: 14px 16px;
282
+ border-radius: var(--radius);
283
+ border: 1px solid #aceebb;
284
+ background: var(--green-bg);
285
+ color: #116329;
286
+ font-size: 0.9375rem;
287
+ }
288
+
289
+ .callout strong {
290
+ display: block;
291
+ margin-bottom: 4px;
292
+ }
293
+
294
+ .callout--warn {
295
+ border-color: #ffe58f;
296
+ background: #fffbe6;
297
+ color: #7c5e00;
298
+ }
299
+
300
+ .code-block {
301
+ position: relative;
302
+ margin: 16px 0 24px;
303
+ }
304
+
305
+ .code-block__label {
306
+ display: block;
307
+ margin-bottom: 6px;
308
+ font-size: 0.75rem;
309
+ font-weight: 600;
310
+ text-transform: uppercase;
311
+ letter-spacing: 0.04em;
312
+ color: var(--text-muted);
313
+ }
314
+
315
+ /* Tables (API reference) */
316
+ .table-wrap {
317
+ overflow-x: auto;
318
+ margin: 16px 0 24px;
319
+ border: 1px solid var(--border);
320
+ border-radius: var(--radius);
321
+ box-shadow: var(--shadow);
322
+ }
323
+
324
+ table {
325
+ width: 100%;
326
+ border-collapse: collapse;
327
+ font-size: 0.9375rem;
328
+ }
329
+
330
+ thead {
331
+ background: var(--bg-subtle);
332
+ }
333
+
334
+ th,
335
+ td {
336
+ padding: 10px 14px;
337
+ text-align: left;
338
+ border-bottom: 1px solid var(--border-light);
339
+ vertical-align: top;
340
+ }
341
+
342
+ th {
343
+ font-weight: 600;
344
+ color: var(--heading);
345
+ white-space: nowrap;
346
+ }
347
+
348
+ tbody tr:last-child td {
349
+ border-bottom: none;
350
+ }
351
+
352
+ tbody tr:hover {
353
+ background: rgba(91, 127, 255, 0.03);
354
+ }
355
+
356
+ td code {
357
+ font-size: 0.8125em;
358
+ }
359
+
360
+ .tag {
361
+ display: inline-block;
362
+ font-size: 0.6875rem;
363
+ font-weight: 600;
364
+ text-transform: uppercase;
365
+ letter-spacing: 0.04em;
366
+ padding: 2px 7px;
367
+ border-radius: 4px;
368
+ background: var(--accent-soft);
63
369
  color: var(--accent);
64
370
  }
65
371
 
66
- ul {
67
- margin-bottom: 0;
372
+ .tag--event {
373
+ background: #f0fdf4;
374
+ color: var(--green);
375
+ }
376
+
377
+ .card-grid {
378
+ display: grid;
379
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
380
+ gap: 16px;
381
+ margin: 20px 0 24px;
382
+ }
383
+
384
+ .card {
385
+ padding: 16px 18px;
386
+ border: 1px solid var(--border);
387
+ border-radius: var(--radius);
388
+ background: var(--bg);
389
+ box-shadow: var(--shadow);
390
+ }
391
+
392
+ .card h3 {
393
+ margin: 0 0 8px;
394
+ font-size: 1rem;
395
+ }
396
+
397
+ .card p {
398
+ margin: 0;
399
+ font-size: 0.875rem;
400
+ color: var(--text-muted);
401
+ }
402
+
403
+ .site-footer {
404
+ margin-top: 48px;
405
+ padding-top: 24px;
406
+ border-top: 1px solid var(--border-light);
407
+ font-size: 0.8125rem;
408
+ color: var(--text-muted);
409
+ }
410
+
411
+ .site-footer a {
412
+ font-weight: 500;
413
+ }
414
+
415
+ /* Mobile */
416
+ @media (max-width: 960px) {
417
+ .menu-toggle {
418
+ display: inline-block;
419
+ }
420
+
421
+ .layout {
422
+ grid-template-columns: 1fr;
423
+ }
424
+
425
+ .sidebar {
426
+ display: none;
427
+ position: fixed;
428
+ top: var(--header-height);
429
+ left: 0;
430
+ width: min(100%, 320px);
431
+ z-index: 90;
432
+ box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
433
+ }
434
+
435
+ .sidebar.open {
436
+ display: block;
437
+ }
438
+
439
+ .content {
440
+ padding: 28px 20px 64px;
441
+ }
442
+
443
+ .site-header__links {
444
+ display: none;
445
+ }
446
+ }
447
+
448
+ @media (prefers-color-scheme: dark) {
449
+ :root {
450
+ --bg: #0d1117;
451
+ --bg-subtle: #161b22;
452
+ --bg-code: #1c2128;
453
+ --sidebar-bg: #010409;
454
+ --text: #c9d1d9;
455
+ --text-muted: #8b949e;
456
+ --heading: #f0f6fc;
457
+ --border: #30363d;
458
+ --border-light: #21262d;
459
+ --accent-soft: rgba(91, 127, 255, 0.15);
460
+ --green-bg: rgba(35, 134, 54, 0.15);
461
+ --shadow: none;
462
+ }
463
+
464
+ .callout {
465
+ border-color: #238636;
466
+ color: #7ee787;
467
+ }
468
+
469
+ .callout--warn {
470
+ border-color: #9e6a03;
471
+ background: rgba(158, 106, 3, 0.15);
472
+ color: #f0c14d;
473
+ }
474
+
475
+ .tag--event {
476
+ background: rgba(35, 134, 54, 0.15);
477
+ color: #7ee787;
478
+ }
68
479
  }