[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

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

feat: add icons to readme md alerts (#260)

authored by

Mikołaj Misztal and committed by
GitHub
e20bc15f f5ffde38

+39
+35
app/assets/main.css
··· 317 317 background: var(--bg-subtle); 318 318 font-style: normal; 319 319 color: var(--fg-subtle); 320 + position: relative; 320 321 } 321 322 322 323 .readme-content blockquote[data-callout]::before { ··· 327 328 text-transform: uppercase; 328 329 letter-spacing: 0.05em; 329 330 margin-bottom: 0.5rem; 331 + padding-left: 1.5rem; 332 + } 333 + 334 + .readme-content blockquote[data-callout]::after { 335 + content: ''; 336 + width: 1.25rem; 337 + height: 1.25rem; 338 + position: absolute; 339 + top: 1rem; 330 340 } 331 341 332 342 .readme-content blockquote[data-callout] > p:first-child { ··· 346 356 content: 'Note'; 347 357 color: #3b82f6; 348 358 } 359 + .readme-content blockquote[data-callout='note']::after { 360 + background-color: #3b82f6; 361 + -webkit-mask: icon('i-lucide-info') no-repeat; 362 + mask: icon('i-lucide-info') no-repeat; 363 + } 349 364 350 365 /* Tip - green */ 351 366 .readme-content blockquote[data-callout='tip'] { ··· 356 371 content: 'Tip'; 357 372 color: #22c55e; 358 373 } 374 + .readme-content blockquote[data-callout='tip']::after { 375 + background-color: #22c55e; 376 + -webkit-mask: icon('i-lucide-lightbulb') no-repeat; 377 + mask: icon('i-lucide-lightbulb') no-repeat; 378 + } 359 379 360 380 /* Important - purple */ 361 381 .readme-content blockquote[data-callout='important'] { ··· 366 386 content: 'Important'; 367 387 color: var(--syntax-fn); 368 388 } 389 + .readme-content blockquote[data-callout='important']::after { 390 + background-color: var(--syntax-fn); 391 + -webkit-mask: icon('i-lucide-pin') no-repeat; 392 + mask: icon('i-lucide-pin') no-repeat; 393 + } 369 394 370 395 /* Warning - yellow/orange */ 371 396 .readme-content blockquote[data-callout='warning'] { ··· 376 401 content: 'Warning'; 377 402 color: #eab308; 378 403 } 404 + .readme-content blockquote[data-callout='warning']::after { 405 + background-color: #eab308; 406 + -webkit-mask: icon('i-lucide-triangle-alert') no-repeat; 407 + mask: icon('i-lucide-triangle-alert') no-repeat; 408 + } 379 409 380 410 /* Caution - red */ 381 411 .readme-content blockquote[data-callout='caution'] { ··· 385 415 .readme-content blockquote[data-callout='caution']::before { 386 416 content: 'Caution'; 387 417 color: #ef4444; 418 + } 419 + .readme-content blockquote[data-callout='caution']::after { 420 + background-color: #ef4444; 421 + -webkit-mask: icon('i-lucide-circle-alert') no-repeat; 422 + mask: icon('i-lucide-circle-alert') no-repeat; 388 423 } 389 424 390 425 /* Table wrapper for horizontal scroll on mobile */
+1
package.json
··· 59 59 }, 60 60 "devDependencies": { 61 61 "@iconify-json/carbon": "1.2.18", 62 + "@iconify-json/lucide": "^1.2.87", 62 63 "@iconify-json/solar": "1.2.5", 63 64 "@iconify-json/svg-spinners": "^1.2.4", 64 65 "@npm/types": "2.1.0",
+3
pnpm-lock.yaml
··· 108 108 '@iconify-json/carbon': 109 109 specifier: 1.2.18 110 110 version: 1.2.18 111 + '@iconify-json/lucide': 112 + specifier: ^1.2.87 113 + version: 1.2.87 111 114 '@iconify-json/solar': 112 115 specifier: 1.2.5 113 116 version: 1.2.5