gabriel / musehub public
_docs.scss
130 lines 3.9 KB
Raw
sha256:0521dce9aca20da6ab4d9ebee6de75ab876bd82cddbc6bd4897d1ac6ecd11d3d docs(musehub#129): freeze Phase 1 OG repo card design Human 14 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Page: Docs layout
3 // File: src/scss/pages/_docs.scss
4 //
5 // STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.
6 // Visual rules live in components/_mcp-docs.scss.
7 //
8 // Variants: .docs-layout .docs-layout__sidebar .docs-layout__content
9 // .docs-section .docs-section__header .docs-section__title
10 // .docs-section__desc .docs-sidebar-link .resource-grid .prompt-grid
11 // ─────────────────────────────────────────────────────────────────────────────
12
13 // App-shell page (issue #139) — .hero--agent is flex-shrink:0 above
14 // this grid; .docs-layout takes whatever's left via flex, not a
15 // calc()'d height. See docs/issues/two-column-app-shell-refactor.md.
16 .hero--agent {
17 flex-shrink: 0;
18 }
19
20 .docs-layout {
21 display: grid;
22 grid-template-columns: 200px 1fr;
23 align-items: stretch;
24 min-height: 0;
25 flex: 1;
26
27 @media (max-width: 900px) {
28 grid-template-columns: 1fr;
29 }
30 }
31
32 .docs-layout__sidebar {
33 min-height: 0;
34 overflow-y: auto;
35 scrollbar-width: none;
36 padding: var(--space-4) var(--space-3);
37 border-right: 1px solid var(--border-subtle);
38 background: var(--bg-canvas);
39
40 &::-webkit-scrollbar { display: none; }
41
42 @media (max-width: 900px) {
43 overflow-y: visible;
44 display: none;
45 }
46 }
47
48 .docs-layout__content {
49 padding: var(--space-4) var(--space-4) var(--space-8);
50 min-width: 0;
51 min-height: 0;
52 overflow-y: auto;
53 scrollbar-width: thin;
54 scrollbar-color: var(--border-default) transparent;
55
56 @media (max-width: 900px) { overflow-y: visible; }
57 }
58
59 // ── Sidebar nav ───────────────────────────────────────────────────────────────
60
61 .docs-sidebar-link {
62 display: flex;
63 align-items: center;
64 gap: 6px;
65 padding: 4px var(--space-2);
66 border-radius: 4px;
67 font-size: 12px;
68 color: var(--text-secondary);
69 text-decoration: none;
70 transition: color var(--transition-fast), background var(--transition-fast);
71
72 &:hover { color: var(--text-primary); background: var(--bg-hover); }
73
74 &::before {
75 content: '';
76 width: 6px;
77 height: 6px;
78 border-radius: 50%;
79 flex-shrink: 0;
80 }
81
82 &--read::before { background: var(--color-success); }
83 &--write::before { background: var(--color-accent); }
84 &--cli::before { background: var(--color-warning); }
85 &--elicit::before { background: var(--color-purple); }
86 &--mist::before { background: var(--domain-mist); }
87
88 &--meta {
89 font-size: 11px;
90 color: var(--text-muted);
91
92 &::before { display: none; }
93 }
94 }
95
96 // ── Sections ──────────────────────────────────────────────────────────────────
97
98 .docs-section {
99 margin-bottom: var(--space-8);
100 scroll-margin-top: calc(var(--header-height) + 48px);
101 }
102
103 .docs-section__header {
104 display: flex;
105 align-items: center;
106 gap: var(--space-2);
107 margin-bottom: var(--space-2);
108 }
109
110 .docs-section__title {
111 font-size: 18px;
112 font-weight: var(--weight-semibold);
113 margin: 0;
114 }
115
116 .docs-section__desc {
117 font-size: 13px;
118 color: var(--text-muted);
119 margin: 0 0 var(--space-3);
120 line-height: 1.6;
121 }
122
123 // ── Grids ─────────────────────────────────────────────────────────────────────
124
125 .resource-grid,
126 .prompt-grid {
127 display: grid;
128 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
129 gap: var(--space-3);
130 }
File History 1 commit
sha256:6ad6d62107bbd6940c52d63327966b8a65c6391f4a3da6cd9e7548ba4b38bc48 feat(musehub#129): OG repo preview cards — endpoint, cache,… Human minor ⚠ 14 days ago