tiw/index.html at main · numtel/tiw · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>transimminent.world</title>
<style>
@font-face {
  font-family: "PlaywriteDK";
  src: url(fonts/PlaywriteDKLoopet-VariableFont_wght.ttf);
}
@font-face {
  font-family: "Oswald";
  src: url(fonts/Oswald-VariableFont_wght.ttf);
}
@font-face {
  font-family: "Prompt";
  src: url(fonts/Prompt-Regular.ttf);
}
@font-face {
  font-family: "Dokdo";
  src: url(fonts/Dokdo-Regular.ttf);
}
@font-face {
  font-family: "Caveat";
  src: url(fonts/Caveat-VariableFont_wght.ttf);
}
</style>
</head>
<body style="
  background:#8da2e1;
  color:#1f1f79;
  max-width: 480px;
  margin: 2rem auto 4rem;
  text-align:center;
  text-transform:lowercase;
">
<header style="
  white-space:pre-wrap;
  font:1.3rem/1.4rem PlaywriteDK;
">
  If everyone's just exploring,
  then we're exploring other explorers

  We should be met as equals,
  regardless of the past
</header>

<p id="perspective" style="
  white-space:pre-wrap;
  background-image:
    conic-gradient(
      from 120deg at 0% 0%,
      rgba(255, 255, 255, 0.3) 0deg 15deg,
      transparent 45deg 180deg
    ),
    conic-gradient(
      from 240deg at 100% 0%,
      transparent 0deg 315deg,
      rgba(255, 255, 255, 0.3) 345deg 360deg
    )
  ;
  margin:0;
">
  <span style="font:2rem Oswald">The width of your perspective</span>
  <span style="font:2.5rem Prompt">determines how deep you can go</span>
</p>
<a href="new-ground.html" style="
  white-space:pre-wrap;
  font:2.5rem/2.8rem Dokdo;
  background-image:linear-gradient(0deg,
    #0003 0, #0000 50%, #0003 100%);
  color:#0404d9;
  display:block;
">How can we explore
new ground?</a>

<footer style="
  white-space:pre-wrap;
  font:1.3rem/1.4rem PlaywriteDK;
">
  We're all explorers in this
</footer>

<a href="https://github.com/numtel/tiw" style="
  position:absolute;
  top:calc(100% + 1rem);
  right:1rem;
  font:1.5rem/1.5rem Caveat;
  text-decoration:none;
  color:#2348b9;
">a Webpoem</a>