gabriel / musehub public
_devdocs.scss
474 lines 13.6 KB
Raw
sha256:7d6dd8f4a89e2d1fef2d84f6e65feaff51385d382f466766b7f690a22ec18e32 fix: fall back to DB ancestry check when mpack-only fast-fo… Sonnet 4.6 patch 6 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Developer docs (muse docs pages, /muse/*)
3 // File: src/scss/components/_devdocs.scss
4 //
5 // Visual rules for all devdocs-* classes. Structural layout lives in
6 // pages/_muse-docs.scss.
7 //
8 // Tokens: --color-accent, --color-accent-link, --color-purple, --color-warning
9 // --color-danger, --color-success, --text-primary/secondary/muted
10 // --bg-base, --bg-surface, --bg-overlay, --bg-hover, --bg-void
11 // --border-default, --border-subtle, --font-mono, --font-sans
12 // Usage: /muse and /muse/* developer documentation pages
13 // ─────────────────────────────────────────────────────────────────────────────
14
15 // ── Hero / index ──────────────────────────────────────────────────────────────
16
17 .devdocs-hero {
18 border-bottom: 1px solid var(--border-default);
19 }
20
21 .devdocs-eyebrow {
22 display: block;
23 font-size: 11px;
24 font-weight: 600;
25 letter-spacing: 0.08em;
26 text-transform: uppercase;
27 color: var(--color-accent);
28 margin-bottom: var(--space-2);
29 }
30
31 .devdocs-hero-title {
32 font-size: clamp(28px, 5vw, 44px);
33 font-weight: 300;
34 color: var(--color-accent);
35 letter-spacing: -0.02em;
36 line-height: 1.1;
37 margin: 0 0 var(--space-4);
38 }
39
40 .devdocs-hero-lead {
41 font-size: var(--text-md);
42 color: var(--text-secondary);
43 line-height: 1.65;
44 max-width: 640px;
45 margin: 0 0 var(--space-6);
46 }
47
48 .devdocs-h2 {
49 font-size: 18px;
50 font-weight: 700;
51 color: var(--text-primary);
52 margin: var(--space-8) 0 var(--space-2);
53 letter-spacing: -0.01em;
54 }
55
56 // ── Stat cluster ──────────────────────────────────────────────────────────────
57
58 .devdocs-stat { text-align: right; }
59
60 .devdocs-stat-num {
61 display: block;
62 font-size: 24px;
63 font-weight: 800;
64 color: var(--text-primary);
65 font-family: var(--font-mono);
66 line-height: 1;
67 }
68
69 .devdocs-stat-label {
70 font-size: 11px;
71 color: var(--text-muted);
72 letter-spacing: 0.04em;
73 }
74
75 // ── Phase index cards ─────────────────────────────────────────────────────────
76
77 .devdocs-phase-card {
78 display: flex;
79 flex-direction: column;
80 gap: var(--space-3);
81 padding: var(--space-5);
82 border-radius: 10px;
83 border: 1px solid var(--border-default);
84 background: var(--bg-surface);
85 text-decoration: none;
86 transition: border-color 0.15s, background 0.15s;
87
88 &:hover {
89 border-color: var(--color-accent);
90 background: var(--bg-overlay);
91 text-decoration: none;
92 }
93
94 &--active {
95 background: color-mix(in srgb, var(--color-accent) 5%, var(--bg-surface));
96 }
97 }
98
99 .devdocs-phase-card__num {
100 font-size: 11px;
101 font-family: var(--font-mono);
102 font-weight: 700;
103 color: var(--color-accent);
104 opacity: 0.6;
105 }
106
107 .devdocs-phase-card__title {
108 font-size: 15px;
109 font-weight: 600;
110 color: var(--text-primary);
111 margin: 0;
112 }
113
114 .devdocs-phase-card__desc {
115 font-size: 13px;
116 color: var(--text-muted);
117 margin: 0;
118 line-height: 1.5;
119 }
120
121 .devdocs-tag {
122 font-size: 11px;
123 font-family: var(--font-mono);
124 padding: 1px 6px;
125 border-radius: 4px;
126 background: var(--bg-overlay);
127 color: var(--text-muted);
128 border: 1px solid var(--border-subtle);
129 }
130
131 // ── Sidebar nav ───────────────────────────────────────────────────────────────
132
133 .devdocs-nav-group-label {
134 font-size: 10px;
135 font-weight: 700;
136 letter-spacing: 0.1em;
137 text-transform: uppercase;
138 color: var(--text-muted);
139 margin-bottom: var(--space-2);
140 padding: 0 var(--space-2);
141 }
142
143 .devdocs-nav-link {
144 display: block;
145 font-size: 13px;
146 color: var(--text-secondary);
147 text-decoration: none;
148 padding: 4px var(--space-2);
149 border-radius: 5px;
150 transition: color 0.1s, background 0.1s;
151 line-height: 1.4;
152
153 &:hover {
154 color: var(--text-primary);
155 background: var(--bg-overlay);
156 text-decoration: none;
157 }
158
159 &--active {
160 color: var(--color-accent-link);
161 background: color-mix(in srgb, var(--color-accent) 8%, transparent);
162 }
163
164 &--phase { font-weight: 500; }
165
166 &--sub {
167 font-size: 12px;
168 color: var(--text-muted);
169 padding-left: var(--space-4);
170 }
171 }
172
173 // ── Content area ──────────────────────────────────────────────────────────────
174
175 .devdocs-content {
176 border-left: 1px solid var(--border-subtle);
177 @media (max-width: 768px) { border-left: none; }
178 }
179
180 // ── Phase header ──────────────────────────────────────────────────────────────
181
182 .devdocs-phase-header {
183 border-bottom: 1px solid var(--border-default);
184 }
185
186 .devdocs-phase-num {
187 display: block;
188 font-size: 11px;
189 font-family: var(--font-mono);
190 font-weight: 700;
191 color: var(--color-accent);
192 letter-spacing: 0.06em;
193 margin-bottom: var(--space-2);
194 }
195
196 .devdocs-phase-title {
197 font-size: clamp(24px, 4vw, 34px);
198 font-weight: 800;
199 color: var(--text-primary);
200 letter-spacing: -0.02em;
201 margin: 0 0 var(--space-3);
202 line-height: 1.15;
203 }
204
205 .devdocs-phase-desc {
206 font-size: var(--text-base);
207 color: var(--text-secondary);
208 line-height: 1.7;
209 max-width: 600px;
210 margin: 0;
211 }
212
213 // ── Sections ──────────────────────────────────────────────────────────────────
214
215 .devdocs-section-title {
216 font-size: 20px;
217 font-weight: 700;
218 color: var(--text-primary);
219 margin: 0 0 var(--space-2);
220 letter-spacing: -0.01em;
221 scroll-margin-top: 72px;
222
223 a { color: inherit; text-decoration: none; &:hover { color: var(--color-accent-link); } }
224 }
225
226 .devdocs-subsection-title {
227 font-size: 15px;
228 font-weight: 600;
229 color: var(--text-primary);
230 margin: var(--space-6) 0 var(--space-2);
231 scroll-margin-top: 72px;
232
233 a { color: inherit; text-decoration: none; &:hover { color: var(--color-accent-link); } }
234 }
235
236 .devdocs-content p {
237 font-size: var(--text-base);
238 color: var(--text-secondary);
239 line-height: 1.7;
240 margin: 0 0 var(--space-4);
241
242 code {
243 font-size: 13px;
244 background: var(--bg-overlay);
245 border: 1px solid var(--border-default);
246 border-radius: 4px;
247 padding: 1px 5px;
248 color: var(--color-purple);
249 font-family: var(--font-mono);
250 }
251
252 a { color: var(--color-accent-link); text-decoration: none; &:hover { text-decoration: underline; } }
253 }
254
255 // ── Code blocks ───────────────────────────────────────────────────────────────
256
257 .devdocs-code-block {
258 border-radius: 8px;
259 border: 1px solid var(--border-default);
260 overflow: hidden;
261 background: var(--bg-base);
262
263 pre {
264 margin: 0;
265 padding: var(--space-4) var(--space-5);
266 font-size: 13px;
267 font-family: var(--font-mono);
268 line-height: 1.65;
269 color: #abb2bf;
270 overflow-x: auto;
271 background: transparent;
272 border: none;
273 border-radius: 0;
274 }
275
276 .tok-kw { color: #c678dd; }
277 .tok-str { color: #98c379; }
278 .tok-num { color: #d19a66; }
279 .tok-cmt { color: #5c6370; font-style: italic; }
280 .tok-key { color: #e06c75; }
281 .tok-fn { color: #61afef; }
282 .tok-type{ color: #e5c07b; }
283 .tok-var { color: #abb2bf; }
284 .tok-punc{ color: #abb2bf; }
285 .tok-acc { color: #56b6c2; }
286
287 &--output {
288 background: var(--bg-void);
289 border-color: var(--border-subtle);
290 margin-top: -1px;
291 border-top-left-radius: 0;
292 border-top-right-radius: 0;
293
294 pre { color: #7a8394; }
295
296 .tok-key { color: #c97575; }
297 .tok-str { color: #7aaa6a; }
298 .tok-num { color: #b5824d; }
299 .tok-kw { color: #a05cb5; }
300 }
301 }
302
303 .devdocs-code-header {
304 display: flex;
305 align-items: center;
306 justify-content: space-between;
307 padding: 6px 12px;
308 background: var(--bg-overlay);
309 border-bottom: 1px solid var(--border-default);
310 }
311
312 .devdocs-code-lang {
313 font-size: 11px;
314 font-weight: 600;
315 font-family: var(--font-mono);
316 color: var(--text-muted);
317 letter-spacing: 0.04em;
318 text-transform: uppercase;
319 }
320
321 .devdocs-code-label {
322 font-size: 11px;
323 color: var(--text-muted);
324 font-style: italic;
325 }
326
327 // ── Tables ────────────────────────────────────────────────────────────────────
328
329 .devdocs-table {
330 width: 100%;
331 font-size: 13px;
332 border-collapse: collapse;
333 margin: var(--space-4) 0;
334 display: block;
335 overflow-x: auto;
336 -webkit-overflow-scrolling: touch;
337
338 th {
339 text-align: left;
340 font-size: 11px;
341 font-weight: 700;
342 letter-spacing: 0.06em;
343 text-transform: uppercase;
344 color: var(--text-muted);
345 padding: 6px 10px;
346 border-bottom: 1px solid var(--border-default);
347 }
348
349 td {
350 padding: 7px 10px;
351 border-bottom: 1px solid var(--border-subtle);
352 color: var(--text-secondary);
353 vertical-align: top;
354 line-height: 1.5;
355 }
356
357 tr:last-child td { border-bottom: none; }
358
359 td:first-child {
360 font-family: var(--font-mono);
361 font-size: 12px;
362 color: var(--color-purple);
363 white-space: nowrap;
364 }
365
366 td:nth-child(2) {
367 font-family: var(--font-mono);
368 font-size: 12px;
369 color: var(--text-muted);
370 }
371 }
372
373 // ── Callouts ──────────────────────────────────────────────────────────────────
374
375 .devdocs-callout {
376 display: flex;
377 gap: var(--space-3);
378 padding: var(--space-4);
379 border-radius: 8px;
380 border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
381 background: color-mix(in srgb, var(--color-accent) 6%, transparent);
382 margin: var(--space-4) 0;
383 font-size: 13px;
384 color: var(--text-secondary);
385 line-height: 1.6;
386
387 &--warn {
388 border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
389 background: color-mix(in srgb, var(--color-warning) 6%, transparent);
390 }
391
392 code {
393 font-family: var(--font-mono);
394 font-size: 12px;
395 background: var(--bg-overlay);
396 border: 1px solid var(--border-default);
397 border-radius: 3px;
398 padding: 1px 5px;
399 color: var(--color-purple);
400 }
401 }
402
403 .devdocs-callout-icon {
404 flex-shrink: 0;
405 width: 16px;
406 height: 16px;
407 margin-top: 1px;
408 color: var(--color-accent);
409 .devdocs-callout--warn & { color: var(--color-warning); }
410 }
411
412 // ── Inline badges ─────────────────────────────────────────────────────────────
413
414 .devdocs-badge {
415 display: inline-block;
416 font-size: 10px;
417 font-weight: 700;
418 font-family: var(--font-mono);
419 padding: 1px 6px;
420 border-radius: 4px;
421 vertical-align: middle;
422 letter-spacing: 0.04em;
423
424 &--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); }
425 &--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); }
426 &--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); }
427 &--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); }
428 }
429
430 // ── Breadcrumb ────────────────────────────────────────────────────────────────
431
432 .devdocs-breadcrumb {
433 display: flex;
434 align-items: center;
435 gap: 6px;
436 font-size: 12px;
437 color: var(--text-muted);
438 margin-bottom: var(--space-6);
439
440 a { color: var(--color-accent-link); text-decoration: none; &:hover { text-decoration: underline; } }
441 span { color: var(--text-muted); }
442 }
443
444 // ── Phase prev/next nav ───────────────────────────────────────────────────────
445
446 .devdocs-phase-nav {
447 border-top: 1px solid var(--border-default);
448 }
449
450 .devdocs-phase-nav-btn {
451 display: flex;
452 align-items: center;
453 gap: 6px;
454 font-size: 13px;
455 font-weight: 500;
456 color: var(--text-secondary);
457 text-decoration: none;
458 padding: 6px 12px;
459 border-radius: 6px;
460 border: 1px solid var(--border-default);
461 transition: border-color 0.15s, color 0.15s;
462
463 &:hover {
464 border-color: var(--color-accent);
465 color: var(--color-accent-link);
466 text-decoration: none;
467 }
468 }
469
470 // ── Index intro divider ───────────────────────────────────────────────────────
471
472 .devdocs-index-intro {
473 border-bottom: 1px solid var(--border-default);
474 }
File History 1 commit
sha256:7d6dd8f4a89e2d1fef2d84f6e65feaff51385d382f466766b7f690a22ec18e32 fix: fall back to DB ancestry check when mpack-only fast-fo… Sonnet 4.6 patch 6 days ago