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