iboolka.github.io/index.html at main · iboolka/iboolka.github.io · 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Notes</title>
    <style>
      :root {
        color-scheme: light;
        --bg: #f5f4ef;
        --panel: #fffdf8;
        --text: #1f2933;
        --muted: #66788a;
        --line: #d9d4c7;
        --accent: #28536b;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        min-height: 100vh;
        font-family: Georgia, "Times New Roman", serif;
        background:
          radial-gradient(circle at top, rgba(40, 83, 107, 0.08), transparent 35%),
          linear-gradient(180deg, var(--bg), #ece7da);
        color: var(--text);
      }

      main {
        width: min(760px, calc(100% - 32px));
        margin: 64px auto;
        padding: 40px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(31, 41, 51, 0.08);
      }

      h1 {
        margin: 0 0 12px;
        font-size: clamp(2.2rem, 5vw, 3.5rem);
        letter-spacing: -0.03em;
      }

      p {
        margin: 0 0 16px;
        font-size: 1.05rem;
        line-height: 1.7;
      }

      .meta {
        color: var(--muted);
        font-size: 0.95rem;
      }

      .divider {
        width: 72px;
        height: 2px;
        margin: 24px 0;
        background: var(--accent);
        opacity: 0.35;
      }
    </style>
  </head>
  <body>
    <main>
      <p class="meta">Archive</p>
      <h1>Field Notes</h1>
      <div class="divider"></div>
      <p>
        A quiet place for collected notes, short references, and working drafts.
      </p>
      <p class="meta">Updated occasionally.</p>
    </main>
  </body>
</html>