-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
220 lines (220 loc) · 10 KB
/
index.html
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Hypertext 2020</title>
<link rel="stylesheet" href="ht2020.css?19">
<script src="https://cdn.jsdelivr.net/npm/umbrellajs"></script>
<script language="JavaScript">
var pageX = 0, pageY = 0
document.onmousemove = function (event) {
pageX = event.pageX
pageY = event.pageY
}
function expand(ele) {
u(ele.parentNode).toggleClass('show')
u('div.thread', ele.parentNode).scroll()
}
function tw(ele, name) {
let page = u('#twid-' + name)
page.toggleClass('show').
attr('style', 'top: ' + (pageY + 20) + 'px; left: ' + pageX + 'px')
}
function twc(ele) {
u(ele.parentNode).toggleClass('show')
}
function fn(ele, cls) {
u(ele.nextElementSibling).toggleClass(cls)
}
function linkback(id) {
u('#lbid-' + id).scroll()
}
function mainup() {
u('main').addClass('appear')
u('div.front').addClass('blow')
}
</script>
</head>
<body>
<header><div></div></header>
<div class="front">
<div class="logo"><img src="images/ht2021.png"></div>
<div class="thumb"><a href="javascript:;" onclick="mainup()"><img src="images/ht2021-thumb.png"></a></div>
</div>
<main>
<div class="box box_purple_screen by-weiweihsu-com">
<div class="box-shadow"><div></div></div>
<div class="box-highlight"><div></div></div>
<div class="box-fill"><div></div></div>
<div class="box-content">
<div class="title">
<div class="title-shadow"><div></div></div>
<div class="title-highlight"><div></div></div>
<div class="title-fill"><div></div></div>
<div class="title-content title-block">
<h3 class="content"><img src="images/weiwei.png"> glitchyowl ·:·.*
</h1>
</div>
</div>
<!-- The frame contents (text or comic log) -->
<div class="box-block hypertext">
<p>
The Web has converged on a color called 'gwalb' - gray with a little blue. Drained of all of its color, people become small circles with unstyled text next to them. Far from the World Wide Web we used to know! Over here, you can have your own walk-in closet of jackets for your voice. Depends on the dress code, you can get fancy for the party, or if you are feeling a little homesick, then put on the fuzzy PJs and tuck in.
</p><p>
Before the beginning, we made a wish for a more expressive web.
This is the tale of purple desert designs, silent HTML streams, MacPaint toolbars, Mario Kart-inspired JavaScript and our household gaudy drop shadows. This is Multiverse –– a constellation of internet corners, a micro-blogging network that belongs to us
</p><div class="convo">
<a href="javascript:;" onclick="expand(this)" class="expand"></a>
<div class="thread" style="z-index: 1">
<div class="box box_purple_screen by-weiweihsu-com">
<div class="box-shadow"><div></div></div>
<div class="box-highlight"><div></div></div>
<div class="box-fill"><div></div></div>
<div class="box-content">
<div class="title">
<div class="title-shadow"><div></div></div>
<div class="title-highlight"><div></div></div>
<div class="title-fill"><div></div></div>
<div class="title-content title-block">
<h3 class="content"><img src="images/weiwei.png"> glitchyowl ·:·.*
</h1>
</div>
</div>
<!-- The frame contents (text or comic log) -->
<div class="box-block hypertext">
<p>
Side note: you can also step aside to get on a slight tangent, nerd out on a rabbit hole, then go back to the original conversation. Whether it's a group conversation or a monologue, express them in hypertext and with multi-media (down the line) - and when
you’re done, this becomes a hyperlinked blog post of some sort, with a beginning, an ending, and a title maybe - could be
interesting. Ahh, I’m explaining too much - it is just an attempt to branch off
on the <a class="tc-tiddlylink" href="javascript:;" onclick="tw(this, 'hyperconversation')">hyperconversation</a> game.
</p>
</div>
</div>
</div><div class="box box_purple_screen by-kickscondor-com">
<div class="box-shadow"><div></div></div>
<div class="box-highlight"><div></div></div>
<div class="box-fill"><div></div></div>
<div class="box-content">
<div class="title">
<div class="title-shadow"><div></div></div>
<div class="title-highlight"><div></div></div>
<div class="title-fill"><div></div></div>
<div class="title-content title-block">
<h3 class="content"><img src="images/chair.png"> kickscondor
</h1>
</div>
</div>
<!-- The frame contents (text or comic log) -->
<div class="box-block hypertext">
<p>
There are quite a few subtle things we are experimenting with. I know, I know, we've still got a long way to go, but that's the fun part. How cool is it that we get to mix in our personalities and have networked conversations.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div class="box box_purple_screen by-kickscondor-com">
<div class="box-shadow"><div></div></div>
<div class="box-highlight"><div></div></div>
<div class="box-fill"><div></div></div>
<div class="box-content">
<div class="title">
<div class="title-shadow"><div></div></div>
<div class="title-highlight"><div></div></div>
<div class="title-fill"><div></div></div>
<div class="title-content title-block">
<h3 class="content"><img src="images/chair.png"> kickscondor
</h1>
</div>
</div>
<!-- The frame contents (text or comic log) -->
<div class="box-block hypertext">
<p>
Semi-translucent, fogged-up styles - achieved by dropping a light-colored shadow with a rather heavy blur on it - but leaving the box layer above the shadow almost clear - but with a subtle gradient to it. It’s like having a toolbox like Microsoft Paint as you create a corner for yourself on the internet. You can color your voice with your personality, rather than having it flattened out by technology giants. This is the kind of remixes that get us energised.
</p><p>
Sort of like a zine, a collage, a bunch of glued tweets and essays - how do I describe it? This is something in-between, It’s a place that celebrates different kinds of media, so, give us a few moon cycles, and let’s play with all these web materials together!
</p>
</div>
</div>
</div><div class="box box_purple_screen by-weiweihsu-com">
<div class="box-shadow"><div></div></div>
<div class="box-highlight"><div></div></div>
<div class="box-fill"><div></div></div>
<div class="box-content">
<div class="title">
<div class="title-shadow"><div></div></div>
<div class="title-highlight"><div></div></div>
<div class="title-fill"><div></div></div>
<div class="title-content title-block">
<h3 class="content"><img src="images/weiwei.png"> glitchyowl ·:·.*
</h1>
</div>
</div>
<!-- The frame contents (text or comic log) -->
<div class="box-block hypertext">
<p>
Whether it’s <a class="tc-tiddlylink-external" href="http://weiweihsu.com/2020-07-26/wheres-home" target="_blank">photo journaling</a>, documenting your project, sharing a mini life update, or something we haven’t thought of, it’s a place for you to weave together words, ideas, and feelings. Above and beyond all of these, it is perhaps a place for us to grow confidence in our voice and discover the willingness to and the wonder of carrying that voice out into the world.
</p><p>
Or, if you are feeling a little social, you can also blog chat with each other ~ Think of blogchatting as an activity like dancing, playing music, playing with basketball – it’s enjoyable and rewarding on your own, but enhanced by the companion of others.
</p>
</div>
</div>
</div><div id="twid-T42T" class="wikipage">
<a class="close" href="javascript:;" onclick="twc(this)">x</a>
<div class="hypertext">
<p>
t42t := <strong>t</strong>it <strong>for two t</strong>ats
</p><p>
See <a class="tc-tiddlylink-external" href="https://philosopher.life/#T42T" target="_blank">here</a>.
</p>
</div>
</div><div id="twid-hyperconversation" class="wikipage">
<a class="close" href="javascript:;" onclick="twc(this)">x</a>
<div class="hypertext">
<p>
hyperconversation := a conversation integratively built upon explicit referential linking to at least one hyperobject
</p><p>
See <a class="tc-tiddlylink-external" href="https://philosopher.life/#hyperconversation" target="_blank">here</a>.
</p>
</div>
</div><div id="twid-PSM" class="wikipage">
<a class="close" href="javascript:;" onclick="twc(this)">x</a>
<div class="hypertext">
<p>
PSM := <strong>P</strong>ublic <strong>S</strong>elf-<strong>M</strong>odel(er/ers/ing)
</p><p>
See <a class="tc-tiddlylink-external" href="https://philosopher.life/#PSM" target="_blank">here</a>.
</p>
</div>
</div><div id="twid-Development-Levels" class="wikipage">
<a class="close" href="javascript:;" onclick="twc(this)">x</a>
<div class="hypertext">
<p>
Development Levels (from chame's wiki)
</p><p>
<strong>no level</strong> - for meta-pages, scratchpads and random stuff.
</p><p>
<strong>level zero</strong> - article is <em>perfect</em>.
</p><p>
<strong>level one</strong> - done, but may be tweaked in minor ways.
</p><p>
<strong>level two</strong> - mostly done, final draft, structure is sound.
</p><p>
<strong>level three</strong> - in progress, half-finished, structure can be done.
</p><p>
<strong>level four</strong> - barely started, a skeleton or sketch.
</p><p>
<strong>level five</strong> - not yet started, just a title or blurb.
</p><p>
Original URL is <a class="tc-tiddlylink-external" href="https://wiki.waifu.haus/#Development Levels" target="_blank">here</a>.
</p>
</div>
</div>
<div class="by-macro"><p>~ End of blogchat ~</p></div>
</main>
<footer><div></div></footer>
<div id="dis-tunes"></div>
</body>
</html>