use custom style instead of headings

calc() doesnt work with attr(rel), so this is probably simpler

README.md

@@ -37,4 +37,3 @@ Or alternatively with `/addwidget`:
 ```
 /addwidget https://goodtimer.lubiland.de/#2020-11-24T00:00+01:00
 ```
-

index.html

@@ -9,10 +9,10 @@
 <link rel="stylesheet" type="text/css" href="main.css?1602704189">
 
 
-<span id="days">∞∞</span> Days<br>
+∞∞ Days<br>
-<span id="hours">∞∞</span> Hours<br>
+∞∞ Hours<br>
-<span id="minutes">∞∞</span> Minutes<br>
+∞∞ Minutes<br>
-<span id="seconds">∞∞</span> Seconds<br>
+∞∞ Seconds<br>
 
 
 <script src="main.js?1602704189"></script>

main.js

@@ -1,11 +1,9 @@
-const target = new Date(location.hash.substr(1));
-
 const second = 1000;
 const minute = second*60;
 const hour = minute*60;
 const day = hour*24;
 
-const update_countdown = () => {
+const countdown = (target, heading) => {
     const now = new Date();
     const diff = target - now;
 
@@ -15,15 +13,38 @@ const update_countdown = () => {
     timeleft.minutes = Math.trunc(diff%day%hour/minute);
     timeleft.seconds = Math.trunc(diff%day%hour%minute/second);
 
-    Object.keys(timeleft).forEach((unit) => {
+    const formatted = Object.keys(timeleft).map(unit => {
         // retrieve value, cast it to string and optionally pad it with a leading 0
-        const value = timeleft[unit]
+        return timeleft[unit]
         .toString()
         .padStart(2, '0');
-
-        document.getElementById(unit).innerHTML = value;
     });
+
+    if (heading === 1 || formatted.filter(timespan => timespan.substr(0, 1) == '-').length === 0) {
+        return `
+<span style="font-size:${Math.round(100 - 60 * (4 - 4 / heading) / 4)}%">
+${formatted[0]} Days<br>
+${formatted[1]} Hours<br>
+${formatted[2]} Minutes<br>
+${formatted[3]} Seconds<br>
+</span>
+`;
+    }
 };
 
-update_countdown();
+const hash_date = new Date(location.hash.substr(1));
-setInterval(update_countdown, 500);
+const update_all = () => {
+    let i = 0;
+    const curDate = new Date();
+
+    document.body.innerHTML = location
+    .hash
+    .split('#')
+    .slice(1)
+    .map(fragment => new Date(fragment))
+    .sort((a, b) => b - a)
+    .map(date => countdown(date, ++i))
+    .join('');
+}
+update_all();
+setInterval(update_all, 500);