~fmac/epocheve

d4c46933e5a647a14317b3976fe0a594f68a8e5b — Francesco Camuffo 1 year, 11 months ago 694c894
restyle
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
M assets/css/main.scss => assets/css/main.scss +5 -0
@@ 167,3 167,8 @@ pre {
  -moz-tab-size: 4;
  white-space: pre-wrap;
}

.icon {
  display: inline-block;
  width: 1em;
}

M assets/js/main.js => assets/js/main.js +4 -3
@@ 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() {

M content/_index.html => content/_index.html +13 -8
@@ 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>

M layouts/_default/index.html => layouts/_default/index.html +5 -3
@@ 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>