gabriel / musehub public
_explore.scss
190 lines 4.8 KB
Raw
sha256:7d6dd8f4a89e2d1fef2d84f6e65feaff51385d382f466766b7f690a22ec18e32 fix: fall back to DB ancestry check when mpack-only fast-fo… Sonnet 4.6 patch 6 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 .browse-layout {
11 display: grid;
12 grid-template-columns: 220px 1fr;
13 align-items: start;
14 gap: 0;
15 padding-top: var(--space-3);
16
17 @media (max-width: 900px) {
18 grid-template-columns: 1fr;
19 }
20 }
21
22 .browse-layout__sidebar {
23 padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3);
24 position: sticky;
25 top: 0;
26 max-height: 100vh;
27 overflow-y: auto;
28
29 @media (max-width: 900px) { display: none; }
30 }
31
32 .browse-layout__content {
33 padding: 0 var(--space-4);
34 min-width: 0;
35 }
36
37 // ── Sidebar components ────────────────────────────────────────────────────────
38 .sidebar-section {
39 padding: var(--space-3) 0;
40 border-bottom: 1px solid var(--border-subtle);
41
42 &:last-child { border-bottom: none; }
43
44 &--header { padding-bottom: var(--space-2); }
45 }
46
47 .sidebar-section__hd {
48 display: flex;
49 align-items: center;
50 justify-content: space-between;
51 }
52
53 .sidebar-section-title {
54 display: flex;
55 align-items: center;
56 gap: 6px;
57 font-size: var(--text-xs);
58 font-weight: var(--weight-bold);
59 letter-spacing: 0.08em;
60 text-transform: uppercase;
61 color: var(--text-muted);
62 margin: 0 0 var(--space-2);
63 }
64
65 .sidebar-clear {
66 font-size: var(--text-xs);
67 color: var(--color-accent);
68 text-decoration: none;
69 opacity: 0.8;
70
71 &:hover { opacity: 1; text-decoration: underline; }
72 }
73
74 .sidebar-radio {
75 display: flex;
76 align-items: center;
77 gap: 8px;
78 font-size: 12px;
79 color: var(--text-secondary);
80 cursor: pointer;
81 padding: 3px 0;
82
83 &:hover { color: var(--text-primary); }
84
85 input[type="radio"] {
86 appearance: none;
87 -webkit-appearance: none;
88 width: 14px;
89 height: 14px;
90 border-radius: 50%;
91 border: 1.5px solid var(--border-default);
92 background: transparent;
93 flex-shrink: 0;
94 position: relative;
95 cursor: pointer;
96 transition: border-color var(--transition-fast), background var(--transition-fast);
97
98 &::after {
99 content: '';
100 position: absolute;
101 inset: 3px;
102 border-radius: 50%;
103 background: transparent;
104 transition: background var(--transition-fast);
105 }
106
107 &:checked {
108 border-color: var(--color-accent);
109 &::after { background: var(--color-accent); }
110 }
111
112 &:hover { border-color: var(--color-accent); }
113 }
114 }
115
116 .sidebar-links {
117 display: flex;
118 flex-direction: column;
119 gap: 2px;
120 margin-top: var(--space-2);
121 }
122
123 .sidebar-link {
124 display: flex;
125 align-items: center;
126 gap: 6px;
127 font-size: 12px;
128 color: var(--text-secondary);
129 text-decoration: none;
130 padding: 3px 0;
131 transition: color var(--transition-fast);
132
133 svg { opacity: 0.5; flex-shrink: 0; }
134
135 &:hover { color: var(--color-accent); svg { opacity: 1; } }
136 }
137
138 .chip-group {
139 display: flex;
140 gap: 5px;
141 flex-wrap: wrap;
142 margin-top: var(--space-2);
143 }
144
145 .sidebar-empty {
146 font-size: 12px;
147 color: var(--text-muted);
148 margin: var(--space-2) 0 0;
149 font-style: italic;
150 }
151
152 .sidebar-select {
153 width: 100%;
154 padding: 6px var(--space-3);
155 border-radius: var(--radius-sm);
156 background: var(--bg-overlay);
157 color: var(--text-secondary);
158 border: 1px solid var(--border-default);
159 font-size: 12px;
160 cursor: pointer;
161 appearance: none;
162 -webkit-appearance: none;
163
164 &:focus { outline: none; border-color: var(--color-accent); }
165 }
166
167 // ── Grid header ───────────────────────────────────────────────────────────────
168 .grid-header {
169 display: flex;
170 align-items: center;
171 justify-content: space-between;
172 margin-bottom: var(--space-3);
173 padding: var(--space-3) 0 var(--space-2);
174 border-bottom: 1px solid var(--border-subtle);
175 }
176
177 .grid-header__title {
178 font-size: var(--text-xs);
179 font-weight: var(--weight-bold);
180 color: var(--text-secondary);
181 text-transform: uppercase;
182 letter-spacing: 0.06em;
183 margin: 0;
184 }
185
186 .grid-header__count {
187 font-size: 12px;
188 color: var(--text-muted);
189 font-family: var(--font-mono);
190 }
File History 1 commit
sha256:7d6dd8f4a89e2d1fef2d84f6e65feaff51385d382f466766b7f690a22ec18e32 fix: fall back to DB ancestry check when mpack-only fast-fo… Sonnet 4.6 patch 6 days ago