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