Alexander Shoup 4-x

Exposing the nth-variable for use in CSS

With the advent of CSS variables (custom properties) and calc functions, it would be useful to be able to access the iterator directly for computation and design.

A pure CSS approach may look something like this:

:nth-child(1) { --n: 1 }
:nth-child(2) { --n: 2 }
:nth-child(3) { --n: 3 }

	const { exec } = require('child_process')

	function runGitCommand(command, callback) {
	exec(command, (error, stdout, stderr) => {
	if (error) {
	console.error(`Error executing Git command: ${error}`)
	return
	}
	callback(stdout.trim())
	})

	let height = Math.max(
	document.body.scrollHeight,
	document.body.offsetHeight,
	document.documentElement.clientHeight,
	document.documentElement.scrollHeight,
	document.documentElement.offsetHeight
	);

	const colors = [
	{'name':'AliceBlue','hex':'#F0F8FF'},
	{'name':'AntiqueWhite','hex':'#FAEBD7'},
	{'name':'Aqua','hex':'#00FFFF'},
	{'name':'Aquamarine','hex':'#7FFFD4'},
	{'name':'Azure','hex':'#F0FFFF'},
	{'name':'Beige','hex':'#F5F5DC'},
	{'name':'Bisque','hex':'#FFE4C4'},
	{'name':'Black','hex':'#000000'},
	{'name':'BlanchedAlmond','hex':'#FFEBCD'},

	function findKids(_el, _level) {
	let level = _level + 1;
	console.log(_el.children.length);
	if (_el.children.length) {
	for (const child of _el.children) {
	child.style.setProperty('--depth', level);
	findKids(child, level);
	}
	}
	}

 function init() {
   const rootEl = document.documentElement;
   setWindowProps();
   window.addEventListener('mousemove', evt=>{
     rootEl.style.setProperty('--mouseX', evt.clientX);
     rootEl.style.setProperty('--mouseY', evt.clientY);
     rootEl.style.setProperty('--mouseXRel', Math.round(evt.clientX * 100 / window.innerWidth));
     rootEl.style.setProperty('--mouseYRel', Math.round(evt.clientY * 100 / window.innerHeight));

	/* must be of type <integer> */
	div::after {
	--variable: 0;
	counter-reset: counterName var(--variable);
	content: counter(counterName);
	}

	:not(:has(> )) {

	}