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