gabriel / musehub public
_layout.scss
1,403 lines 35.5 KB
Raw
sha256:34035d72cef530c1ab9d6a6f53be18d803dde705fc3157617d70352a96d0747b Merge branch 'fix/wire-push-external-parent-manifest' into dev Human 8 days ago
1 // ── Icon base ─────────────────────────────────────────────────────────────────
2 // Applied by the icon() Jinja2 global to every <svg><use> icon.
3 .icon {
4 display: inline-block;
5 vertical-align: middle;
6 flex-shrink: 0;
7 }
8
9 // Meta row icons (author, timestamp, branch) are intentionally muted.
10 .commit-meta-item .icon { opacity: .6; }
11
12 // Decorative empty-state icons use a lighter stroke weight.
13 .icon--light-stroke { stroke-width: 1.2; }
14
15 /*
16 * MuseHub Layout System
17 *
18 * Global structural layout: page container, header/nav chrome, responsive
19 * breakpoints, and utility spacing helpers.
20 *
21 * Breakpoints (mobile-first):
22 * xs < 480px — compact phones
23 * sm 480-767px — large phones / small tablets (portrait)
24 * md 768-1023px— tablets and small laptops
25 * lg 1024-1279px— laptops
26 * xl >= 1280px — desktops / wide monitors
27 *
28 * Minimum supported width: 375px (iPhone SE / most modern phones).
29 * Maximum design width: 1280px (content column; wider screens add side whitespace).
30 */
31
32 /* -------------------------------------------------------------------------
33 * Base scaling
34 *
35 * FOUC prevention is handled by setting background:#0d1117 directly on the
36 * <html> element as an inline style in base.html — no opacity tricks needed.
37 * -------------------------------------------------------------------------*/
38
39 body {
40 zoom: 1.25;
41 }
42
43 @media (max-width: 768px) {
44 body { zoom: 1; }
45 }
46
47 /* -------------------------------------------------------------------------
48 * Global navigation bar (.musehub-navbar)
49 *
50 * Replaces the plain <header> element with a structured nav bar that includes
51 * logo, search form, site links, and a mobile hamburger toggle.
52 * ------------------------------------------------------------------------- */
53
54 /* Hidden checkbox drives the CSS-only mobile collapse — no JS required. */
55 .navbar-toggle-input {
56 display: none;
57 }
58
59 .musehub-navbar {
60 background: var(--bg-surface);
61 border-bottom: 1px solid var(--border-default);
62 position: sticky;
63 top: 0;
64 z-index: var(--z-raised);
65 height: 42px;
66 }
67
68 .navbar-inner {
69 display: flex;
70 align-items: center;
71 gap: var(--space-3);
72 padding: 0 var(--space-4);
73 height: 100%;
74 width: 100%;
75 }
76
77 .navbar-logo {
78 display: inline-flex;
79 align-items: center;
80 gap: var(--space-2);
81 font-size: var(--text-base);
82 font-weight: var(--weight-semibold);
83 color: var(--text-primary);
84 white-space: nowrap;
85 text-decoration: none;
86 flex-shrink: 0;
87 letter-spacing: -0.01em;
88 }
89
90 .navbar-logo:hover {
91 text-decoration: none;
92 color: var(--text-primary);
93 opacity: 0.85;
94
95 .gradient-text {
96 opacity: 1; /* gradient handles its own visual feedback via parent opacity */
97 }
98 }
99
100 .navbar-logo-icon {
101 color: var(--color-accent);
102 flex-shrink: 0;
103 }
104
105 .navbar-logo-text {
106 font-family: var(--font-mono);
107 font-weight: var(--weight-bold);
108 font-size: 16px;
109 }
110
111 /* Search form */
112 .navbar-search-form {
113 display: flex;
114 align-items: center;
115 gap: var(--space-2);
116 flex: 1;
117 max-width: 400px;
118 background: var(--bg-base);
119 border: 1px solid var(--border-default);
120 border-radius: var(--radius-base);
121 padding: 0 var(--space-3);
122 transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
123
124 /* Override the global input[type="search"] rule which has higher specificity
125 (0-1-1) than .navbar-search-input (0-1-0) and would otherwise show its
126 own border, padding, and width as an inner stroke. */
127 input[type="search"],
128 .navbar-search-input {
129 flex: 1;
130 background: transparent;
131 border: none;
132 border-radius: 0;
133 outline: none;
134 box-shadow: none;
135 padding: 6px 0;
136 font-size: var(--text-sm);
137 font-family: var(--font-sans);
138 color: var(--text-primary);
139 min-width: 0;
140 width: auto;
141 }
142
143 input[type="search"]::placeholder,
144 .navbar-search-input::placeholder {
145 color: var(--text-muted);
146 }
147 }
148
149 .navbar-search-form:focus-within {
150 border-color: var(--color-accent);
151 box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
152 }
153
154 .navbar-search-icon {
155 color: var(--text-muted);
156 flex-shrink: 0;
157 }
158
159 /* Action links */
160 .navbar-actions {
161 display: flex;
162 align-items: center;
163 gap: var(--space-2);
164 flex-shrink: 0;
165 margin-left: auto;
166 }
167
168 .navbar-link {
169 font-size: var(--text-sm);
170 color: var(--text-secondary);
171 text-decoration: none;
172 white-space: nowrap;
173 padding: var(--space-1) var(--space-2);
174 border-radius: var(--radius-sm);
175 transition: background var(--transition-fast), color var(--transition-fast);
176 }
177
178 .navbar-link:hover {
179 background: var(--bg-hover);
180 color: var(--text-primary);
181 text-decoration: none;
182 }
183
184 /* Icon-only nav button (bell, etc.) */
185 .navbar-icon-btn {
186 position: relative;
187 display: inline-flex;
188 align-items: center;
189 justify-content: center;
190 width: 32px;
191 height: 32px;
192 padding: 0;
193 border-radius: var(--radius-base);
194 color: var(--text-muted);
195 text-decoration: none;
196 transition: background var(--transition-fast), color var(--transition-fast);
197 }
198
199 .navbar-icon-btn:hover {
200 background: var(--bg-hover);
201 color: var(--text-primary);
202 text-decoration: none;
203 }
204
205 .nav-notif-badge {
206 position: absolute;
207 top: 2px;
208 right: 2px;
209 background: var(--color-danger);
210 color: #fff;
211 border-radius: var(--radius-full);
212 font-size: 9px;
213 font-weight: var(--weight-bold);
214 min-width: 14px;
215 height: 14px;
216 display: none;
217 align-items: center;
218 justify-content: center;
219 padding: 0 3px;
220 line-height: 1;
221 pointer-events: none;
222 }
223
224 .navbar-signout {
225 flex-shrink: 0;
226 }
227
228 /* Theme toggle — swap sun/moon icon based on [data-theme] on <html> */
229 .navbar-theme-btn {
230 border: none;
231 background: none;
232 cursor: pointer;
233 }
234
235 .navbar-theme-icon { display: none; }
236
237 /* Dark mode (default): show sun so user can switch to light */
238 .navbar-theme-icon--sun { display: block; }
239
240 /* Light mode: show moon so user can switch back to dark */
241 [data-theme="light"] .navbar-theme-icon--sun { display: none; }
242 [data-theme="light"] .navbar-theme-icon--moon { display: block; }
243
244 /* Hamburger button (hidden on desktop) */
245 .navbar-hamburger {
246 display: none;
247 flex-direction: column;
248 gap: 5px;
249 background: none;
250 border: none;
251 cursor: pointer;
252 padding: var(--space-2);
253 border-radius: var(--radius-sm);
254 flex-shrink: 0;
255 }
256
257 .navbar-hamburger span {
258 display: block;
259 width: 20px;
260 height: 2px;
261 background: var(--text-secondary);
262 border-radius: 1px;
263 transition: background var(--transition-fast);
264 }
265
266 .navbar-hamburger:hover span {
267 background: var(--text-primary);
268 }
269
270 /* Breadcrumb bar below navbar */
271 .breadcrumb-bar {
272 background: var(--bg-surface);
273 border-bottom: 1px solid var(--border-subtle);
274 padding: 4px var(--space-4);
275 display: flex;
276 align-items: center;
277 gap: var(--space-2);
278 min-height: 0;
279 }
280
281 .breadcrumb-bar:empty,
282 .breadcrumb-bar .breadcrumb:empty + * {
283 display: none;
284 }
285
286 .breadcrumb-bar .breadcrumb {
287 color: var(--text-muted);
288 font-size: var(--text-sm);
289 overflow: hidden;
290 text-overflow: ellipsis;
291 white-space: nowrap;
292 }
293
294 .breadcrumb-bar .breadcrumb a,
295 .breadcrumb-link {
296 color: var(--color-accent);
297 text-decoration: none;
298 }
299
300 .breadcrumb-bar .breadcrumb a:hover,
301 .breadcrumb-link:hover {
302 text-decoration: none;
303 }
304
305 .breadcrumb-sep {
306 color: var(--text-muted);
307 padding: 0 var(--space-1);
308 }
309
310 .breadcrumb-current {
311 color: var(--text-muted);
312 font-size: var(--text-sm);
313 }
314
315 /* breadcrumb_data nav rendered by breadcrumbs.html */
316 .breadcrumb-data-nav {
317 display: inline-flex;
318 align-items: center;
319 flex-wrap: wrap;
320 gap: 0;
321 font-size: var(--text-sm);
322 color: var(--text-muted);
323 }
324
325 /* -------------------------------------------------------------------------
326 * Page header / navigation bar (legacy — kept for embed and non-base pages)
327 * ------------------------------------------------------------------------- */
328 header {
329 background: var(--bg-surface);
330 border-bottom: 1px solid var(--border-default);
331 padding: var(--space-3) var(--space-6);
332 display: flex;
333 align-items: center;
334 gap: var(--space-4);
335 position: sticky;
336 top: 0;
337 z-index: var(--z-raised);
338 }
339
340 header .logo {
341 font-size: var(--text-lg);
342 font-weight: var(--weight-bold);
343 color: var(--text-primary);
344 white-space: nowrap;
345 }
346
347 header .breadcrumb {
348 color: var(--text-muted);
349 font-size: var(--text-base);
350 overflow: hidden;
351 text-overflow: ellipsis;
352 white-space: nowrap;
353 }
354
355 header .breadcrumb a {
356 color: var(--color-accent);
357 }
358
359 header .spacer {
360 flex: 1;
361 }
362
363 header .header-actions {
364 display: flex;
365 align-items: center;
366 gap: var(--space-2);
367 flex-shrink: 0;
368 }
369
370 /* -------------------------------------------------------------------------
371 * Repo header card (shown on all repo-scoped pages)
372 * ------------------------------------------------------------------------- */
373 .repo-header {
374 background: var(--bg-surface);
375 border-bottom: 1px solid var(--border-default);
376 padding: 10px 0;
377 }
378
379 .repo-header-inner {
380 padding: 0 var(--space-4);
381 display: flex;
382 align-items: center;
383 gap: var(--space-3);
384 flex-wrap: wrap;
385 width: 100%;
386 }
387
388 .repo-header-identity {
389 display: flex;
390 align-items: center;
391 gap: var(--space-2);
392 font-size: var(--text-lg);
393 font-weight: var(--weight-semibold);
394 flex-shrink: 0;
395 }
396
397 .repo-header-owner {
398 color: var(--color-accent);
399 }
400
401 .repo-header-sep {
402 color: var(--text-muted);
403 font-weight: var(--weight-normal);
404 }
405
406 .repo-header-name {
407 color: var(--text-primary);
408 }
409
410 .repo-visibility-badge {
411 font-size: var(--text-xs);
412 border: 1px solid var(--border-default);
413 background: transparent;
414 color: var(--text-muted);
415 border-radius: var(--radius-full);
416 padding: 1px var(--space-2);
417 }
418
419 .repo-header-meta {
420 display: flex;
421 align-items: center;
422 gap: var(--space-2);
423 flex-wrap: wrap;
424 flex: 1;
425 }
426
427 .nav-meta-pill {
428 display: inline-flex;
429 align-items: center;
430 gap: var(--space-1);
431 background: var(--bg-overlay);
432 color: var(--text-muted);
433 font-family: var(--font-mono);
434 font-size: var(--text-xs);
435 padding: 2px var(--space-2);
436 border-radius: var(--radius-full);
437 border: 1px solid var(--border-subtle);
438 white-space: nowrap;
439
440 svg { flex-shrink: 0; }
441 }
442
443 .nav-meta-tags {
444 display: flex;
445 gap: var(--space-1);
446 flex-wrap: wrap;
447 }
448
449 .nav-meta-tag,
450 .nav-tag-chip {
451 background: var(--bg-overlay);
452 color: var(--color-accent);
453 font-size: var(--text-xs);
454 padding: 2px var(--space-2);
455 border-radius: var(--radius-full);
456 border: 1px solid var(--border-subtle);
457 }
458
459 .repo-visibility-public { color: var(--color-success, #3fb950); border-color: var(--color-success, #3fb950); }
460 .repo-visibility-private { color: var(--text-muted); }
461 .repo-visibility-unlisted { color: var(--color-warning); border-color: var(--color-warning); }
462
463 .repo-header-actions {
464 display: flex;
465 align-items: center;
466 gap: var(--space-2);
467 flex-shrink: 0;
468 }
469
470 /* -------------------------------------------------------------------------
471 * Repo tab strip (sticky below global header)
472 * ------------------------------------------------------------------------- */
473 :root {
474 --header-height: 42px; /* global header height — matches .musehub-navbar height */
475 --repo-tabs-height: 38px; /* repo tab strip height — sticky below global header */
476 }
477
478 /* Repo tab strip present — account for header + tabs in sticky sidebar offset. */
479 body:has(.repo-tabs) {
480 --sticky-offset: calc(var(--header-height) + var(--repo-tabs-height));
481 }
482
483 .repo-tabs {
484 background: var(--bg-surface);
485 border-bottom: 1px solid var(--border-default);
486 padding: 0;
487 overflow-x: auto;
488 scrollbar-width: none;
489 position: sticky;
490 top: var(--header-height);
491 z-index: calc(var(--z-raised) - 1);
492 /* Right-only fade for overflow scroll indicator; left is flush with content */
493 -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
494 mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
495 }
496
497 /* Inner wrapper aligns tabs with the page container */
498 .repo-tabs-inner {
499 display: flex;
500 align-items: stretch;
501 padding: 0 var(--space-4);
502 width: 100%;
503 }
504
505 .repo-tabs::-webkit-scrollbar { display: none; }
506
507 .repo-tab {
508 display: inline-flex;
509 align-items: center;
510 gap: var(--space-2);
511 padding: var(--space-2) var(--space-3);
512 font-size: var(--text-sm);
513 color: var(--text-muted);
514 border-bottom: 2px solid transparent;
515 white-space: nowrap;
516 text-decoration: none;
517 transition: color var(--transition-fast), border-color var(--transition-fast);
518 flex-shrink: 0;
519
520 svg {
521 opacity: 0.6;
522 transition: opacity var(--transition-fast);
523 }
524 }
525
526 .repo-tab:hover {
527 color: var(--text-primary);
528 text-decoration: none;
529 background: var(--bg-hover);
530
531 svg { opacity: 1; }
532 }
533
534 .repo-tab.active {
535 color: var(--text-primary);
536 border-bottom-color: var(--color-accent);
537
538 svg { opacity: 1; }
539 }
540
541 .tab-count {
542 background: var(--bg-overlay);
543 color: var(--text-muted);
544 border-radius: var(--radius-full);
545 padding: 0 var(--space-2);
546 font-size: var(--text-xs);
547 font-weight: var(--weight-medium);
548 min-width: 18px;
549 text-align: center;
550 }
551
552 .repo-tab.active .tab-count {
553 background: var(--color-accent);
554 color: white;
555 }
556
557 /* -------------------------------------------------------------------------
558 * Page container
559 * ------------------------------------------------------------------------- */
560 .container {
561 max-width: 960px;
562 margin: var(--space-6) auto;
563 padding: 0 var(--space-6);
564 }
565
566 .container-wide {
567 margin: var(--space-3) 0;
568 padding: 0 var(--space-4);
569 }
570
571 .container-narrow {
572 max-width: 720px;
573 margin: var(--space-6) auto;
574 padding: 0 var(--space-6);
575 }
576
577 /* -------------------------------------------------------------------------
578 * Shared full-bleed page layout (.ph-* = page hero/layout primitives)
579 *
580 * Used by MCP docs, Domain detail, and any future full-page layout.
581 * Pages using this system add:
582 * {% block container_extra_class %} page-container{% endblock %}
583 * to strip the default container padding, then manage their own padding
584 * internally so hero backgrounds can be truly full-bleed.
585 * ------------------------------------------------------------------------- */
586
587 /* Strips container padding so child sections can be full-bleed.
588 .container-wide.page-container wins over .container-wide by specificity. */
589 .container-wide.page-container,
590 .page-container {
591 padding: 0;
592 margin-top: 0;
593 }
594
595 /* ── Hero ─────────────────────────────────────────────────────────────────── */
596 .ph-hero {
597 position: relative;
598 border-bottom: 1px solid var(--border-subtle);
599 overflow: hidden;
600 padding: 0 var(--space-4);
601 }
602
603 .ph-hero-inner {
604 display: flex;
605 align-items: flex-start;
606 justify-content: space-between;
607 gap: var(--space-6);
608 padding: var(--space-6) 0 var(--space-4);
609
610 @media (max-width: 768px) { flex-direction: column; }
611 }
612
613 .ph-hero-eyebrow {
614 display: flex;
615 align-items: center;
616 gap: var(--space-2);
617 margin-bottom: var(--space-3);
618 flex-wrap: wrap;
619 }
620
621 .ph-hero-title {
622 font-size: clamp(24px, 3.5vw, 40px);
623 font-weight: 700;
624 line-height: 1.1;
625 letter-spacing: -0.02em;
626 margin: 0 0 var(--space-2);
627 color: var(--text-primary);
628 }
629
630 .ph-hero-sub {
631 font-size: 14px;
632 line-height: 1.6;
633 color: var(--text-secondary);
634 max-width: 520px;
635 margin-bottom: var(--space-3);
636 }
637
638 .ph-hero-actions {
639 display: flex;
640 gap: var(--space-2);
641 flex-wrap: wrap;
642 align-items: center;
643 }
644
645 /* ── Stats strip — flat separator bar ────────────────────────────────────── */
646 .ph-stats-strip {
647 display: flex;
648 background: transparent;
649 border-top: 1px solid var(--border-subtle);
650 border-bottom: 1px solid var(--border-subtle);
651 overflow-x: auto;
652 scrollbar-width: none;
653 &::-webkit-scrollbar { display: none; }
654 }
655
656 .ph-stat {
657 flex: 1;
658 min-width: 70px;
659 display: flex;
660 flex-direction: column;
661 align-items: center;
662 justify-content: center;
663 padding: 10px 12px;
664 gap: 2px;
665 text-align: center;
666 border-right: 1px solid var(--border-subtle);
667 &:last-child { border-right: none; }
668 }
669
670 .ph-stat-value {
671 font-size: 15px;
672 font-weight: 700;
673 color: var(--text-primary);
674 line-height: 1;
675 font-family: var(--font-mono);
676 }
677
678 .ph-stat-label {
679 font-size: 9px;
680 color: var(--text-muted);
681 text-transform: uppercase;
682 letter-spacing: 0.06em;
683 white-space: nowrap;
684 }
685
686 // Color modifiers for ph-stat-value — used by insights page
687 .ins-val--add { color: var(--color-success); }
688 .ins-val--del { color: var(--color-danger); }
689 .ins-val--agent { color: var(--color-purple); }
690
691 /* ── Page body: sidebar + main content ───────────────────────────────────── */
692 .ph-body {
693 display: grid;
694 grid-template-columns: 240px 1fr; // narrow content left | wide sidebar right
695 align-items: start;
696 gap: 0;
697 min-height: 0;
698
699 @media (max-width: 900px) { grid-template-columns: 1fr; }
700 }
701
702 /* ── Sidebar (right column) ───────────────────────────────────────────────── */
703 .ph-sidebar {
704 padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3);
705 border-left: 1px solid var(--border-subtle);
706 min-width: 0;
707 position: sticky;
708 top: var(--sticky-offset, var(--header-height));
709 max-height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-4));
710 overflow-y: auto;
711 scrollbar-width: thin;
712 scrollbar-color: var(--border-default) transparent;
713
714 @media (max-width: 900px) {
715 position: static;
716 max-height: none;
717 overflow-y: visible;
718 display: none;
719 }
720 }
721
722 .ph-sidebar-section {
723 padding: var(--space-4) 0;
724 border-bottom: 1px solid var(--border-subtle);
725 &:last-child { border-bottom: none; }
726 }
727
728 .ph-sidebar-heading {
729 display: flex; align-items: center; gap: 6px;
730 font-size: 10px;
731 font-weight: 700;
732 letter-spacing: 0.08em;
733 text-transform: uppercase;
734 color: var(--text-muted);
735 margin: 0 0 var(--space-2);
736 }
737
738 .ph-sidebar-link {
739 display: flex;
740 align-items: center;
741 gap: 6px;
742 padding: 3px var(--space-2);
743 border-radius: 3px;
744 font-size: 12px;
745 color: var(--text-secondary);
746 text-decoration: none;
747 transition: color 0.1s, background 0.1s;
748
749 &:hover { color: var(--text-primary); background: var(--bg-hover); text-decoration: none; }
750 &.is-active { color: var(--color-accent); }
751 }
752
753 /* ── Main content area ────────────────────────────────────────────────────── */
754 .ph-content {
755 padding: 0 var(--space-4);
756 min-width: 0;
757 }
758
759 /* ── Section: divider-based, no card box ─────────────────────────────────── */
760 .ph-section {
761 padding: var(--space-4) 0;
762 border-bottom: 1px solid var(--border-subtle);
763
764 &:last-child { border-bottom: none; }
765 }
766
767 .ph-section-title {
768 font-size: 13px;
769 font-weight: 700;
770 color: var(--text-primary);
771 margin: 0 0 var(--space-2);
772 display: flex;
773 align-items: center;
774 gap: var(--space-2);
775 }
776
777 .ph-section-desc {
778 font-size: 13px;
779 color: var(--text-muted);
780 margin: 0 0 var(--space-3);
781 line-height: 1.55;
782 }
783
784 /* ── Count badge (section title inline pill) ─────────────────────────────── */
785 .ph-count {
786 font-size: 11px;
787 font-weight: 600;
788 font-family: var(--font-mono);
789 padding: 1px 6px;
790 border-radius: var(--radius-full);
791 background: var(--bg-overlay);
792 color: var(--text-muted);
793 border: 1px solid var(--border-subtle);
794 }
795
796 /* -------------------------------------------------------------------------
797 * Two-column layout utilities (canonical — musehub#84)
798 *
799 * Deliberately NOT `position: sticky`. Sticky's "stuck" offset is computed
800 * relative to the outer document viewport, and `body { zoom: 1.25 }`
801 * (see _layout.scss:39) distorts that math inconsistently across browser
802 * engines — confirmed live in Chrome (see musehub#84 follow-up). `dvh`
803 * units are equally viewport-relative and share the same failure mode.
804 *
805 * Instead: bound the grid's own height to the viewport, and let each
806 * column scroll independently *within* that fixed box. This only depends
807 * on `height`/`overflow`/grid box model — none of which zoom distorts the
808 * way it distorts sticky positioning and viewport units. Same pattern
809 * VS Code, Slack, and Gmail use for independently-scrolling panes.
810 *
811 * .layout-two-col — grid wrapper; bounded height, clips at the boundary
812 * .layout-sidebar — independently-scrolling column
813 * Pages with their own main-column class must add `overflow-y: auto;
814 * min-height: 0;` to it directly (see repo_home's `.rh-main` for the
815 * pattern) — .layout-two-col only bounds the parent height.
816 * Modifiers preserve legacy left/right column widths.
817 * ------------------------------------------------------------------------- */
818 .layout-two-col {
819 display: grid;
820 align-items: start;
821 min-height: 0;
822 height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-4));
823 gap: var(--space-6);
824
825 @media (max-width: 900px) {
826 grid-template-columns: 1fr !important;
827 height: auto;
828 }
829 }
830
831 .layout-two-col--left { grid-template-columns: 240px 1fr; }
832 .layout-two-col--right { grid-template-columns: 1fr 240px; }
833
834 .layout-sidebar {
835 min-height: 0;
836 min-width: 0;
837 overflow-y: auto;
838 scrollbar-width: thin;
839 scrollbar-color: var(--border-default) transparent;
840
841 @media (max-width: 900px) {
842 height: auto;
843 overflow-y: visible;
844 }
845 }
846
847 /* Legacy aliases — grid presets (prefer .layout-two-col modifiers in new markup). */
848 .layout-sidebar-left {
849 display: grid;
850 grid-template-columns: 240px 1fr;
851 align-items: start;
852 min-height: 0;
853 gap: var(--space-6);
854 }
855
856 .layout-sidebar-right {
857 display: grid;
858 grid-template-columns: 1fr 240px;
859 align-items: start;
860 min-height: 0;
861 gap: var(--space-6);
862 }
863
864 /* -------------------------------------------------------------------------
865 * Section divider
866 * ------------------------------------------------------------------------- */
867 .section-title {
868 font-family: var(--font-mono);
869 font-size: var(--text-xs);
870 font-weight: var(--weight-semibold);
871 color: var(--color-accent);
872 text-transform: uppercase;
873 letter-spacing: 1.5px;
874 margin-bottom: var(--space-3);
875 padding-bottom: var(--space-2);
876 border-bottom: 1px solid var(--border-subtle);
877 }
878
879 /* -------------------------------------------------------------------------
880 * Flex utilities
881 * ------------------------------------------------------------------------- */
882 .flex { display: flex; }
883 .flex-col { display: flex; flex-direction: column; }
884 .items-center { align-items: center; }
885 .items-start { align-items: flex-start; }
886 .justify-between { justify-content: space-between; }
887 .gap-1 { gap: var(--space-1); }
888 .gap-2 { gap: var(--space-2); }
889 .gap-3 { gap: var(--space-3); }
890 .gap-4 { gap: var(--space-4); }
891 .flex-1 { flex: 1; }
892 .flex-wrap { flex-wrap: wrap; }
893 .flex-shrink-0 { flex-shrink: 0; }
894
895 /* -------------------------------------------------------------------------
896 * Spacing utilities
897 * ------------------------------------------------------------------------- */
898 .mb-2 { margin-bottom: var(--space-2); }
899 .mb-3 { margin-bottom: var(--space-3); }
900 .mb-4 { margin-bottom: var(--space-4); }
901 .mb-6 { margin-bottom: var(--space-6); }
902 .mt-2 { margin-top: var(--space-2); }
903 .mt-3 { margin-top: var(--space-3); }
904 .mt-4 { margin-top: var(--space-4); }
905
906 /* -------------------------------------------------------------------------
907 * Text utilities
908 * ------------------------------------------------------------------------- */
909 .text-muted { color: var(--text-muted); }
910 .text-primary { color: var(--text-primary); }
911 .text-accent { color: var(--color-accent); }
912 .text-danger { color: var(--color-danger); }
913 .text-success { color: var(--color-success); }
914 .text-sm { font-size: var(--text-sm); }
915 .text-xs { font-size: var(--text-xs); }
916 .text-mono { font-family: var(--font-mono); }
917 .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
918
919 /* -------------------------------------------------------------------------
920 * Repo landing page — two-column layout (GitHub-style)
921 * Main content (~68%) + sidebar (~30%), collapses to single column on mobile.
922 * ------------------------------------------------------------------------- */
923 .repo-layout {
924 display: grid;
925 grid-template-columns: minmax(0, 1fr) 296px;
926 gap: var(--space-6);
927 align-items: start;
928 margin-top: var(--space-6);
929 }
930
931 .repo-main { min-width: 0; }
932 .repo-sidebar { min-width: 0; }
933
934 @media (max-width: 1023px) {
935 .repo-layout {
936 grid-template-columns: 1fr;
937 }
938 /* On mobile, sidebar collapses above main (like GitHub mobile) */
939 .repo-sidebar { order: -1; }
940 }
941
942 /* Latest commit banner — sits flush above the commit card */
943 .latest-commit-banner {
944 background: var(--bg-overlay);
945 border: 1px solid var(--border-default);
946 border-radius: var(--radius-base) var(--radius-base) 0 0;
947 border-bottom: none;
948 padding: var(--space-3) var(--space-4);
949 display: flex;
950 align-items: center;
951 gap: var(--space-2);
952 font-size: var(--text-sm);
953 color: var(--text-secondary);
954 }
955
956 /* Small inline avatar (author initials) in commit rows and banner */
957 .commit-avatar {
958 width: 20px;
959 height: 20px;
960 border-radius: var(--radius-full);
961 display: inline-flex;
962 align-items: center;
963 justify-content: center;
964 font-size: 9px;
965 font-weight: var(--weight-bold);
966 color: #fff;
967 flex-shrink: 0;
968 vertical-align: middle;
969 }
970
971 /* ── Sidebar ── */
972
973 /* Star / Watch / Fork action strip */
974 .repo-action-strip {
975 display: flex;
976 gap: var(--space-2);
977 margin-bottom: var(--space-5);
978 }
979
980 .repo-action-btn {
981 display: flex;
982 align-items: center;
983 justify-content: center;
984 gap: 4px;
985 padding: 5px var(--space-3);
986 font-size: var(--text-sm);
987 border: 1px solid var(--border-default);
988 border-radius: var(--radius-base);
989 background: var(--bg-overlay);
990 color: var(--text-secondary);
991 cursor: pointer;
992 text-decoration: none;
993 flex: 1;
994 line-height: 1.4;
995 transition: background var(--transition-fast), color var(--transition-fast);
996 }
997
998 .repo-action-btn:hover {
999 background: var(--bg-hover);
1000 color: var(--text-primary);
1001 text-decoration: none;
1002 }
1003
1004 .repo-action-btn.active {
1005 background: var(--color-accent-muted);
1006 border-color: var(--color-accent);
1007 color: var(--text-primary);
1008 }
1009
1010 .repo-action-count {
1011 font-weight: var(--weight-semibold);
1012 color: var(--text-primary);
1013 font-size: var(--text-xs);
1014 }
1015
1016 /* Sidebar sections — each separated by a subtle rule */
1017 .sidebar-section {
1018 padding-bottom: var(--space-5);
1019 margin-bottom: var(--space-5);
1020 border-bottom: 1px solid var(--border-subtle);
1021 }
1022
1023 .sidebar-section:last-child {
1024 border-bottom: none;
1025 margin-bottom: 0;
1026 padding-bottom: 0;
1027 }
1028
1029 .sidebar-section h3 {
1030 font-size: var(--text-sm);
1031 font-weight: var(--weight-semibold);
1032 color: var(--text-primary);
1033 margin-bottom: var(--space-3);
1034 display: flex;
1035 align-items: center;
1036 gap: var(--space-2);
1037 }
1038
1039 /* About section prose */
1040 .about-description {
1041 font-size: var(--text-sm);
1042 color: var(--text-secondary);
1043 line-height: 1.6;
1044 margin-bottom: var(--space-3);
1045 }
1046
1047 .about-stat-row {
1048 display: flex;
1049 align-items: center;
1050 gap: var(--space-2);
1051 font-size: var(--text-sm);
1052 color: var(--text-secondary);
1053 padding: 3px 0;
1054 }
1055
1056 .about-stat-row strong {
1057 color: var(--text-primary);
1058 font-weight: var(--weight-semibold);
1059 }
1060
1061 /* Contributor avatar grid */
1062 .contributor-grid {
1063 display: flex;
1064 flex-wrap: wrap;
1065 gap: var(--space-1);
1066 margin-bottom: var(--space-2);
1067 }
1068
1069 .contributor-avatar {
1070 width: 32px;
1071 height: 32px;
1072 border-radius: var(--radius-full);
1073 background: var(--bg-overlay);
1074 border: 2px solid var(--border-default);
1075 display: inline-flex;
1076 align-items: center;
1077 justify-content: center;
1078 font-size: 11px;
1079 font-weight: var(--weight-bold);
1080 color: #fff;
1081 text-decoration: none;
1082 cursor: pointer;
1083 transition: border-color var(--transition-fast), transform var(--transition-fast);
1084 position: relative;
1085 flex-shrink: 0;
1086 }
1087
1088 .contributor-avatar:hover {
1089 border-color: var(--color-accent);
1090 transform: scale(1.15);
1091 text-decoration: none;
1092 z-index: 1;
1093 }
1094
1095 /* Instrument / track breakdown bar (like GitHub's language bar) */
1096 .instrument-bar {
1097 height: 8px;
1098 border-radius: var(--radius-full);
1099 overflow: hidden;
1100 display: flex;
1101 gap: 2px;
1102 margin-bottom: var(--space-3);
1103 }
1104
1105 .instrument-segment {
1106 height: 100%;
1107 transition: opacity var(--transition-fast);
1108 }
1109
1110 .instrument-segment:hover { opacity: 0.7; }
1111
1112 .instrument-legend {
1113 display: flex;
1114 flex-wrap: wrap;
1115 gap: var(--space-1) var(--space-4);
1116 }
1117
1118 .instrument-legend-item {
1119 display: flex;
1120 align-items: center;
1121 gap: var(--space-1);
1122 font-size: var(--text-xs);
1123 color: var(--text-secondary);
1124 }
1125
1126 .instrument-dot {
1127 width: 10px;
1128 height: 10px;
1129 border-radius: 50%;
1130 flex-shrink: 0;
1131 }
1132
1133 /* -------------------------------------------------------------------------
1134 * Responsive breakpoints — mobile-first overrides
1135 * ------------------------------------------------------------------------- */
1136
1137 /* xs — phones < 480px */
1138 @media (max-width: 479px) {
1139 header {
1140 padding: var(--space-2) var(--space-3);
1141 gap: var(--space-2);
1142 }
1143
1144 header .breadcrumb {
1145 display: none;
1146 }
1147
1148 /* Mobile navbar: hamburger visible, search and actions collapse */
1149 .navbar-hamburger {
1150 display: flex;
1151 }
1152
1153 .navbar-search-form {
1154 display: none;
1155 max-width: 100%;
1156 }
1157
1158 .navbar-actions {
1159 display: none;
1160 position: absolute;
1161 top: 100%;
1162 left: 0;
1163 right: 0;
1164 background: var(--bg-surface);
1165 border-bottom: 1px solid var(--border-default);
1166 flex-direction: column;
1167 align-items: flex-start;
1168 padding: var(--space-3) var(--space-4);
1169 gap: var(--space-2);
1170 z-index: calc(var(--z-raised) + 1);
1171 }
1172
1173 /* Show when hamburger checkbox is checked */
1174 .navbar-toggle-input:checked ~ * .navbar-search-form,
1175 .navbar-toggle-input:checked + .navbar-inner .navbar-search-form {
1176 display: flex;
1177 }
1178
1179 .navbar-toggle-input:checked ~ .navbar-inner .navbar-actions {
1180 display: flex;
1181 }
1182
1183 .musehub-navbar {
1184 position: relative;
1185 }
1186
1187 .container,
1188 .container-wide,
1189 .container-narrow {
1190 padding: 0 var(--space-3);
1191 margin-top: var(--space-4);
1192 }
1193
1194 .layout-two-col,
1195 .layout-two-col--left,
1196 .layout-two-col--right,
1197 .layout-sidebar-left,
1198 .layout-sidebar-right {
1199 grid-template-columns: 1fr;
1200 }
1201
1202 .grid-2,
1203 .grid-3 {
1204 grid-template-columns: 1fr;
1205 }
1206
1207 h1 { font-size: var(--text-md); }
1208 h2 { font-size: var(--text-base); }
1209 }
1210
1211 /* sm — large phones 480-767px */
1212 @media (min-width: 480px) and (max-width: 767px) {
1213 header {
1214 padding: var(--space-2) var(--space-4);
1215 }
1216
1217 .container,
1218 .container-wide,
1219 .container-narrow {
1220 padding: 0 var(--space-4);
1221 }
1222
1223 .layout-two-col,
1224 .layout-two-col--left,
1225 .layout-two-col--right,
1226 .layout-sidebar-left,
1227 .layout-sidebar-right {
1228 grid-template-columns: 1fr;
1229 }
1230
1231 .grid-3 {
1232 grid-template-columns: 1fr 1fr;
1233 }
1234 }
1235
1236 /* md — tablets 768-1023px */
1237 @media (min-width: 768px) and (max-width: 1023px) {
1238 .container {
1239 max-width: 100%;
1240 padding: 0 var(--space-6);
1241 }
1242
1243 .layout-two-col--left,
1244 .layout-sidebar-left {
1245 grid-template-columns: 200px 1fr;
1246 }
1247
1248 .layout-two-col--right,
1249 .layout-sidebar-right {
1250 grid-template-columns: 1fr 200px;
1251 }
1252 }
1253
1254 /* lg — laptops 1024px+ */
1255 @media (min-width: 1024px) {
1256 /* Full layout — no overrides needed; base styles apply */
1257 }
1258
1259 /* xl — desktops 1280px+ */
1260 @media (min-width: 1280px) {
1261 /* No overrides needed — content is full-width at all viewport sizes */
1262 }
1263
1264 /* -------------------------------------------------------------------------
1265 * Print styles (minimal — MuseHub is primarily a screen UI)
1266 * ------------------------------------------------------------------------- */
1267 @media print {
1268 header { display: none; }
1269 .btn { display: none; }
1270 .token-form { display: none; }
1271 pre { white-space: pre-wrap; border: 1px solid var(--border-default); }
1272 }
1273
1274 /* =========================================================================
1275 * Muse protocol design language utilities
1276 * ========================================================================= */
1277
1278 /* -------------------------------------------------------------------------
1279 * Section eyebrow
1280 * Monospace uppercase label placed above section headings, identical in
1281 * style to the section labels used on cgcardona.github.io/muse/.
1282 * Usage: <p class="eyebrow">Protocol</p><h2>…</h2>
1283 * ------------------------------------------------------------------------- */
1284 .eyebrow {
1285 font-family: var(--font-mono);
1286 font-size: 11px;
1287 color: var(--color-accent);
1288 letter-spacing: 2px;
1289 text-transform: uppercase;
1290 margin-bottom: var(--space-2);
1291 font-weight: var(--weight-medium);
1292 }
1293
1294 /* -------------------------------------------------------------------------
1295 * Page sections — full-bleed horizontal bands with border separator,
1296 * mirroring the section rhythm on the Muse protocol site.
1297 * .page-section — default (--bg-base background)
1298 * .page-section-alt — elevated surface (--bg-surface background)
1299 * .page-section-hero — gradient glow overlay for landing/hero areas
1300 * ------------------------------------------------------------------------- */
1301 .page-section {
1302 padding: var(--space-12) var(--space-6);
1303 border-top: 1px solid var(--border-subtle);
1304 }
1305
1306 .page-section-alt {
1307 background: var(--bg-surface);
1308 }
1309
1310 .page-section-hero {
1311 background:
1312 var(--gradient-hero),
1313 linear-gradient(160deg, var(--bg-base) 0%, var(--bg-surface) 50%, var(--bg-base) 100%);
1314 border-bottom: 1px solid var(--border-default);
1315 }
1316
1317 /* Section lead text — descriptive subtitle beneath a section heading */
1318 .section-lead {
1319 font-size: var(--text-md);
1320 color: var(--text-muted);
1321 max-width: 620px;
1322 margin-bottom: var(--space-10);
1323 line-height: 1.7;
1324
1325 strong { color: var(--text-primary); }
1326 }
1327
1328 /* -------------------------------------------------------------------------
1329 * Accent text — solid brand blue for headings and wordmarks.
1330 * ------------------------------------------------------------------------- */
1331 .gradient-text {
1332 color: var(--color-accent);
1333 }
1334
1335 /* -------------------------------------------------------------------------
1336 * Radial glow overlay — decorative background for hero / banner cards.
1337 * Apply to a position:relative container; the pseudo-element renders the
1338 * radial gradients as a non-interactive overlay.
1339 * ------------------------------------------------------------------------- */
1340 .glow-overlay {
1341 position: relative;
1342 overflow: hidden;
1343
1344 &::before {
1345 content: '';
1346 position: absolute;
1347 inset: 0;
1348 background: var(--gradient-hero);
1349 pointer-events: none;
1350 z-index: 0;
1351 }
1352
1353 > * { position: relative; z-index: 1; }
1354 }
1355
1356 /* -------------------------------------------------------------------------
1357 * Site footer
1358 * ------------------------------------------------------------------------- */
1359
1360 .site-footer {
1361 margin-top: var(--space-12);
1362 border-top: 1px solid var(--border-subtle);
1363 background: var(--bg-base);
1364
1365 &__inner {
1366 display: flex;
1367 align-items: center;
1368 gap: var(--space-6);
1369 max-width: 1280px;
1370 margin: 0 auto;
1371 padding: var(--space-4) var(--space-6);
1372 flex-wrap: wrap;
1373 }
1374
1375 &__brand {
1376 font-size: var(--text-sm);
1377 font-weight: 700;
1378 color: var(--text-primary);
1379 letter-spacing: 0.02em;
1380 }
1381
1382 &__copy {
1383 font-size: var(--text-xs);
1384 color: var(--text-muted);
1385 flex: 1;
1386 }
1387
1388 &__legal {
1389 display: flex;
1390 gap: var(--space-4);
1391
1392 a {
1393 font-size: var(--text-xs);
1394 color: var(--text-muted);
1395 text-decoration: none;
1396 transition: color 0.15s ease;
1397
1398 &:hover {
1399 color: var(--color-accent-link);
1400 }
1401 }
1402 }
1403 }
File History 14 commits
sha256:34035d72cef530c1ab9d6a6f53be18d803dde705fc3157617d70352a96d0747b Merge branch 'fix/wire-push-external-parent-manifest' into dev Human 8 days ago
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 8 days ago
sha256:408916fc5973ba59c6e4eebaa80ebdcc801c0a63205651e25009d11548f79454 chore: bump version to 0.2.0.dev2 — nightly.2, matching muse Sonnet 4.6 patch 11 days ago
sha256:d035733f21ccff27735fddebfbbe0ed24565a32a22db8de5885402262671ecd2 chore: bump version to 0.2.0rc15 for musehub#113 fix release Sonnet 4.6 patch 14 days ago
sha256:0032d6cfa33bc3c8367436ad768e7dd0e339b4332153160247da8266cb5fa352 Merge branch 'task/version-tags-phase3-server' into dev Human 17 days ago
sha256:4669620efda9ff41c55bdefd1f7bfe1c239d468428744c84ead9957e5a003a53 merge: rescue snapshot-recovery hardening (c00aa21d) into d… Opus 4.8 minor ⚠ 29 days ago
sha256:a59da49c4611b970fc4b6ae48678ce4943261c213a07ddbd73ce9201df869b4a fix: remove false-positive proposal_comments index drop fro… Sonnet 4.6 patch 33 days ago
sha256:0a240d6dbff234f07d98a28a4a9a68db702f3f9ff9260196f24219bdb1c0b6f3 feat: render markdown mists as HTML with heading anchor links Sonnet 4.6 patch 34 days ago
sha256:24a7d47486ebc4ebd1832830580e177ec6f877b48dced8c000e198cdec4ce9d6 Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:b9ff931d147e0114a1f17060f415b89ed551c170a91ff226c70437aa5c85f9ee Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:d1122d21e73471879b460037b22c0b50fded7c423444a176f248428f75dac39c Merge 'task/fix-issue-pagination-cursor' into 'dev' — propo… Human 35 days ago
sha256:01e18975e73d2b3cd5b6db7929c895bef9aa6e0d4391dc5b2adfc548b41318dd Merge 'feat/adding-debug-logs-to-staging' into 'dev' — prop… Human 35 days ago
sha256:6b1949fc2797ca4c1936a637a4cbfec828ef56cf52398a2e74ca3c4f494e728f fix: use wire_bytes not mpack_bytes_raw in compute_object_b… Sonnet 4.6 patch 48 days ago
sha256:b99f2455dc346966d040133f5203297e6e3ef5803a93728a2c30568d0a0f7583 rename: delta_add → delta_upsert across wire format, models… Sonnet 4.6 patch 50 days ago