4 files changed, 27 insertions(+), 14 deletions(-)

M assets/css/main.scss
M assets/js/main.js
M content/_index.html
M layouts/_default/index.html

@@ 167,3 167,8 @@ pre {
   -moz-tab-size: 4;
   white-space: pre-wrap;
 }
+
+.icon {
+  display: inline-block;
+  width: 1em;
+}

@@ 5,9 5,10 @@ window.Alpine = Alpine
 Alpine.data('epochs', () => ({
   cur: 0,
   futures: [
-    { e: 1700000000, title: null },
-    { e: 1800000000, title: null },
-    { e: 2147483647, title: "2038 Epochalypse" }
+    { e: 1660000000, title: null, link: null },
+    { e: 1700000000, title: null, link: null },
+    { e: 1800000000, title: null, link: null },
+    { e: 2147483647, title: "2038 Epochalypse", link: "https://en.wikipedia.org/wiki/Year_2038_problem" }
   ],
 
   init() {

@@ 6,18 6,23 @@ title: EpochEve
   <p class="mt-2">
     Do you find special UNIX timestamps satisfying? I do.
     <br>
-    Here's how long you got to wait for their moment to come.
+    Here's how long you've got to wait for their moment to come.
   </p>
-  <div class="row row-cols-2 row-cols-lg-4 row-cols-xl-5 g-4">
+  <div class="row row-cols-1 g-2">
     <template x-for="fut in futures">
       <div class="col">
-          <div class="card">
-            <h5 x-show="fut.title" x-text="fut.title" class="card-header"></h5>
-            <h5 x-show="!fut.title" x-text="fut.e" class="card-header font-monospace"></h5>
-            <div class="card-body">
-              <span x-text="tMinusFormat(fut.e - cur)"></span>
-            </div>
+        <div class="card">
+          <h4 class="card-header">
+            <b><span x-text="fut.title ?? fut.e" :class="fut.title ? '' : 'font-monospace'"></span></b>
+            <a x-show="fut.link" :href="fut.link">
+              <span aria-hidden="true" class="icon"><svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M576 24v127.984c0 21.461-25.96 31.98-40.971 16.971l-35.707-35.709-243.523 243.523c-9.373 9.373-24.568 9.373-33.941 0l-22.627-22.627c-9.373-9.373-9.373-24.569 0-33.941L442.756 76.676l-35.703-35.705C391.982 25.9 402.656 0 424.024 0H552c13.255 0 24 10.745 24 24zM407.029 270.794l-16 16A23.999 23.999 0 0 0 384 303.765V448H64V128h264a24.003 24.003 0 0 0 16.97-7.029l16-16C376.089 89.851 365.381 64 344 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V287.764c0-21.382-25.852-32.09-40.971-16.97z"></path></svg>
+              </span>
+            </a>
+          </h4>
+          <div class="card-body">
+            <span x-text="tMinusFormat(fut.e - cur)"></span>
           </div>
+        </div>
       </div>
     </template>
   </div>

@@ 7,9 7,11 @@
       <h1>EpochEve <span x-text="cur" class="font-monospace"></span> 👀</h1>
         {{.Content}}
       </main>
+      <hr>
+      <footer>
+        <a href="https://todo.sr.ht/~fmac/EpochEve"><div class="btn btn-info">suggest epoch</div></a>
+        <a href="https://git.sr.ht/~fmac/epocheve"><div class="btn btn-info">src</div></a>
+      </footer>
     </div>
-    <footer>
-      <a href="https://git.sr.ht/~fmac/epocheve"><div class="btn btn-info"><b>goto</b> src</div></a>
-    </footer>
   </body>
 </html>