---
Template post
Title  
---

<style>
	@font-face {
		font-family: 'Dosis';
		font-weight: 200;
		src: url('/Dosis-ExtraLight.otf');
	}

	#counter {
		margin: 96px auto;
		width: 15rem;

		font-weight: normal;
		font-family: 'Dosis', sans-serif;
	}

	#days {
		width: min-content;
		font-weight: 200;
		font-size: 5rem;
		font-family: inherit;
	}

	#time {
		width: min-content;
		font-weight: 200;
		font-size: 4rem;
		font-family: inherit;
	}

	#dates {
		display: none !important;
	}
</style>

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

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

<script>
	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);

		if (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>