This repository has no description
tweak styles
author
damedotblog
date
(Feb 28, 2025, 2:06 AM -0500)
commit
5cdf938e
5cdf938e257dbdf37734e9df9730a33f70f810f3
parent
07fae466
07fae466fc244fcb8cfbabe76c92f98418a1b9c2
+57
-26
+47
-19
src/components/Resources/Resources.css
+47
-19
src/components/Resources/Resources.css
···
27
27
/* Header main section with title and tagline */
28
28
.header-main {
29
29
text-align: center;
30
-
margin-bottom: 0.5rem;
31
30
}
32
31
33
32
.resources-header h1 {
···
157
156
158
157
/* Enhanced disclaimer styling */
159
158
.resources-disclaimer {
160
-
display: flex;
161
159
align-items: flex-start;
160
+
border-radius: 8px;
161
+
display: flex;
162
162
gap: 10px;
163
-
background-color: var(--card-border);
164
163
padding: 14px 18px;
165
-
border-radius: 8px;
164
+
background-color: var(--background);
165
+
border: 2px solid var(--card-border);
166
+
max-width: 298.7px;
166
167
}
167
168
168
169
.disclaimer-icon {
···
179
180
180
181
/* ======= Improved Filter Bar ======= */
181
182
.resources-filters {
182
-
margin: 0.5rem 0 2rem;
183
183
background-color: var(--navbar-bg);
184
184
border: 2px solid var(--card-border);
185
-
padding: 1rem;
186
185
border-radius: 8px;
186
+
padding: 1.1em;
187
+
max-width: 480px;
188
+
align-content: center;
189
+
}
190
+
191
+
.filter-options {
192
+
margin-bottom: 5px;
187
193
}
188
194
189
195
.filter-label {
···
204
210
gap: 1.5rem;
205
211
width: 100%;
206
212
align-items: center;
213
+
justify-content: center;
207
214
}
208
215
209
216
.category-filter-dropdown,
···
355
362
.all-resources-section h2 {
356
363
font-size: 1.3rem;
357
364
margin-bottom: 16px;
358
-
color: var(--button-bg);
359
365
border-bottom: 2px solid var(--card-border);
360
366
padding-bottom: 8px;
361
367
}
362
368
363
369
/* Category section styling */
364
-
.category-section {
365
-
margin-bottom: 30px;
366
-
}
367
370
368
371
.category-header {
369
372
font-size: 1.2rem;
370
-
color: var(--button-bg);
371
-
margin: 24px 0 16px;
373
+
margin: 45px 0 16px;
372
374
padding-bottom: 6px;
373
-
border-bottom: 1px solid var(--card-border);
374
375
}
375
376
376
377
/* Featured section description */
···
388
389
gap: 20px;
389
390
}
390
391
392
+
.quick-actions .share-button {
393
+
background: var(--button-bg);
394
+
border: 2px solid var(--button-bg);
395
+
}
396
+
391
397
/* ======= Resource Cards ======= */
392
398
.resource-card {
393
399
border: 2px solid var(--card-border);
···
396
402
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
397
403
text-decoration: none;
398
404
color: inherit;
399
-
background-color: var(--navbar-bg);
405
+
background-color: var(--background);
400
406
height: 100%;
401
407
display: flex;
402
408
flex-direction: column;
···
413
419
flex-grow: 1;
414
420
display: flex;
415
421
flex-direction: column;
422
+
}
423
+
424
+
.filter-disclaimer-container {
425
+
display: flex;
426
+
gap: 20px;
427
+
align-content: center;
428
+
justify-content: space-between;
416
429
}
417
430
418
431
/* Improved resource header styling */
···
604
617
gap: 0.5rem;
605
618
}
606
619
607
-
.star-filter-container {
608
-
width: 100%;
609
-
justify-content: space-between;
610
-
}
611
-
612
620
.resources-header h1 {
613
621
font-size: 1.5rem;
614
622
}
615
623
616
624
.resources-grid {
617
625
grid-template-columns: 1fr;
626
+
}
627
+
}
628
+
629
+
/* Responsive adjustments */
630
+
@media (max-width: 710px) {
631
+
.filter-disclaimer-container {
632
+
display: flex;
633
+
gap: 20px;
634
+
align-content: center;
635
+
justify-content: center;
636
+
flex-direction: column;
637
+
}
638
+
639
+
.resources-filters {
640
+
max-width: unset;
641
+
}
642
+
643
+
.resources-disclaimer {
644
+
margin: auto;
645
+
max-width: unset;
618
646
}
619
647
}
620
648
+10
-7
src/components/Resources/Resources.js
+10
-7
src/components/Resources/Resources.js
···
223
223
</button>
224
224
</div>
225
225
</div>
226
-
227
-
<div className="resources-disclaimer">
228
-
<div className="disclaimer-icon">⚠️</div>
229
-
<p><strong>Disclaimer:</strong> These resources are third-party tools and services not affiliated with cred.blue or Bluesky.
230
-
Use them at your own risk and exercise caution when providing access to your data.</p>
231
-
</div>
232
226
</header>
233
227
234
-
{/* Improved Filter Bar */}
228
+
<div class="filter-disclaimer-container">
229
+
230
+
{/* Improved Filter Bar */}
235
231
<div className="resources-filters">
236
232
<div className="filter-options">
237
233
<div className="filter-dropdowns">
···
301
297
</div>
302
298
</div>
303
299
</div>
300
+
</div>
301
+
302
+
<div className="resources-disclaimer">
303
+
<div className="disclaimer-icon">⚠️</div>
304
+
<p><strong>Disclaimer:</strong> These resources are not affiliated with cred.blue or Bluesky. Use them at your own risk and exercise caution when providing access to your data.</p>
305
+
</div>
306
+
304
307
</div>
305
308
306
309
{/* Loading indication */}