A music player that connects to your cloud/distributed storage.
chore: some styling improvements
+37
-15
-6
src/_includes/layouts/kitchen.vto
-6
src/_includes/layouts/kitchen.vto
+6
-1
src/common/pages/from-uri.js
+6
-1
src/common/pages/from-uri.js
···
59
59
/>
60
60
</div>
61
61
</div>
62
-
<div style="display: flex; gap: var(--space-xs); margin-top: var(--space-sm)">
62
+
<div
63
+
style="display: flex; font-size: var(--fs-sm); gap: var(--space-xs); margin-top: var(--space-sm)"
64
+
>
63
65
<button type="submit" class="button--bg-accent">Add</button>
64
66
<button type="button" id="add-uri-cancel">
65
67
Cancel
···
112
114
const nameEl = /** @type {HTMLInputElement} */ (
113
115
dialog.querySelector("#add-uri-name")
114
116
);
117
+
115
118
const kindEl = /** @type {HTMLSelectElement} */ (
116
119
dialog.querySelector("#add-uri-kind")
117
120
);
121
+
118
122
const uriEl = /** @type {HTMLInputElement} */ (
119
123
dialog.querySelector("#add-uri-uri")
120
124
);
125
+
121
126
if (nameEl) nameEl.value = "";
122
127
if (kindEl) kindEl.value = "interactive";
123
128
if (uriEl) uriEl.value = "";
+4
src/facets/data/export-import/index.html
+4
src/facets/data/export-import/index.html
+4
src/facets/data/v3-import/index.html
+4
src/facets/data/v3-import/index.html
-1
src/facets/playback/auto-queue/index.html
-1
src/facets/playback/auto-queue/index.html
+18
-7
src/guide.vto
+18
-7
src/guide.vto
···
4
4
title: Guide | Diffuse
5
5
---
6
6
7
+
<style>
8
+
h2 {
9
+
color: var(--bg-color);
10
+
background: oklch(from var(--accent-twist-2) l c h / 0.8);
11
+
display: inline-block;
12
+
line-height: 0.75;
13
+
text-box: trim-both cap alphabetic;
14
+
padding: var(--space-3xs);
15
+
}
16
+
</style>
17
+
7
18
<h1 hidden>Guide</h1>
8
19
9
20
<div class="columns">
10
21
<section>
11
-
<h3>Concept</h3>
22
+
<h2>Concept</h2>
12
23
13
24
<p>
14
25
Diffuse is unlike traditional software; instead of combining several features into a single user interface and producing data output, we do the opposite, we start with the data and work our way up from there.
···
28
39
</section>
29
40
30
41
<section>
31
-
<h3>Getting started</h3>
42
+
<h2>Getting started</h2>
32
43
33
44
<ul style="display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); padding-left: 0">
34
45
<!-- 1 -->
···
52
63
<!-- 4 -->
53
64
<li class="with-icon" style="gap: var(--space-sm)">
54
65
<i class="ph-fill ph-sparkle" style="opacity: 0.4"></i>
55
-
<span><strong style="color: var(--accent-twist-4)">Continue exploring, enable some additional features</strong> such as making played audio available offline automatically.</span>
66
+
<span><strong>Continue exploring, enable some additional features</strong> such as making played audio available offline automatically.</span>
56
67
</li>
57
68
58
69
<!-- 5 -->
···
65
76
</div>
66
77
67
78
<section id="tutorial">
68
-
<h3>Tutorial</h3>
79
+
<h2>Tutorial</h2>
69
80
70
81
<div class="columns">
71
82
<div>
···
74
85
</p>
75
86
76
87
<p>
77
-
<button id="add-sample-content" class="button--bg-accent">
88
+
<button id="add-sample-content" class="button--bg-twist-2">
78
89
<span>Add sample content</span>
79
90
</button>
80
91
</p>
···
88
99
</p>
89
100
90
101
<p>
91
-
<a class="button button--bg-accent" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
102
+
<a class="button button--bg-twist-2" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
92
103
Play audio
93
104
</a>
94
105
</p>
···
108
119
</p>
109
120
110
121
<p>
111
-
<a class="button button--bg-accent" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}" target="_blank">
122
+
<a class="button button--bg-twist-2" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}" target="_blank">
112
123
Add audio input
113
124
</a>
114
125
</p>
+5
src/styles/wireframe/ui.css
+5
src/styles/wireframe/ui.css
···
3
3
color: var(--text-color);
4
4
}
5
5
6
+
main {
7
+
width: min(var(--container-md), 100vw);
8
+
}
9
+
6
10
.panel {
7
11
border: 2px solid var(--form-color);
8
12
border-radius: var(--radius-md);
···
105
109
padding: var(--space-2xs) var(--space-xs);
106
110
transition-duration: 250ms;
107
111
transition-property: border-color;
112
+
width: 100%;
108
113
109
114
&:focus {
110
115
border-color: var(--accent);