vole

Clone

Read only, no credentials:

https://rodent.software/git/vole.git

Write over SSH with a registered key:

git clone ssh://git@0.0.0.0:2222/vole.git

A free and open-source forge that lives in your Git repo.

Round the avatars and light them for the theme

5138159281e9940617a4ac399f8b50fa1f5f659b · Keenan Nemetz · 7d ago · parent 2a8c7fbf

Round the avatars and light them for the theme

The tiles are rounded squares now: the element's border-radius does the
clip, so DiceBear's circular mask and the document-wide id it carried are
gone. That also makes a mark about 130 bytes smaller.

The disc in the sky follows the theme. A dark theme gets the moon: pale
cream, near-white and a cool grey. A light theme keeps the sun: cream,
yellow and sunset orange. Switching theme in the account page redraws
the avatars in place, because theme.js writes data-theme on <html> and
the bundle watches that attribute; following the system is the same path
because theme.js resolves it to a concrete variant.

Rebuilt the bundle (10KB, 4KB gzipped) and rendered its real output at
20px and 52px on both themes with the rounded clip applied: the moon
reads against the darker skies and the sun still reads on the light one.

server/web/static/app.js +13

@@ -787,4 +787,17 @@ const copyText = (value, done) => {
	787	787	};
	788	788	draw(document);
	789	789	document.body.addEventListener('htmx:afterSwap', (event) => draw(event.target));
		790
		791	// The disc in the sky is the moon on a dark theme and the sun on a light one,
		792	// so a theme switch redraws the avatars in place. theme.js writes data-theme on
		793	// <html>; watching it covers the account page's picker and the system following
		794	// the operating system.
		795	let theme = document.documentElement.getAttribute('data-theme');
		796	new MutationObserver(() => {
		797	const next = document.documentElement.getAttribute('data-theme');
		798	if (next === theme) return;
		799	theme = next;
		800	document.querySelectorAll('[data-avatar]').forEach((el) => { el.innerHTML = ''; });
		801	draw(document);
		802	}).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
	790	803	})();