day-blocks/help.html at master · rootlis/day-blocks · 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>help</title>
    <link rel="stylesheet" type="text/css" href="/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/css/base.css">
    <link rel="stylesheet" type="text/css" href="/css/record_list.css">
    <link rel="stylesheet" type="text/css" href="/css/record.css">
    <style>
    body { padding-left: 0; padding-right: 0; }

    figure { display: flex; justify-content: center; align-items: center; }
    figure figcaption { flex-grow: 1; }
    figure img { flex-shrink: 0; }

    article.alfa { background-color: #aab; color: #eee; }
    article.alfa figure img { box-shadow: 0 0 0.125em 2em #fff; }
    article.beta { background-color: #fff; color: #333; }

    article { padding: 3em; }
    figure img { margin: 3em; }
    figure figcaption { margin: 1.5em; font-size: 2em; }

    @media screen and (max-width: 47em) {
      figure { flex-wrap: wrap; }
      figure figcaption { text-align: center; }
    }
    </style>
</head>
<body>
    <header><a href="/r/">home</a> | <a href="/u/">user list</a> | <a href="/help">help</a></header>
    <h1>help</h1>
    <section>
      <article class="beta">
        <figure>
          <img src="/img/help01.png">
          <figcaption>Each calendar shows active days in green and inactive days in white.</figcaption>
        </figure>
      </article>
      <article class="alfa">
        <figure>
          <img src="/img/help02.gif">
          <figcaption>Mouse over a calendar square to see its corresponding date.</figcaption>
        </figure>
      </article>
      <article class="beta">
        <figure>
          <img src="/img/help03.gif">
          <figcaption>Click a date on the calendar to toggle it between active and inactive.</figcaption>
        </figure>
      </article>
      <article class="alfa">
        <figure>
          <img src="/img/help04.png">
          <figcaption>Group all your calendars under a single username by setting the user field on each calendar.</figcaption>
        </figure>
      </article>
    </section>
    <footer><a href="https://github.com/mvanek/day-blocks">source on github</a></footer>
</body>
</html>