--- template=post title=Time #published=2023-09-14 10:22pm CDT --- [@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>