gabriel / musehub public
_muse-docs.scss
135 lines 4.5 KB
Raw
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171 fix(layout): two-column sticky sidebar scroll across all pa… Human minor ⚠ breaking 8 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 .devdocs-layout {
69 display: grid;
70 grid-template-columns: 220px 1fr;
71 gap: 0;
72 align-items: start;
73 min-height: 0;
74 max-width: 1100px;
75 margin: 0 auto;
76 width: 100%;
77 padding: 0 var(--space-6);
78
79 @media (max-width: 900px) { grid-template-columns: 1fr; }
80 }
81
82 // ── Sidebar ────────────────────────────────────────────────────────────────────
83
84 .devdocs-sidebar {
85 position: sticky;
86 top: var(--sticky-offset, var(--header-height));
87 max-height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-4));
88 overflow-y: auto;
89 scrollbar-width: thin;
90 scrollbar-color: var(--border-default) transparent;
91 padding: var(--space-8) var(--space-5) var(--space-8) 0;
92
93 @media (max-width: 900px) {
94 position: static;
95 max-height: none;
96 overflow-y: visible;
97 display: none;
98 }
99 }
100
101 .devdocs-nav-group { margin-bottom: var(--space-5); }
102
103 // ── Content area ──────────────────────────────────────────────────────────────
104
105 .devdocs-content {
106 min-width: 0;
107 padding: var(--space-8) 0 var(--space-12) var(--space-8);
108
109 @media (max-width: 768px) { padding-left: 0; }
110 }
111
112 // ── Phase header ──────────────────────────────────────────────────────────────
113
114 .devdocs-phase-header {
115 margin-bottom: var(--space-8);
116 padding-bottom: var(--space-6);
117 }
118
119 // ── Section ───────────────────────────────────────────────────────────────────
120
121 .devdocs-section { margin-bottom: var(--space-12); scroll-margin-top: var(--space-8); }
122
123 .devdocs-code-block { margin: var(--space-4) 0; }
124
125 // ── Phase prev/next nav ───────────────────────────────────────────────────────
126
127 .devdocs-phase-nav {
128 display: flex;
129 justify-content: space-between;
130 align-items: center;
131 margin-top: var(--space-10);
132 padding-top: var(--space-6);
133 }
134
135 .devdocs-phase-nav-btn--next { flex-direction: row-reverse; }
File History 1 commit
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171 fix(layout): two-column sticky sidebar scroll across all pa… Human minor ⚠ 8 days ago