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