style: use better font for countdown

OliverBooth/Pages/Blog/Article.cshtml

@@ -80,7 +80,7 @@
         <a href="#disqus_thread" data-disqus-identifier="@post.GetDisqusIdentifier()">0 Comments</a>
     }
 </p>
-<div>
+<div class="post-tags">
     @foreach (string tag in post.Tags)
     {
         <a asp-page="Index" asp-route-tag="@tag" class="badge bg-secondary">@tag</a>

src/scss/app.scss

@@ -367,9 +367,37 @@ td.trim-p p:last-child {
   background-size: cover;
   
   p {
+    font-family: "Gabarito", sans-serif;
+    font-weight: 500;
     text-align: center;
     font-size: 3em;
     margin: 0;
     padding: 0;
+    
+    a {
+      transition: color 250ms;
+    }
+
+    a:link, a:visited, a:active {
+      color: #fff;
+    }
+
+    a:hover {
+      color: #03A9F4;
+    }
+  }
+}
+
+.post-tags a.badge {
+  transition: color 250ms, background-color 250ms;
+  
+  &:link, &:visited, &:active {
+    background-color: #2D2D2D !important;
+    color: #fff;
+  }
+
+  &:hover {
+    color: #03A9F4;
+    background-color: #1E1E1E !important;
   }
 }

src/ts/app.ts

@@ -113,6 +113,11 @@ declare const Prism: any;
         if (minutes < 0) minutes = 0;
         if (seconds < 0) seconds = 0;
         
-        countdown.innerHTML = `${days.toString().padStart(2, '0')} : ${hours.toString().padStart(2, '0')} : ${minutes.toString().padStart(2, '0')} : ${seconds.toString().padStart(2, '0')}`;
+        const blogUrl = '/blog/2024/02/19/the-american';
+        const dayStr = days.toString().padStart(2, '0');
+        const hourStr = hours.toString().padStart(2, '0');
+        const minuteStr = minutes.toString().padStart(2, '0');
+        const secondStr = seconds.toString().padStart(2, '0');
+        countdown.innerHTML = `<a href="${blogUrl}">${dayStr} : ${hourStr} : ${minuteStr} : ${secondStr}</a>`;
     }, 1000);
 })();