forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: improve index page
+78
-14
+15
src/index.css
+15
src/index.css
···
69
69
max-width: var(--container-sm);
70
70
}
71
71
72
+
small {
73
+
font-size: var(--fs-xs);
74
+
}
75
+
72
76
.columns {
73
77
display: flex;
74
78
flex-wrap: wrap;
75
79
gap: 0 var(--space-3xl);
80
+
}
81
+
82
+
.construct {
83
+
color: oklch(1 0 0 / 0.75);
84
+
font-size: var(--fs-2xl);
85
+
font-weight: 900;
86
+
line-height: 0.775em;
87
+
line-height: 1.05cap;
88
+
margin-bottom: var(--space-md);
89
+
max-width: var(--container-xl);
90
+
text-transform: uppercase;
76
91
}
77
92
78
93
.element {
+63
-14
src/index.vto
+63
-14
src/index.vto
···
127
127
href="images/diffuse-current.svg#diffuse"></use>
128
128
</svg>
129
129
</h1>
130
+
<p class="construct">
131
+
Construct your audio player.
132
+
</p>
130
133
<p>
131
-
Diffuse is a collection of custom elements that make it possible to listen to audio from various sources on your devices and the web, and to create the ideal digital
132
-
listening experience for you.
134
+
Diffuse is a collection of components and software that make it possible to listen to audio from various sources on your devices and the web, and to create the ideal digital
135
+
audio listening experience for you.
133
136
</p>
134
137
<p>
135
-
<strong>⚠️ Heavily experimental</strong>
138
+
<em>⚠️ HEAVILY EXPERIMENTAL</em>
139
+
</p>
140
+
<p>
141
+
<small>Built by <a href="https://tokono.ma">tokono.ma</a></small>
136
142
</p>
137
143
</header>
138
144
<main>
139
145
<div class="columns">
146
+
<!-- USAGE -->
147
+
<section>
148
+
<h2 id="usage">Usage</h2>
149
+
150
+
<p>
151
+
The easiest way to start is by exploring the software. If you prefer a typical traditional web application approach, you can check out <a href="#themes">themes</a>.
152
+
</p>
153
+
154
+
<p>
155
+
Alternatively, there's <a href="#constituents">constituents</a> which allows you to use any component from any theme interchange­ably, each in a separate browser tab. Each tab talks to each other, so you can for example browse in one tab and play it in another.
156
+
</p>
157
+
158
+
<p>
159
+
If you're a programmer, you can compose the <a href="#elements">elements</a> listed below to make your own theme. Easily build software by connecting various elements.
160
+
</p>
161
+
162
+
<p>
163
+
<small>
164
+
<strong>NOTE:</strong>
165
+
<em>I'd like there to be a way to compose your own theme without having to write code. Hopefully sometime in the future.</em>
166
+
</small>
167
+
</p>
168
+
</section>
169
+
140
170
<!-- THEMES -->
141
171
<section>
142
172
<h2 id="themes">Themes</h2>
143
173
144
174
<p>
145
175
Themes are element compositions and provide a traditional browser web application way of
146
-
using them. Each theme is unique, not just a skin (ie. not like winamp skins).
176
+
using them. In other words, pretty much the whole thing, besides your data, lives inside a single browser tab.
147
177
</p>
148
178
149
179
<p>
150
-
For example, most themes here will limit the currently playing audio tracks to one item,
151
-
but you might as well create a DJ theme that can play multiple items at the same time.
180
+
<small>
181
+
<strong>NOTE:</strong>
182
+
Each theme is unique, not just a skin. For example, most themes here will limit the currently playing audio tracks to one item, but you might as well create a DJ theme that can play multiple items at the same time.
183
+
</small>
152
184
</p>
153
185
154
186
{{ await comp.list({ items: themes }) }}
155
187
</section>
188
+
</div>
156
189
157
-
<!-- ABSTRACTIONS -->
158
-
<!--<section></section>-->
159
-
</div>
190
+
<!-- CONSTITUENTS -->
191
+
<section>
192
+
<h2 id="constituents">Constituents</h2>
193
+
194
+
<p>
195
+
<small>
196
+
<strong>TODO:</strong>
197
+
Explain constituents.
198
+
</small>
199
+
</p>
200
+
</section>
160
201
161
202
<!-- ELEMENTS -->
162
203
<section>
163
204
<h2 id="elements">Elements</h2>
164
205
165
206
<p>
166
-
The (web) components of the system. These
167
-
are then recombined into an entire music player experience, or whatever you want to build.
207
+
The (web) components of the system. These custom elements are then recombined into an entire music player experience, or whatever you want to build.
168
208
</p>
169
209
170
210
<div class="columns">
···
243
283
{{ await comp.list({ items: definitions }) }}
244
284
</section>
245
285
286
+
<!-- CODE -->
287
+
<section>
288
+
<h2 id="code">Code your own</h2>
289
+
290
+
<p>
291
+
<small>
292
+
<strong>TODO:</strong>
293
+
Explain how to connect the various elements, publish packages, etc.
294
+
</small>
295
+
</p>
296
+
</section>
297
+
246
298
<!-- DEMOS -->
247
299
<!--<section>
248
300
<h2 id="demos">Demos</h2>
···
251
303
252
304
<List items={demos} />
253
305
</section>-->
254
-
255
-
<!-- BUILD YOUR OWN -->
256
-
<!--<section></section>-->
257
306
</main>