forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
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
+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
+1
package.json