niru52-dev.github.io/index.html at main · niru52-dev/niru52-dev.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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>niru52 — Untangle</title>
<meta name="color-scheme" content="light dark">
<style>
/* Same self-contained rule as the policy page: no CDN, no web fonts, no analytics. */
:root {
  --bg: #FCFAF9; --surface: #FFFFFF; --fg: #1F2227; --fg2: #6F7278; --fg3: #93959B;
  --line: #ECE7E3; --accent: #D96D93; --mark: #E78BA6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121316; --surface: #191A1E; --fg: #F1F2F4; --fg2: #9B9EA4; --fg3: #71747A;
    --line: #292A2E; --accent: #EE9DB4; --mark: #E78BA6;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 0 20px 64px; background: var(--bg); color: var(--fg2);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 34rem; margin: 0 auto; padding-top: 88px; }
.mark {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 600; color: var(--fg); letter-spacing: .01em;
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mark); }
p.tag { color: var(--fg3); margin: 10px 0 34px; font-size: .9375rem; }
ul { list-style: none; margin: 0; padding: 0; }
li + li { border-top: 1px solid var(--line); }
a.row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; text-decoration: none; color: var(--fg); font-size: .9375rem;
}
a.row:hover { color: var(--accent); }
a.row span.arrow { color: var(--fg3); font-size: .875rem; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
}
footer { margin-top: 34px; color: var(--fg3); font-size: .8125rem; }
footer a { color: var(--fg3); }
</style>
</head>
<body>
<div class="wrap">
  <span class="mark"><span class="dot"></span>Untangle</span>
  <p class="tag">思考を、ほどく。</p>

  <div class="card">
    <ul>
      <li><a class="row" href="untangle/support/">サポート / Support <span class="arrow">→</span></a></li>
      <li><a class="row" href="untangle/privacy/">プライバシーポリシー / Privacy Policy <span class="arrow">→</span></a></li>
    </ul>
  </div>

  <footer>
    <p><a href="mailto:niru52.dev@gmail.com">niru52.dev@gmail.com</a></p>
  </footer>
</div>
</body>
</html>