---
template=post
title=Time
#published=2023-09-14 10:22pm CDT
---
[@markup off]
[@paragraphs off]

<style>
	#counter h1,
	#counter h2 {
		text-align: center;
		font-family: 'Recursive', sans-serif;
		font-variation-settings:
			"MONO" 1,
			"CASL" 0,
			"wght" 200,
			"slnt" 0,
			"CRSV" 0;
	}

	#counter {
		width: 100%;
	}

	@media (min-width: 50rem) {
		#counter-repad {
			/* body is offset */
			margin-left: calc(-1 * var(--left-pad));
		}

		#counter {
			/* it looks weird perfectly center. the div-2 helps that */
			padding-left: calc(var(--left-pad) / 2);
		}
	}

	#days {
		font-size: 5rem;
	}

	#time {
		font-size: 4rem;
	}
</style>

<!-- Dosis: https://github.com/impallari/Dosis -->

<div id="counter-repad">
	<section id="counter">
		<h1 id="days"></h1>
		<h2 id="time"><span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span></h2>
	</section>
</div>

<script>
	// don't misuse this, love.
	const BIRTH = Date.parse("2001-04-13T02:56:00-05:00");
	const SEC_DAY = 60 * 60 * 24;

	function calculate() {
		let now = Date.now();
		let lif = Math.floor((now - BIRTH) / 1000);

		let day = Math.floor(lif / SEC_DAY);
		let sub_day = lif % (60 * 60 * 24);
		let hou = Math.floor(sub_day / (60 * 60));
		let min = Math.floor((sub_day % (60 * 60)) / 60);
		let sec = sub_day % 60;

		return {
			days: day,
			hours: hou,
			minutes: min,
			seconds: sec
		}
	}

	let days_reposition = 0;
	function display() {
		let time = calculate();

		let day = document.getElementById('days');
		let hour = document.getElementById('hours');
		let minute = document.getElementById('minutes');
		let second = document.getElementById('seconds');

		day.innerText = time.days;
		hour.innerText = human(time.hours);
		minute.innerText = human(time.minutes);
		second.innerText = human(time.seconds);

		// We're using a monospace font now. Keep the code, though, but always fail the condition.
		if (false && days_reposition % 60 == 0) {
			let time_width = document.getElementById('time').clientWidth;
			let days = document.getElementById('days');

			// Perfect half looks weird? Cheat left
			let pad = (time_width - days.clientWidth) / 2.5;
			days.style.paddingLeft = `${pad}px`;
		}

		days_reposition++;
	}

	function human(n) {
		if (n < 10) {
			return '0' + n;
		} else {
			return n;
		}
	}

	setInterval(display, 1000);
	display();
</script>