gabriel / musehub public
_docs.scss
553 lines 14.0 KB
Raw
sha256:9590cee1e0ccd6c76528f005b95d634d80f5019f0dcb7c371e149adc31d1fb65 refactor: enforce gRPC framing on all MWP wire traffic Sonnet 4.6 minor ⚠ breaking 156 days ago
1 // _docs.scss — Developer platform docs pages (.devdocs-* prefix)
2
3 // ── Layout ───────────────────────────────────────────────────────────────────
4
5 .devdocs {
6 display: flex;
7 flex-direction: column;
8 min-height: 100vh;
9 padding: 0;
10 }
11
12 .devdocs-hero {
13 border-bottom: 1px solid var(--border-default);
14 padding: var(--space-10) 0 var(--space-8);
15 }
16
17 .devdocs-hero-inner {
18 max-width: 900px;
19 margin: 0 auto;
20 padding: 0 var(--space-6);
21 }
22
23 .devdocs-eyebrow {
24 font-size: 11px;
25 font-weight: 600;
26 letter-spacing: 0.08em;
27 text-transform: uppercase;
28 color: var(--color-accent);
29 margin-bottom: var(--space-2);
30 display: block;
31 }
32
33 .devdocs-hero-title {
34 font-size: clamp(28px, 5vw, 44px);
35 font-weight: 800;
36 color: var(--text-primary);
37 letter-spacing: -0.02em;
38 line-height: 1.1;
39 margin: 0 0 var(--space-4);
40 }
41
42 .devdocs-hero-lead {
43 font-size: var(--font-size-md);
44 color: var(--text-secondary);
45 line-height: 1.65;
46 max-width: 640px;
47 margin: 0 0 var(--space-6);
48 }
49
50 // ── Phase index cards ─────────────────────────────────────────────────────────
51
52 .devdocs-phase-grid {
53 display: grid;
54 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
55 gap: var(--space-4);
56 padding: var(--space-8) 0;
57 }
58
59 .devdocs-phase-card {
60 display: flex;
61 flex-direction: column;
62 gap: var(--space-3);
63 padding: var(--space-5);
64 border-radius: 10px;
65 border: 1px solid var(--border-default);
66 background: var(--bg-surface);
67 text-decoration: none;
68 transition: border-color 0.15s, background 0.15s;
69 border-left: 3px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
70
71 &:hover {
72 border-color: var(--color-accent);
73 background: var(--bg-overlay);
74 text-decoration: none;
75 }
76
77 &--active {
78 border-left-color: var(--color-accent);
79 background: color-mix(in srgb, var(--color-accent) 5%, var(--bg-surface));
80 }
81 }
82
83 .devdocs-phase-card__num {
84 font-size: 11px;
85 font-family: var(--font-mono);
86 font-weight: 700;
87 color: var(--color-accent);
88 opacity: 0.6;
89 }
90
91 .devdocs-phase-card__title {
92 font-size: 15px;
93 font-weight: 600;
94 color: var(--text-primary);
95 margin: 0;
96 }
97
98 .devdocs-phase-card__desc {
99 font-size: 13px;
100 color: var(--text-muted);
101 margin: 0;
102 line-height: 1.5;
103 }
104
105 .devdocs-phase-card__tags {
106 display: flex;
107 flex-wrap: wrap;
108 gap: 4px;
109 margin-top: auto;
110 padding-top: var(--space-2);
111 }
112
113 .devdocs-tag {
114 font-size: 11px;
115 font-family: var(--font-mono);
116 padding: 1px 6px;
117 border-radius: 4px;
118 background: var(--bg-overlay);
119 color: var(--text-muted);
120 border: 1px solid var(--border-subtle);
121 }
122
123 // ── Two-column docs layout (phase pages) ─────────────────────────────────────
124
125 .devdocs-layout {
126 display: grid;
127 grid-template-columns: 220px 1fr;
128 gap: 0;
129 max-width: 1100px;
130 margin: 0 auto;
131 width: 100%;
132 padding: 0 var(--space-6);
133 align-items: start;
134
135 @media (max-width: 768px) {
136 grid-template-columns: 1fr;
137 }
138 }
139
140 // ── Sidebar nav ───────────────────────────────────────────────────────────────
141
142 .devdocs-sidebar {
143 position: sticky;
144 top: 56px; // below the global nav
145 max-height: calc(100vh - 72px);
146 overflow-y: auto;
147 padding: var(--space-8) var(--space-5) var(--space-8) 0;
148
149 @media (max-width: 768px) { display: none; }
150 }
151
152 .devdocs-nav-group {
153 margin-bottom: var(--space-5);
154 }
155
156 .devdocs-nav-group-label {
157 font-size: 10px;
158 font-weight: 700;
159 letter-spacing: 0.1em;
160 text-transform: uppercase;
161 color: var(--text-muted);
162 margin-bottom: var(--space-2);
163 padding: 0 var(--space-2);
164 }
165
166 .devdocs-nav-link {
167 display: block;
168 font-size: 13px;
169 color: var(--text-secondary);
170 text-decoration: none;
171 padding: 4px var(--space-2);
172 border-radius: 5px;
173 border-left: 2px solid transparent;
174 transition: color 0.1s, background 0.1s;
175 line-height: 1.4;
176
177 &:hover {
178 color: var(--text-primary);
179 background: var(--bg-overlay);
180 text-decoration: none;
181 }
182
183 &--active {
184 color: var(--color-accent-link);
185 border-left-color: var(--color-accent);
186 background: color-mix(in srgb, var(--color-accent) 8%, transparent);
187 }
188
189 &--phase {
190 font-weight: 500;
191 }
192
193 &--sub {
194 font-size: 12px;
195 color: var(--text-muted);
196 padding-left: var(--space-4);
197 }
198 }
199
200 // ── Content area ──────────────────────────────────────────────────────────────
201
202 .devdocs-content {
203 min-width: 0;
204 padding: var(--space-8) 0 var(--space-12) var(--space-8);
205 border-left: 1px solid var(--border-subtle);
206
207 @media (max-width: 768px) { padding-left: 0; border-left: none; }
208 }
209
210 .devdocs-phase-header {
211 margin-bottom: var(--space-8);
212 padding-bottom: var(--space-6);
213 border-bottom: 1px solid var(--border-default);
214 }
215
216 .devdocs-phase-num {
217 font-size: 11px;
218 font-family: var(--font-mono);
219 font-weight: 700;
220 color: var(--color-accent);
221 letter-spacing: 0.06em;
222 margin-bottom: var(--space-2);
223 display: block;
224 }
225
226 .devdocs-phase-title {
227 font-size: clamp(24px, 4vw, 34px);
228 font-weight: 800;
229 color: var(--text-primary);
230 letter-spacing: -0.02em;
231 margin: 0 0 var(--space-3);
232 line-height: 1.15;
233 }
234
235 .devdocs-phase-desc {
236 font-size: var(--font-size-base);
237 color: var(--text-secondary);
238 line-height: 1.7;
239 max-width: 600px;
240 margin: 0;
241 }
242
243 // ── Section ───────────────────────────────────────────────────────────────────
244
245 .devdocs-section {
246 margin-bottom: var(--space-12);
247 }
248
249 .devdocs-section-title {
250 font-size: 20px;
251 font-weight: 700;
252 color: var(--text-primary);
253 margin: 0 0 var(--space-2);
254 letter-spacing: -0.01em;
255 scroll-margin-top: 72px;
256
257 a {
258 color: inherit;
259 text-decoration: none;
260 &:hover { color: var(--color-accent-link); }
261 }
262 }
263
264 .devdocs-subsection-title {
265 font-size: 15px;
266 font-weight: 600;
267 color: var(--text-primary);
268 margin: var(--space-6) 0 var(--space-2);
269 scroll-margin-top: 72px;
270
271 a {
272 color: inherit;
273 text-decoration: none;
274 &:hover { color: var(--color-accent-link); }
275 }
276 }
277
278 .devdocs-content p {
279 font-size: var(--font-size-base);
280 color: var(--text-secondary);
281 line-height: 1.7;
282 margin: 0 0 var(--space-4);
283
284 code {
285 font-size: 13px;
286 background: var(--bg-overlay);
287 border: 1px solid var(--border-default);
288 border-radius: 4px;
289 padding: 1px 5px;
290 color: var(--color-purple);
291 font-family: var(--font-mono);
292 }
293
294 a {
295 color: var(--color-accent-link);
296 text-decoration: none;
297 &:hover { text-decoration: underline; }
298 }
299 }
300
301 // ── Code blocks ───────────────────────────────────────────────────────────────
302
303 .devdocs-code-block {
304 margin: var(--space-4) 0;
305 border-radius: 8px;
306 border: 1px solid var(--border-default);
307 overflow: hidden;
308 background: #0d1117;
309 }
310
311 .devdocs-code-header {
312 display: flex;
313 align-items: center;
314 justify-content: space-between;
315 padding: 6px 12px;
316 background: var(--bg-overlay);
317 border-bottom: 1px solid var(--border-default);
318 }
319
320 .devdocs-code-lang {
321 font-size: 11px;
322 font-weight: 600;
323 font-family: var(--font-mono);
324 color: var(--text-muted);
325 letter-spacing: 0.04em;
326 text-transform: uppercase;
327 }
328
329 .devdocs-code-label {
330 font-size: 11px;
331 color: var(--text-muted);
332 font-style: italic;
333 }
334
335 .devdocs-code-block pre {
336 margin: 0;
337 padding: var(--space-4) var(--space-5);
338 font-size: 13px;
339 font-family: var(--font-mono);
340 line-height: 1.65;
341 color: #abb2bf;
342 overflow-x: auto;
343 background: transparent;
344 border: none;
345 border-radius: 0;
346 }
347
348 // Minimal token colors (One Dark-ish)
349 .devdocs-code-block .tok-kw { color: #c678dd; }
350 .devdocs-code-block .tok-str { color: #98c379; }
351 .devdocs-code-block .tok-num { color: #d19a66; }
352 .devdocs-code-block .tok-cmt { color: #5c6370; font-style: italic; }
353 .devdocs-code-block .tok-key { color: #e06c75; } // JSON keys
354 .devdocs-code-block .tok-fn { color: #61afef; }
355 .devdocs-code-block .tok-type{ color: #e5c07b; }
356 .devdocs-code-block .tok-var { color: #abb2bf; }
357 .devdocs-code-block .tok-punc{ color: #abb2bf; }
358 .devdocs-code-block .tok-acc { color: #56b6c2; } // accent (sha256 prefix etc.)
359
360 // ── Field reference tables ────────────────────────────────────────────────────
361
362 .devdocs-table {
363 width: 100%;
364 font-size: 13px;
365 border-collapse: collapse;
366 margin: var(--space-4) 0;
367
368 th {
369 text-align: left;
370 font-size: 11px;
371 font-weight: 700;
372 letter-spacing: 0.06em;
373 text-transform: uppercase;
374 color: var(--text-muted);
375 padding: 6px 10px;
376 border-bottom: 1px solid var(--border-default);
377 }
378
379 td {
380 padding: 7px 10px;
381 border-bottom: 1px solid var(--border-subtle);
382 color: var(--text-secondary);
383 vertical-align: top;
384 line-height: 1.5;
385 }
386
387 tr:last-child td { border-bottom: none; }
388
389 td:first-child {
390 font-family: var(--font-mono);
391 font-size: 12px;
392 color: var(--color-purple);
393 white-space: nowrap;
394 }
395
396 td:nth-child(2) {
397 font-family: var(--font-mono);
398 font-size: 12px;
399 color: var(--text-muted);
400 white-space: nowrap;
401 }
402 }
403
404 // ── Callouts ──────────────────────────────────────────────────────────────────
405
406 .devdocs-callout {
407 display: flex;
408 gap: var(--space-3);
409 padding: var(--space-4);
410 border-radius: 8px;
411 border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
412 background: color-mix(in srgb, var(--color-accent) 6%, transparent);
413 margin: var(--space-4) 0;
414 font-size: 13px;
415 color: var(--text-secondary);
416 line-height: 1.6;
417
418 &--warn {
419 border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
420 background: color-mix(in srgb, var(--color-warning) 6%, transparent);
421 }
422
423 code {
424 font-family: var(--font-mono);
425 font-size: 12px;
426 background: var(--bg-overlay);
427 border: 1px solid var(--border-default);
428 border-radius: 3px;
429 padding: 1px 5px;
430 color: var(--color-purple);
431 }
432 }
433
434 .devdocs-callout-icon {
435 flex-shrink: 0;
436 width: 16px;
437 height: 16px;
438 margin-top: 1px;
439 color: var(--color-accent);
440 .devdocs-callout--warn & { color: var(--color-warning); }
441 }
442
443 // ── Inline badges ─────────────────────────────────────────────────────────────
444
445 .devdocs-badge {
446 display: inline-block;
447 font-size: 10px;
448 font-weight: 700;
449 font-family: var(--font-mono);
450 padding: 1px 6px;
451 border-radius: 4px;
452 vertical-align: middle;
453 letter-spacing: 0.04em;
454
455 &--hard { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger); border: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent); }
456 &--warn { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent); }
457 &--ok { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent); }
458 &--info { background: color-mix(in srgb, var(--color-accent) 15%, transparent); color: var(--color-accent); border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent); }
459 }
460
461 // ── Phase nav breadcrumb ──────────────────────────────────────────────────────
462
463 .devdocs-breadcrumb {
464 display: flex;
465 align-items: center;
466 gap: 6px;
467 font-size: 12px;
468 color: var(--text-muted);
469 margin-bottom: var(--space-6);
470
471 a {
472 color: var(--color-accent-link);
473 text-decoration: none;
474 &:hover { text-decoration: underline; }
475 }
476
477 span { color: var(--text-muted); }
478 }
479
480 .devdocs-phase-nav {
481 display: flex;
482 justify-content: space-between;
483 align-items: center;
484 margin-top: var(--space-10);
485 padding-top: var(--space-6);
486 border-top: 1px solid var(--border-default);
487 }
488
489 .devdocs-phase-nav-btn {
490 display: flex;
491 align-items: center;
492 gap: 6px;
493 font-size: 13px;
494 font-weight: 500;
495 color: var(--text-secondary);
496 text-decoration: none;
497 padding: 6px 12px;
498 border-radius: 6px;
499 border: 1px solid var(--border-default);
500 transition: border-color 0.15s, color 0.15s;
501
502 &:hover {
503 border-color: var(--color-accent);
504 color: var(--color-accent-link);
505 text-decoration: none;
506 }
507
508 &--next { flex-direction: row-reverse; }
509 }
510
511 // ── Landing index ─────────────────────────────────────────────────────────────
512
513 .devdocs-index {
514 max-width: 900px;
515 margin: 0 auto;
516 padding: var(--space-8) var(--space-6) var(--space-12);
517 }
518
519 .devdocs-index-intro {
520 display: grid;
521 grid-template-columns: 1fr auto;
522 gap: var(--space-8);
523 align-items: start;
524 margin-bottom: var(--space-10);
525 padding-bottom: var(--space-8);
526 border-bottom: 1px solid var(--border-default);
527 }
528
529 .devdocs-stat-cluster {
530 display: flex;
531 flex-direction: column;
532 gap: var(--space-3);
533 flex-shrink: 0;
534 }
535
536 .devdocs-stat {
537 text-align: right;
538 }
539
540 .devdocs-stat-num {
541 font-size: 24px;
542 font-weight: 800;
543 color: var(--text-primary);
544 font-family: var(--font-mono);
545 display: block;
546 line-height: 1;
547 }
548
549 .devdocs-stat-label {
550 font-size: 11px;
551 color: var(--text-muted);
552 letter-spacing: 0.04em;
553 }
File History 1 commit
sha256:9590cee1e0ccd6c76528f005b95d634d80f5019f0dcb7c371e149adc31d1fb65 refactor: enforce gRPC framing on all MWP wire traffic Sonnet 4.6 minor ⚠ 156 days ago