moontonight/index.html at master · jshakes/moontonight · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
---
layout: main
title: The Moon Tonight
description: Interactive, animated moon phases for tonight and the coming week
ogimage: /assets/images/moon-tonight-og-image.png
---

<main class="moon-wrapper">
  <div class="moon-container">
    <h1>The Moon Tonight</h1>

    <figure class="moon-illustration" id="js-moon" role="img" aria-labelledby="js-phase-name" aria-describedby="js-date">
      <div class="half">
        <div class="ellipse white"></div>
        <div class="ellipse black"></div>
      </div>
      <div class="half">
        <div class="ellipse white"></div>
        <div class="ellipse black"></div>
      </div>
    </figure>

    <nav class="day-info-wrapper" aria-label="Moon phase navigation">
      <button type="button" id="js-prev-day" class="day-info-prev" aria-label="Previous day">
        <span aria-hidden="true">‹</span>
      </button>

      <div class="day-info">
        <time class="day-info-date" id="js-date" datetime=""></time>
        <h2 class="day-info-phase-name" id="js-phase-name"></h2>
      </div>

      <button type="button" id="js-next-day" class="day-info-next" aria-label="Next day">
        <span aria-hidden="true">›</span>
      </button>
    </nav>
  </div>
</main>

<script src="{{ "/assets/js/app.js" | prepend: site.baseurl }}"></script>