forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: more guide improvements
+75
-15
+70
-10
src/guide.vto
+70
-10
src/guide.vto
···
11
11
}
12
12
13
13
.getting-started {
14
-
color: var(--accent-twist-2);
15
14
font-size: var(--fs-md);
16
15
font-weight: 500;
17
16
17
+
ul {
18
+
display: flex;
19
+
flex-direction: column;
20
+
gap: var(--space-md);
21
+
margin: var(--space-xl) 0;
22
+
max-width: 100%;
23
+
padding-left: 0;
24
+
25
+
@media (min-width: 42rem) {
26
+
margin: var(--space-md) 0;
27
+
}
28
+
}
29
+
18
30
li {
19
31
display: inline-block;
20
32
}
21
33
22
34
li a {
23
35
text-decoration: none;
36
+
}
37
+
38
+
i[style] {
39
+
@media (max-width: 35rem) {
40
+
display: none;
41
+
}
24
42
}
25
43
26
44
.with-icon {
···
33
51
34
52
<section class="getting-started">
35
53
<div class="columns">
36
-
<ul class="flex" style="display: flex; flex-direction: column; gap: var(--space-md); max-width: 100%; padding-left: 0">
54
+
<ul class="flex" style="color: oklch(from var(--text-color) l c h / 0.4);">
55
+
<li>
56
+
<span class="with-icon">
57
+
<i class="ph-fill ph-play-circle" style="opacity: 0.25"></i>
58
+
<i class="ph-fill ph-eye-slash"></i>
59
+
<span>There's no main audio interface</span>
60
+
</span>
61
+
</li>
62
+
63
+
<li>
64
+
<span class="with-icon">
65
+
<i class="ph-fill ph-asterisk" style="opacity: 0.25"></i>
66
+
<i class="ph-fill ph-lightning-slash"></i>
67
+
<span>There's no fixed feature set</span>
68
+
</span>
69
+
</li>
70
+
71
+
<li>
72
+
<span class="with-icon">
73
+
<i class="ph-fill ph-info" style="opacity: 0.25"></i>
74
+
<i class="ph-fill ph-app-window"></i>
75
+
<span><a style="color: var(--accent-twist-2)" href="catalogue/?category=Themes">Themes</a> are like traditional "apps"</span>
76
+
</span>
77
+
</li>
78
+
79
+
<li>
80
+
<span class="with-icon">
81
+
<i class="ph-fill ph-plus-circle" style="opacity: 0.25"></i>
82
+
<i class="ph-fill ph-tabs"></i>
83
+
<span>
84
+
Unlike interfaces in <a style="text-decoration: underline; text-decoration-color: var(--accent-twist-2)" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}">separate</a> <a style="text-decoration: underline; text-decoration-color: var(--accent-twist-2)" href="{{ ('themes/winamp/browser/facet/index.html') |> facetLoaderURL }}">tabs</a>
85
+
</span>
86
+
</span>
87
+
</li>
88
+
89
+
<li>
90
+
<span class="with-icon">
91
+
<i class="ph-fill ph-person-simple-circle" style="opacity: 0.25"></i>
92
+
<i class="ph-fill ph-share"></i>
93
+
<span>Shareable interfaces & features</span>
94
+
</span>
95
+
</li>
96
+
</ul>
97
+
98
+
<ul class="flex" style="color: var(--accent-twist-2);">
37
99
<li>
38
100
<a class="with-icon" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}">
39
101
<i class="ph-fill ph-number-circle-one" style="opacity: 0.25"></i>
40
-
<i class="ph-fill ph-file-audio" style="opacity: 1"></i>
102
+
<i class="ph-fill ph-file-audio"></i>
41
103
<span>Add some audio</span>
42
104
</a>
43
105
</li>
···
45
107
<li>
46
108
<a class="with-icon" href="{{ ('facets/data/process-tracks/index.html') |> facetLoaderURL }}">
47
109
<i class="ph-fill ph-number-circle-two" style="opacity: 0.25"></i>
48
-
<i class="ph-fill ph-gear-fine" style="opacity: 1"></i>
110
+
<i class="ph-fill ph-gear-fine"></i>
49
111
<span>Wait until processed</span>
50
112
</a>
51
113
</li>
···
53
115
<li>
54
116
<a class="with-icon" href="featured/">
55
117
<i class="ph-fill ph-number-circle-three" style="opacity: 0.25"></i>
56
-
<i class="ph-fill ph-swatches" style="opacity: 1"></i>
118
+
<i class="ph-fill ph-swatches"></i>
57
119
<span>Try out interfaces</span>
58
120
</a>
59
121
</li>
60
-
</ul>
61
122
62
-
<ul class="flex" style="display: flex; flex-direction: column; gap: var(--space-md); max-width: 100%; padding-left: 0">
63
123
<li>
64
124
<a class="with-icon" href="featured/">
65
125
<i class="ph-fill ph-number-circle-four" style="opacity: 0.25"></i>
66
-
<i class="ph-fill ph-sparkle" style="opacity: 1"></i>
126
+
<i class="ph-fill ph-sparkle"></i>
67
127
<span>Enable additional features</span>
68
128
</a>
69
129
</li>
···
71
131
<li>
72
132
<a class="with-icon" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}">
73
133
<i class="ph-fill ph-number-circle-five" style="opacity: 0.25"></i>
74
-
<i class="ph-fill ph-person" style="opacity: 1"></i>
75
-
<span>Sync or share data</span>
134
+
<i class="ph-fill ph-person"></i>
135
+
<span>Sync your user-data</span>
76
136
</a>
77
137
</li>
78
138
</ul>
+5
-5
src/index.vto
+5
-5
src/index.vto
···
56
56
</p>
57
57
<p style="margin-top: var(--space-lg)">
58
58
<a class="button button--bg-accent" href="dashboard/">
59
-
Open Diffuse
59
+
Open Diffuse
60
60
</a>
61
61
</p>
62
-
<!--<p>
63
-
<a class="button button--subtle" href="dashboard/">
64
-
Roll the demo tape
62
+
<p>
63
+
<a class="button button--subtle" href="guide/">
64
+
I'm new here, guide me
65
65
</a>
66
-
</p>-->
66
+
</p>
67
67
<p style="margin-top: var(--space-lg)">
68
68
<small style="line-height: var(--leading-relaxed)">
69
69
Like using Diffuse? <a href="https://ko-fi.com/toko">Support with a donation!</a><br />