This repository has no description
fix styles
author
damedotblog
date
(Feb 27, 2025, 2:24 PM -0500)
commit
2f835208
2f835208a1e932a95d702f97aedbfee6770deeec
parent
0d2283e4
0d2283e4d72e5b1909c60d4efcf6b4512b24c5cf
+132
-58
+1
src/components/Resources/ResourceLoader.js
+1
src/components/Resources/ResourceLoader.js
+122
-54
src/components/Resources/Resources.css
+122
-54
src/components/Resources/Resources.css
···
1
1
/* src/components/Resources/Resources.css */
2
2
3
3
.resources-page {
4
+
margin: 20px auto 20px;
4
5
max-width: 1200px;
5
-
margin: 0 auto;
6
6
padding: 20px;
7
-
font-family: sans-serif;
7
+
}
8
+
9
+
.resources-page .alt-card {
10
+
text-align: left;
11
+
background: var(--navbar-bg);
12
+
border-radius: 12px;
13
+
border: 5px solid var(--card-border);
14
+
padding: 1.7rem;
15
+
transition: background-color 0.3s ease, border-color 0.3s ease;
8
16
}
9
17
10
18
.resources-header {
11
-
display: flex;
12
-
justify-content: space-between;
13
-
align-items: center;
14
-
margin-bottom: 20px;
19
+
margin-bottom: 1.5rem;
15
20
}
16
21
17
-
.resources-title h1 {
18
-
font-size: 2rem;
19
-
margin-bottom: 8px;
20
-
color: #0066cc;
22
+
.resources-header h1 {
23
+
font-size: 1.5rem;
24
+
font-weight: bold;
25
+
margin-bottom: 0.5rem;
26
+
color: var(--button-bg);
21
27
}
22
28
23
-
.resources-title p {
24
-
font-size: 1rem;
25
-
color: #666;
29
+
.resources-page ul {
30
+
list-style: none;
31
+
text-align: center;
32
+
margin: 0px auto;
33
+
padding: 0px;
34
+
width: 100%;
35
+
opacity: 0.5;
36
+
}
37
+
38
+
.resources-description {
39
+
color: var(--text);
40
+
line-height: 1.5;
41
+
opacity: 0.8;
42
+
transition: color 0.3s ease;
43
+
margin-top: 1rem;
44
+
}
45
+
46
+
.resources-disclaimer {
47
+
background-color: var(--card-border);
48
+
border-left: 4px solid #ffd700;
49
+
padding: 12px 16px;
50
+
margin-bottom: 24px;
51
+
border-radius: 4px;
52
+
}
53
+
54
+
.resources-disclaimer p {
26
55
margin: 0;
56
+
font-size: 0.9rem;
57
+
color: var(--text);
27
58
}
28
59
29
60
.share-button-container {
30
-
margin-left: 20px;
61
+
margin-top: 1rem;
31
62
}
32
63
33
64
.share-button {
34
-
background-color: #0066cc;
35
-
color: white;
65
+
background-color: var(--button-bg);
66
+
color: var(--button-text);
36
67
padding: 10px 16px;
37
68
border: none;
38
69
border-radius: 20px;
39
70
font-size: 0.9rem;
40
71
font-weight: 600;
41
72
cursor: pointer;
42
-
display: flex;
73
+
display: inline-flex;
43
74
align-items: center;
44
75
transition: background-color 0.3s ease;
45
76
}
46
77
47
78
.share-button:hover {
48
-
background-color: #0055aa;
49
-
}
50
-
51
-
.resources-disclaimer {
52
-
background-color: #f8f9fa;
53
-
border-left: 4px solid #ffd700;
54
-
padding: 12px 16px;
55
-
margin-bottom: 24px;
56
-
border-radius: 4px;
57
-
}
58
-
59
-
.resources-disclaimer p {
60
-
margin: 0;
61
-
font-size: 0.9rem;
62
-
color: #555;
79
+
opacity: 0.8;
63
80
}
64
81
65
82
.resources-filters {
···
74
91
width: 100%;
75
92
padding: 12px 16px;
76
93
font-size: 1rem;
77
-
border: 1px solid #ddd;
94
+
border: 1px solid var(--card-border);
78
95
border-radius: 8px;
79
96
box-sizing: border-box;
97
+
background-color: var(--navbar-bg);
98
+
color: var(--text);
99
+
transition: border-color 0.3s ease;
100
+
}
101
+
102
+
.search-input:focus {
103
+
border-color: var(--button-bg);
104
+
outline: none;
80
105
}
81
106
82
107
.filter-options {
···
94
119
}
95
120
96
121
.category-filter {
97
-
background-color: #f0f0f0;
122
+
background-color: var(--card-border);
123
+
color: var(--text);
98
124
border: none;
99
125
padding: 8px 16px;
100
126
border-radius: 16px;
···
104
130
}
105
131
106
132
.category-filter:hover {
107
-
background-color: #e0e0e0;
133
+
background: var(--button-bg);
134
+
color: var(--button-text);
108
135
}
109
136
110
137
.category-filter.active {
111
-
background-color: #0066cc;
112
-
color: white;
138
+
background: var(--button-bg);
139
+
color: var(--button-text);
113
140
}
114
141
115
142
.quality-select {
116
143
padding: 8px 16px;
117
-
border: 1px solid #ddd;
144
+
border: 1px solid var(--card-border);
118
145
border-radius: 8px;
119
146
font-size: 0.9rem;
147
+
background-color: var(--navbar-bg);
148
+
color: var(--text);
120
149
}
121
150
122
151
.featured-section,
···
126
155
127
156
.featured-section h2,
128
157
.all-resources-section h2 {
129
-
font-size: 1.5rem;
158
+
font-size: 1.3rem;
130
159
margin-bottom: 16px;
131
-
color: #333;
132
-
border-bottom: 2px solid #eee;
160
+
color: var(--button-bg);
161
+
border-bottom: 2px solid var(--card-border);
133
162
padding-bottom: 8px;
134
163
}
135
164
···
140
169
}
141
170
142
171
.resource-card {
143
-
border: 1px solid #eee;
172
+
border: 1px solid var(--card-border);
144
173
border-radius: 8px;
145
174
overflow: hidden;
146
175
transition: transform 0.2s ease, box-shadow 0.2s ease;
147
176
text-decoration: none;
148
177
color: inherit;
149
-
background-color: white;
178
+
background-color: var(--navbar-bg);
150
179
height: 100%;
151
180
display: flex;
152
181
flex-direction: column;
···
155
184
.resource-card:hover {
156
185
transform: translateY(-4px);
157
186
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
187
+
background-color: var(--card-border);
158
188
}
159
189
160
190
.resource-content {
···
167
197
.resource-name {
168
198
font-size: 1.1rem;
169
199
margin: 0 0 8px 0;
170
-
color: #0066cc;
200
+
color: var(--button-bg);
171
201
}
172
202
173
203
.resource-description {
174
204
font-size: 0.9rem;
175
-
color: #555;
205
+
color: var(--text);
176
206
margin: 0 0 16px 0;
177
207
flex-grow: 1;
208
+
opacity: 0.8;
178
209
}
179
210
180
211
.resource-meta {
···
186
217
187
218
.resource-category {
188
219
font-size: 0.8rem;
189
-
background-color: #f0f0f0;
220
+
background-color: var(--card-border);
190
221
padding: 4px 8px;
191
222
border-radius: 4px;
192
-
color: #666;
223
+
color: var(--text);
193
224
}
194
225
195
226
.resource-quality {
···
206
237
}
207
238
208
239
.quality-star.empty {
209
-
color: #ddd;
240
+
color: var(--card-border);
210
241
}
211
242
212
243
.no-results {
213
244
text-align: center;
214
245
padding: 40px;
215
-
color: #666;
246
+
color: var(--text);
247
+
opacity: 0.7;
216
248
}
217
249
218
250
/* Resource Loader */
···
226
258
}
227
259
228
260
.loader-spinner {
229
-
border: 4px solid rgba(0, 0, 0, 0.1);
230
-
border-left-color: #0066cc;
261
+
border: 4px solid var(--card-border);
262
+
border-left-color: var(--button-bg);
231
263
border-radius: 50%;
232
264
width: 40px;
233
265
height: 40px;
234
266
animation: spin 1s linear infinite;
235
267
margin-bottom: 16px;
268
+
transition: border-color 0.3s ease;
269
+
}
270
+
271
+
.resource-loader p {
272
+
color: var(--text);
273
+
opacity: 0.8;
236
274
}
237
275
238
276
@keyframes spin {
···
242
280
243
281
/* Responsive adjustments */
244
282
@media (max-width: 768px) {
283
+
.resources-page {
284
+
padding: 10px;
285
+
}
286
+
287
+
.resources-page .alt-card {
288
+
padding: 1rem;
289
+
}
290
+
245
291
.resources-header {
246
292
flex-direction: column;
247
293
align-items: flex-start;
248
294
}
249
295
250
296
.share-button-container {
251
-
margin: 16px 0 0 0;
297
+
margin-top: 16px;
252
298
}
253
299
254
300
.filter-options {
···
256
302
align-items: flex-start;
257
303
}
258
304
305
+
.category-filters {
306
+
margin-bottom: 12px;
307
+
width: 100%;
308
+
justify-content: flex-start;
309
+
}
310
+
259
311
.quality-filter {
260
312
width: 100%;
261
-
margin-top: 12px;
262
313
}
263
314
264
315
.quality-select {
···
266
317
}
267
318
268
319
.resources-grid {
269
-
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
320
+
grid-template-columns: 1fr;
321
+
}
322
+
}
323
+
324
+
@media (max-width: 480px) {
325
+
.resources-page {
326
+
max-width: 100%;
327
+
}
328
+
329
+
.category-filters {
330
+
display: flex;
331
+
flex-wrap: wrap;
332
+
}
333
+
334
+
.category-filter {
335
+
margin-bottom: 8px;
336
+
width: calc(50% - 8px);
337
+
text-align: center;
270
338
}
271
339
}
+9
-4
src/components/Resources/Resources.js
+9
-4
src/components/Resources/Resources.js
···
349
349
return (
350
350
<>
351
351
<main className="resources-page">
352
+
<div className="alt-card">
352
353
<div className="resources-header">
353
-
<div className="resources-title">
354
-
<h1>Bluesky Resources</h1>
355
-
<p>A curated collection of third-party tools, services, and guides for the Bluesky ecosystem</p>
356
-
</div>
354
+
<h1>Bluesky Resources</h1>
355
+
<ul>
356
+
<li>Find tools to enhance your Bluesky experience.</li>
357
+
<li>Discover analytics, feeds, clients, and more.</li>
358
+
<li>Explore community-built solutions.</li>
359
+
</ul>
360
+
<p className="resources-description">A curated collection of third-party tools, services, and guides for the Bluesky ecosystem</p>
357
361
358
362
<div className="share-button-container">
359
363
<button
···
441
445
</div>
442
446
</>
443
447
)}
448
+
</div>
444
449
</main>
445
450
</>
446
451
);