gabriel / musehub public
_explore.scss
204 lines 5.3 KB
Raw
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 8 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Page: Explore
3 // File: src/scss/pages/_explore.scss
4 //
5 // Structural layout only — zero colors, zero typography.
6 // All visual rules live in components/_search.scss and patterns/_surfaces.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 // ── Browse layout — filter sidebar + main grid ────────────────────────────────
10 // Bounded-height, independently-scrolling columns — not position: sticky.
11 // See _layout.scss's .layout-two-col/.layout-sidebar comment for why.
12 .browse-layout {
13 display: grid;
14 grid-template-columns: 220px 1fr;
15 align-items: start;
16 gap: 0;
17 min-height: 0;
18 height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-4));
19 padding-top: var(--space-3);
20
21 @media (max-width: 900px) {
22 grid-template-columns: 1fr;
23 height: auto;
24 }
25 }
26
27 .browse-layout__sidebar {
28 padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3);
29 min-height: 0;
30 overflow-y: auto;
31 scrollbar-width: thin;
32 scrollbar-color: var(--border-default) transparent;
33
34 @media (max-width: 900px) {
35 overflow-y: visible;
36 display: none;
37 }
38 }
39
40 .browse-layout__content {
41 padding: 0 var(--space-4);
42 min-width: 0;
43 min-height: 0;
44 overflow-y: auto;
45 scrollbar-width: thin;
46 scrollbar-color: var(--border-default) transparent;
47
48 @media (max-width: 900px) { overflow-y: visible; }
49 }
50
51 // ── Sidebar components ────────────────────────────────────────────────────────
52 .sidebar-section {
53 padding: var(--space-3) 0;
54 border-bottom: 1px solid var(--border-subtle);
55
56 &:last-child { border-bottom: none; }
57
58 &--header { padding-bottom: var(--space-2); }
59 }
60
61 .sidebar-section__hd {
62 display: flex;
63 align-items: center;
64 justify-content: space-between;
65 }
66
67 .sidebar-section-title {
68 display: flex;
69 align-items: center;
70 gap: 6px;
71 font-size: var(--text-xs);
72 font-weight: var(--weight-bold);
73 letter-spacing: 0.08em;
74 text-transform: uppercase;
75 color: var(--text-muted);
76 margin: 0 0 var(--space-2);
77 }
78
79 .sidebar-clear {
80 font-size: var(--text-xs);
81 color: var(--color-accent);
82 text-decoration: none;
83 opacity: 0.8;
84
85 &:hover { opacity: 1; text-decoration: underline; }
86 }
87
88 .sidebar-radio {
89 display: flex;
90 align-items: center;
91 gap: 8px;
92 font-size: 12px;
93 color: var(--text-secondary);
94 cursor: pointer;
95 padding: 3px 0;
96
97 &:hover { color: var(--text-primary); }
98
99 input[type="radio"] {
100 appearance: none;
101 -webkit-appearance: none;
102 width: 14px;
103 height: 14px;
104 border-radius: 50%;
105 border: 1.5px solid var(--border-default);
106 background: transparent;
107 flex-shrink: 0;
108 position: relative;
109 cursor: pointer;
110 transition: border-color var(--transition-fast), background var(--transition-fast);
111
112 &::after {
113 content: '';
114 position: absolute;
115 inset: 3px;
116 border-radius: 50%;
117 background: transparent;
118 transition: background var(--transition-fast);
119 }
120
121 &:checked {
122 border-color: var(--color-accent);
123 &::after { background: var(--color-accent); }
124 }
125
126 &:hover { border-color: var(--color-accent); }
127 }
128 }
129
130 .sidebar-links {
131 display: flex;
132 flex-direction: column;
133 gap: 2px;
134 margin-top: var(--space-2);
135 }
136
137 .sidebar-link {
138 display: flex;
139 align-items: center;
140 gap: 6px;
141 font-size: 12px;
142 color: var(--text-secondary);
143 text-decoration: none;
144 padding: 3px 0;
145 transition: color var(--transition-fast);
146
147 svg { opacity: 0.5; flex-shrink: 0; }
148
149 &:hover { color: var(--color-accent); svg { opacity: 1; } }
150 }
151
152 .chip-group {
153 display: flex;
154 gap: 5px;
155 flex-wrap: wrap;
156 margin-top: var(--space-2);
157 }
158
159 .sidebar-empty {
160 font-size: 12px;
161 color: var(--text-muted);
162 margin: var(--space-2) 0 0;
163 font-style: italic;
164 }
165
166 .sidebar-select {
167 width: 100%;
168 padding: 6px var(--space-3);
169 border-radius: var(--radius-sm);
170 background: var(--bg-overlay);
171 color: var(--text-secondary);
172 border: 1px solid var(--border-default);
173 font-size: 12px;
174 cursor: pointer;
175 appearance: none;
176 -webkit-appearance: none;
177
178 &:focus { outline: none; border-color: var(--color-accent); }
179 }
180
181 // ── Grid header ───────────────────────────────────────────────────────────────
182 .grid-header {
183 display: flex;
184 align-items: center;
185 justify-content: space-between;
186 margin-bottom: var(--space-3);
187 padding: var(--space-3) 0 var(--space-2);
188 border-bottom: 1px solid var(--border-subtle);
189 }
190
191 .grid-header__title {
192 font-size: var(--text-xs);
193 font-weight: var(--weight-bold);
194 color: var(--text-secondary);
195 text-transform: uppercase;
196 letter-spacing: 0.06em;
197 margin: 0;
198 }
199
200 .grid-header__count {
201 font-size: 12px;
202 color: var(--text-muted);
203 font-family: var(--font-mono);
204 }
File History 13 commits
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 8 days ago
sha256:408916fc5973ba59c6e4eebaa80ebdcc801c0a63205651e25009d11548f79454 chore: bump version to 0.2.0.dev2 — nightly.2, matching muse Sonnet 4.6 patch 11 days ago
sha256:d035733f21ccff27735fddebfbbe0ed24565a32a22db8de5885402262671ecd2 chore: bump version to 0.2.0rc15 for musehub#113 fix release Sonnet 4.6 patch 14 days ago
sha256:0032d6cfa33bc3c8367436ad768e7dd0e339b4332153160247da8266cb5fa352 Merge branch 'task/version-tags-phase3-server' into dev Human 17 days ago
sha256:4669620efda9ff41c55bdefd1f7bfe1c239d468428744c84ead9957e5a003a53 merge: rescue snapshot-recovery hardening (c00aa21d) into d… Opus 4.8 minor ⚠ 29 days ago
sha256:a59da49c4611b970fc4b6ae48678ce4943261c213a07ddbd73ce9201df869b4a fix: remove false-positive proposal_comments index drop fro… Sonnet 4.6 patch 34 days ago
sha256:0a240d6dbff234f07d98a28a4a9a68db702f3f9ff9260196f24219bdb1c0b6f3 feat: render markdown mists as HTML with heading anchor links Sonnet 4.6 patch 34 days ago
sha256:24a7d47486ebc4ebd1832830580e177ec6f877b48dced8c000e198cdec4ce9d6 Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:b9ff931d147e0114a1f17060f415b89ed551c170a91ff226c70437aa5c85f9ee Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:d1122d21e73471879b460037b22c0b50fded7c423444a176f248428f75dac39c Merge 'task/fix-issue-pagination-cursor' into 'dev' — propo… Human 35 days ago
sha256:01e18975e73d2b3cd5b6db7929c895bef9aa6e0d4391dc5b2adfc548b41318dd Merge 'feat/adding-debug-logs-to-staging' into 'dev' — prop… Human 36 days ago
sha256:6b1949fc2797ca4c1936a637a4cbfec828ef56cf52398a2e74ca3c4f494e728f fix: use wire_bytes not mpack_bytes_raw in compute_object_b… Sonnet 4.6 patch 48 days ago
sha256:b99f2455dc346966d040133f5203297e6e3ef5803a93728a2c30568d0a0f7583 rename: delta_add → delta_upsert across wire format, models… Sonnet 4.6 patch 50 days ago