gabriel / musehub public
_docs.scss
118 lines 3.7 KB
Raw
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171 fix(layout): two-column sticky sidebar scroll across all pa… Human minor ⚠ breaking 8 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 .docs-layout {
14 display: grid;
15 grid-template-columns: 200px 1fr;
16 align-items: start;
17 min-height: 0;
18
19 @media (max-width: 900px) { grid-template-columns: 1fr; }
20 }
21
22 .docs-layout__sidebar {
23 position: sticky;
24 top: var(--sticky-offset, var(--header-height));
25 max-height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-4));
26 overflow-y: auto;
27 scrollbar-width: none;
28 padding: var(--space-4) var(--space-3);
29 border-right: 1px solid var(--border-subtle);
30 background: var(--bg-canvas);
31
32 &::-webkit-scrollbar { display: none; }
33
34 @media (max-width: 900px) {
35 position: static;
36 max-height: none;
37 overflow-y: visible;
38 display: none;
39 }
40 }
41
42 .docs-layout__content {
43 padding: var(--space-4) var(--space-4) var(--space-8);
44 min-width: 0;
45 }
46
47 // ── Sidebar nav ───────────────────────────────────────────────────────────────
48
49 .docs-sidebar-link {
50 display: flex;
51 align-items: center;
52 gap: 6px;
53 padding: 4px var(--space-2);
54 border-radius: 4px;
55 font-size: 12px;
56 color: var(--text-secondary);
57 text-decoration: none;
58 transition: color var(--transition-fast), background var(--transition-fast);
59
60 &:hover { color: var(--text-primary); background: var(--bg-hover); }
61
62 &::before {
63 content: '';
64 width: 6px;
65 height: 6px;
66 border-radius: 50%;
67 flex-shrink: 0;
68 }
69
70 &--read::before { background: var(--color-success); }
71 &--write::before { background: var(--color-accent); }
72 &--cli::before { background: var(--color-warning); }
73 &--elicit::before { background: var(--color-purple); }
74 &--mist::before { background: var(--domain-mist); }
75
76 &--meta {
77 font-size: 11px;
78 color: var(--text-muted);
79
80 &::before { display: none; }
81 }
82 }
83
84 // ── Sections ──────────────────────────────────────────────────────────────────
85
86 .docs-section {
87 margin-bottom: var(--space-8);
88 scroll-margin-top: calc(var(--header-height) + 48px);
89 }
90
91 .docs-section__header {
92 display: flex;
93 align-items: center;
94 gap: var(--space-2);
95 margin-bottom: var(--space-2);
96 }
97
98 .docs-section__title {
99 font-size: 18px;
100 font-weight: var(--weight-semibold);
101 margin: 0;
102 }
103
104 .docs-section__desc {
105 font-size: 13px;
106 color: var(--text-muted);
107 margin: 0 0 var(--space-3);
108 line-height: 1.6;
109 }
110
111 // ── Grids ─────────────────────────────────────────────────────────────────────
112
113 .resource-grid,
114 .prompt-grid {
115 display: grid;
116 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
117 gap: var(--space-3);
118 }
File History 1 commit
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171 fix(layout): two-column sticky sidebar scroll across all pa… Human minor ⚠ 8 days ago