This repository has no description
change resources styles
author
damedotblog
date
(Feb 28, 2025, 12:56 AM -0500)
commit
3cda8d7e
3cda8d7ea236d4bc5c1cd65821d90e26a95b8edc
parent
96a960f9
96a960f99edbb8d1454f03fdd79ab1a0831be1c9
+52
-46
+34
-28
src/components/Resources/Resources.css
+34
-28
src/components/Resources/Resources.css
···
47
47
}
48
48
49
49
/* Feature cards */
50
-
.header-features {
51
-
margin: 0.5rem 0 1.5rem;
52
-
}
53
50
54
51
.feature-cards {
55
52
display: flex;
56
-
justify-content: center;
53
+
justify-content: space-between;
57
54
gap: 1.5rem;
58
55
flex-wrap: wrap;
59
56
}
···
63
60
align-items: center;
64
61
background-color: var(--card-border);
65
62
padding: 0.7rem 1.2rem;
66
-
border-radius: 12px;
63
+
border-radius: 8px;
67
64
transition: transform 0.2s, background-color 0.2s;
68
65
}
69
66
···
84
81
85
82
/* Search and quick actions container */
86
83
.search-filters-container {
87
-
display: flex;
88
-
justify-content: space-between;
89
84
align-items: center;
85
+
display: inline-flex;
90
86
gap: 1rem;
91
-
margin: 0.5rem 0;
87
+
justify-content: center;
88
+
margin: .5rem 0;
92
89
}
93
90
94
91
/* Improved search input */
95
92
.search-container {
96
-
flex: 1;
97
93
max-width: 400px;
98
94
position: relative;
99
95
}
···
112
108
padding: 12px 12px 12px 40px;
113
109
font-size: 1rem;
114
110
border: 2px solid var(--card-border);
115
-
border-radius: 30px;
111
+
border-radius: 8px;
116
112
background-color: var(--navbar-bg);
117
113
color: var(--text);
118
114
transition: all 0.3s ease;
···
139
135
color: var(--button-text);
140
136
padding: 10px 20px;
141
137
border: none;
142
-
border-radius: 30px;
138
+
border-radius: 8px;
143
139
font-size: 0.95rem;
144
140
font-weight: 600;
145
141
cursor: pointer;
···
165
161
align-items: flex-start;
166
162
gap: 10px;
167
163
background-color: var(--card-border);
168
-
border-left: 4px solid #ffd700;
169
164
padding: 14px 18px;
170
-
margin: 1rem 0;
171
165
border-radius: 8px;
172
166
}
173
167
···
187
181
.resources-filters {
188
182
margin: 0.5rem 0 2rem;
189
183
background-color: var(--navbar-bg);
190
-
border: 1px solid var(--card-border);
184
+
border: 2px solid var(--card-border);
191
185
padding: 1rem;
192
186
border-radius: 8px;
193
187
}
···
248
242
background-color: var(--navbar-bg);
249
243
border: 2px solid var(--card-border);
250
244
border-radius: 6px;
251
-
padding: 3px 8px;
245
+
padding: 6px 10px;
252
246
}
253
247
254
248
.star-filter-container .quality-star {
···
302
296
}
303
297
304
298
.toggle-label input[type="checkbox"] {
305
-
position: relative;
306
-
width: 38px;
307
-
height: 20px;
308
-
margin: 0;
309
-
margin-right: 8px;
310
299
appearance: none;
311
300
background-color: var(--card-border);
312
-
border-radius: 20px;
313
-
transition: background-color 0.3s;
301
+
border-radius: 8px;
314
302
cursor: pointer;
303
+
height: 20px;
304
+
margin: 0 8px 0 0;
305
+
margin-right: 8px;
306
+
position: relative;
307
+
transition: background-color .3s;
308
+
width: 38px;
309
+
scale: 1.4;
310
+
margin-right: 20px;
315
311
}
316
312
317
313
.toggle-label input[type="checkbox"]:checked {
···
323
319
position: absolute;
324
320
width: 16px;
325
321
height: 16px;
326
-
border-radius: 50%;
327
-
top: 2px;
322
+
border-radius: 5px;
323
+
top: 1px;
328
324
left: 2px;
329
325
background-color: white;
330
326
transition: transform 0.3s;
331
327
}
332
328
329
+
.dark-mode .toggle-label input[type="checkbox"]::before {
330
+
background-color: #666;
331
+
}
332
+
333
333
.toggle-label input[type="checkbox"]:checked::before {
334
-
transform: translateX(18px);
334
+
transform: translateX(14px);
335
335
}
336
336
337
337
.toggle-text {
338
-
font-size: 0.95rem;
339
-
font-weight: 500;
338
+
font-size: .95rem;
339
+
font-weight: 600;
340
+
font-family: articulat-cf;
341
+
margin-top: 3px;
340
342
}
341
343
342
344
/* ======= Content Sections ======= */
343
345
.featured-section,
344
346
.all-resources-section {
345
347
margin-bottom: 40px;
348
+
}
349
+
350
+
.all-resources-section {
351
+
margin-bottom: 4px;
346
352
}
347
353
348
354
.featured-section h2,
···
384
390
385
391
/* ======= Resource Cards ======= */
386
392
.resource-card {
387
-
border: 1px solid var(--card-border);
393
+
border: 2px solid var(--card-border);
388
394
border-radius: 8px;
389
395
overflow: hidden;
390
396
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
+18
-18
src/components/Resources/Resources.js
+18
-18
src/components/Resources/Resources.js
···
192
192
{/* Redesigned Header Section */}
193
193
<header className="resources-header">
194
194
<div className="header-main">
195
-
<h1>Bluesky Resources</h1>
195
+
<h1>Bluesky & AT Protocol Resources</h1>
196
196
<div className="header-tagline">
197
197
<p>A curated collection of tools and services for the Bluesky ecosystem</p>
198
-
</div>
199
-
</div>
200
-
201
-
<div className="header-features">
202
-
<div className="feature-cards">
203
-
<div className="feature-card">
204
-
<span className="feature-icon">🔍</span>
205
-
<span className="feature-text">Discover analytics, feeds & clients</span>
206
-
</div>
207
-
<div className="feature-card">
208
-
<span className="feature-icon">⚡</span>
209
-
<span className="feature-text">Enhance your Bluesky experience</span>
210
-
</div>
211
-
<div className="feature-card">
212
-
<span className="feature-icon">🧩</span>
213
-
<span className="feature-text">Community-built solutions</span>
214
-
</div>
215
198
</div>
216
199
</div>
217
200
···
238
221
<span className="share-icon">📤</span>
239
222
<span>Share</span>
240
223
</button>
224
+
</div>
225
+
</div>
226
+
227
+
<div className="header-features">
228
+
<div className="feature-cards">
229
+
<div className="feature-card">
230
+
<span className="feature-icon">🔍</span>
231
+
<span className="feature-text">Discover analytics, feeds & clients</span>
232
+
</div>
233
+
<div className="feature-card">
234
+
<span className="feature-icon">⚡</span>
235
+
<span className="feature-text">Enhance your Bluesky experience</span>
236
+
</div>
237
+
<div className="feature-card">
238
+
<span className="feature-icon">🧩</span>
239
+
<span className="feature-text">Community-built solutions</span>
240
+
</div>
241
241
</div>
242
242
</div>
243
243