This repository has no description
0

Configure Feed

Select the types of activity you want to include in your feed.

tweak styles

+57 -26
+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
··· 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 */}