gabriel / musehub public
_muse-docs.scss
146 lines 4.7 KB
Raw
sha256:1dd27e6d5c24550177b01b0a171e8375c07cf046b549e7683364706b6522d3bc docs(#139): mark all 11 checklist items resolved, document … Sonnet 5 12 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Page: Muse developer docs (/muse and /muse/*)
3 // File: src/scss/pages/_muse-docs.scss
4 //
5 // STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.
6 // Visual rules live in components/_devdocs.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 .devdocs {
10 flex: 1;
11 min-height: 0;
12 display: flex;
13 flex-direction: column;
14 padding: 0;
15
16 @media (max-width: 900px) { overflow: visible; }
17 }
18
19 // ── Landing index ─────────────────────────────────────────────────────────────
20
21 .devdocs-index {
22 max-width: 900px;
23 margin: 0 auto;
24 padding: var(--space-8) var(--space-6) var(--space-12);
25 }
26
27 .devdocs-index-intro {
28 display: grid;
29 grid-template-columns: 1fr auto;
30 gap: var(--space-8);
31 align-items: start;
32 margin-bottom: var(--space-10);
33 padding-bottom: var(--space-8);
34 }
35
36 .devdocs-stat-cluster {
37 display: flex;
38 flex-direction: column;
39 gap: var(--space-3);
40 flex-shrink: 0;
41 }
42
43 .devdocs-phase-grid {
44 display: grid;
45 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
46 gap: var(--space-4);
47 padding: var(--space-8) 0;
48 }
49
50 .devdocs-phase-card__tags {
51 display: flex;
52 flex-wrap: wrap;
53 gap: 4px;
54 margin-top: auto;
55 padding-top: var(--space-2);
56 }
57
58 // ── Hero section (hero variant used on some sub-pages) ─────────────────────────
59
60 .devdocs-hero {
61 padding: var(--space-10) 0 var(--space-8);
62 }
63
64 .devdocs-hero-inner {
65 max-width: 900px;
66 margin: 0 auto;
67 padding: 0 var(--space-6);
68 }
69
70 // ── Two-column docs layout (phase pages) ──────────────────────────────────────
71
72 // App-shell page (issue #139) — .devdocs-layout is `flex: 1` within
73 // whatever the body shell leaves it, not a calc()'d height. See
74 // docs/issues/two-column-app-shell-refactor.md.
75 .devdocs-layout {
76 display: grid;
77 grid-template-columns: 220px 1fr;
78 gap: 0;
79 align-items: stretch;
80 min-height: 0;
81 flex: 1;
82 max-width: 1100px;
83 margin: 0 auto;
84 width: 100%;
85 padding: 0 var(--space-6);
86
87 @media (max-width: 900px) {
88 grid-template-columns: 1fr;
89 }
90 }
91
92 // ── Sidebar ────────────────────────────────────────────────────────────────────
93
94 .devdocs-sidebar {
95 min-height: 0;
96 overflow-y: auto;
97 scrollbar-width: thin;
98 scrollbar-color: var(--border-default) transparent;
99 padding: var(--space-8) var(--space-5) var(--space-8) 0;
100
101 @media (max-width: 900px) {
102 overflow-y: visible;
103 display: none;
104 }
105 }
106
107 .devdocs-nav-group { margin-bottom: var(--space-5); }
108
109 // ── Content area ──────────────────────────────────────────────────────────────
110
111 .devdocs-content {
112 min-width: 0;
113 min-height: 0;
114 padding: var(--space-8) 0 var(--space-12) var(--space-8);
115 overflow-y: auto;
116 scrollbar-width: thin;
117 scrollbar-color: var(--border-default) transparent;
118
119 @media (max-width: 900px) { overflow-y: visible; }
120 @media (max-width: 768px) { padding-left: 0; }
121 }
122
123 // ── Phase header ──────────────────────────────────────────────────────────────
124
125 .devdocs-phase-header {
126 margin-bottom: var(--space-8);
127 padding-bottom: var(--space-6);
128 }
129
130 // ── Section ───────────────────────────────────────────────────────────────────
131
132 .devdocs-section { margin-bottom: var(--space-12); scroll-margin-top: var(--space-8); }
133
134 .devdocs-code-block { margin: var(--space-4) 0; }
135
136 // ── Phase prev/next nav ───────────────────────────────────────────────────────
137
138 .devdocs-phase-nav {
139 display: flex;
140 justify-content: space-between;
141 align-items: center;
142 margin-top: var(--space-10);
143 padding-top: var(--space-6);
144 }
145
146 .devdocs-phase-nav-btn--next { flex-direction: row-reverse; }
File History 2 commits
sha256:1dd27e6d5c24550177b01b0a171e8375c07cf046b549e7683364706b6522d3bc docs(#139): mark all 11 checklist items resolved, document … Sonnet 5 12 days ago
sha256:649011bedd713e22f7dca4c4be94bdefbf3b10950d9fc80235928d0b0b823be8 docs: track issue #139 (two-column app-shell refactor) plan… Sonnet 5 12 days ago