🎨 cerium.js - one stylesheet

cerium.js is the single stylesheet for nobel's visual presets. It adds one <style> to the page with quiet defaults for cards, chips, avatars and notes, all inside @layer nobel and :where(), so any rule of yours wins without !important. Presets never style themselves, so turning cerium off leaves plain, semantic HTML.

<script src="cerium.js"></script>
<style>:root { --n-accent:#c2410c; --n-radius:4px; }</style>

That themes every preset on the page through custom properties, in light and dark.

Custom properties

Set them on :root or any ancestor. Dark values apply under prefers-color-scheme: dark.

property	light	dark	used for
--n-fg	#1c1c1f	#ececf1	text
--n-bg	#fff	#17171a	card background
--n-muted	#6d6d75	#9a9aa3	NIP-05, times, copy buttons
--n-accent	#5b4fc4	#a99cff	links, verified mark, copied state
--n-line	#e2e2e7	#2e2e34	hairline borders, avatar placeholder
--n-radius	.75rem		card corners
--n-avatar	3rem		avatar size (chips use 1.4em)
--n-font	unset		font family (the page's font when unset)

Parts

Every lanthanide marks what it generates with a part attribute in its own prefix, [n??-part=name], and cerium is the one place that styles them. New lanthanides add their rules here, as :where() selectors inside the layer.

library	host	parts
praseodymium	[npr-card], [npr-chip], img[npr-avatar]	avatar, name, nip05, about, copy, plus [npr-copied] and radon's [nrn-verified]
europium	[neu-note]	author, avatar, name, time, content, link

Opting out

option	description
nce-bare on <html>	skip the stylesheet
window.nceCfg = {bare:true}	same, from script
cerium.css	the CSS text, to copy into your own stylesheet
cerium.style	the injected <style nce-style>, or null