gabriel / musehub public
_muse-docs.scss
143 lines 4.8 KB
Raw
sha256:ce8f568638dfcfc85e52fcc1a1679fd997badd739dc817f3104b1a886619991d fix: footer-overlap regression from the two-column scroll fix Sonnet 5 patch 14 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 display: flex;
11 flex-direction: column;
12 padding: 0;
13 }
14
15 // ── Landing index ─────────────────────────────────────────────────────────────
16
17 .devdocs-index {
18 max-width: 900px;
19 margin: 0 auto;
20 padding: var(--space-8) var(--space-6) var(--space-12);
21 }
22
23 .devdocs-index-intro {
24 display: grid;
25 grid-template-columns: 1fr auto;
26 gap: var(--space-8);
27 align-items: start;
28 margin-bottom: var(--space-10);
29 padding-bottom: var(--space-8);
30 }
31
32 .devdocs-stat-cluster {
33 display: flex;
34 flex-direction: column;
35 gap: var(--space-3);
36 flex-shrink: 0;
37 }
38
39 .devdocs-phase-grid {
40 display: grid;
41 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
42 gap: var(--space-4);
43 padding: var(--space-8) 0;
44 }
45
46 .devdocs-phase-card__tags {
47 display: flex;
48 flex-wrap: wrap;
49 gap: 4px;
50 margin-top: auto;
51 padding-top: var(--space-2);
52 }
53
54 // ── Hero section (hero variant used on some sub-pages) ─────────────────────────
55
56 .devdocs-hero {
57 padding: var(--space-10) 0 var(--space-8);
58 }
59
60 .devdocs-hero-inner {
61 max-width: 900px;
62 margin: 0 auto;
63 padding: 0 var(--space-6);
64 }
65
66 // ── Two-column docs layout (phase pages) ──────────────────────────────────────
67
68 // Bounded-height, independently-scrolling columns — not position: sticky.
69 // See _layout.scss's .layout-two-col/.layout-sidebar comment for why.
70 .devdocs-layout {
71 display: grid;
72 grid-template-columns: 220px 1fr;
73 gap: 0;
74 align-items: start;
75 min-height: 0;
76 max-width: 1100px;
77 margin: 0 auto;
78 width: 100%;
79 padding: 0 var(--space-6);
80
81 @media (max-width: 900px) {
82 grid-template-columns: 1fr;
83 }
84 }
85
86 // ── Sidebar ────────────────────────────────────────────────────────────────────
87
88 .devdocs-sidebar {
89 min-height: 0;
90 max-height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-4));
91 overflow-y: auto;
92 scrollbar-width: thin;
93 scrollbar-color: var(--border-default) transparent;
94 padding: var(--space-8) var(--space-5) var(--space-8) 0;
95
96 @media (max-width: 900px) {
97 max-height: none;
98 overflow-y: visible;
99 display: none;
100 }
101 }
102
103 .devdocs-nav-group { margin-bottom: var(--space-5); }
104
105 // ── Content area ──────────────────────────────────────────────────────────────
106
107 .devdocs-content {
108 min-width: 0;
109 min-height: 0;
110 max-height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-4));
111 padding: var(--space-8) 0 var(--space-12) var(--space-8);
112 overflow-y: auto;
113 scrollbar-width: thin;
114 scrollbar-color: var(--border-default) transparent;
115
116 @media (max-width: 900px) { max-height: none; overflow-y: visible; }
117 @media (max-width: 768px) { padding-left: 0; }
118 }
119
120 // ── Phase header ──────────────────────────────────────────────────────────────
121
122 .devdocs-phase-header {
123 margin-bottom: var(--space-8);
124 padding-bottom: var(--space-6);
125 }
126
127 // ── Section ───────────────────────────────────────────────────────────────────
128
129 .devdocs-section { margin-bottom: var(--space-12); scroll-margin-top: var(--space-8); }
130
131 .devdocs-code-block { margin: var(--space-4) 0; }
132
133 // ── Phase prev/next nav ───────────────────────────────────────────────────────
134
135 .devdocs-phase-nav {
136 display: flex;
137 justify-content: space-between;
138 align-items: center;
139 margin-top: var(--space-10);
140 padding-top: var(--space-6);
141 }
142
143 .devdocs-phase-nav-btn--next { flex-direction: row-reverse; }
File History 1 commit
sha256:ce8f568638dfcfc85e52fcc1a1679fd997badd739dc817f3104b1a886619991d fix: footer-overlap regression from the two-column scroll fix Sonnet 5 patch 14 days ago