A music player that connects to your cloud/distributed storage.
chore: 🧹
+17
-14
+1
-1
src/_components/examples.vto
+1
-1
src/_components/examples.vto
+2
-2
src/_components/grid.vto
+2
-2
src/_components/grid.vto
···
2
2
<span class="grid-filter--label">Filter by</span>
3
3
4
4
<button class="button--border button--tiny" data-filter="all">All</button>
5
-
<button class="button--border button--tiny button--bg-accent button--tr-accent button--transparent" data-filter="prelude">Features</button>
5
+
<button class="button--border button--tiny button--bg-twist-4 button--tr-twist-4 button--transparent" data-filter="prelude">Features</button>
6
6
<button class="button--border button--tiny button--bg-twist-2 button--tr-twist-2 button--transparent" data-filter="interface">Interfaces</button>
7
7
8
8
<div style="flex: 1"></div>
···
15
15
{{ for index, item of items }}
16
16
{{ set color = (() => {
17
17
switch (item.kind) {
18
-
case "prelude": return "var(--accent)";
18
+
case "prelude": return "var(--accent-twist-4)";
19
19
default: return "var(--accent-twist-2)";
20
20
}
21
21
})() }}
+1
-1
src/_includes/layouts/kitchen.vto
+1
-1
src/_includes/layouts/kitchen.vto
+2
-2
src/build.vto
+2
-2
src/build.vto
···
43
43
</p>
44
44
<p>
45
45
<span class="button-row">
46
-
<button class="button--bg-twist-2" name="save">Save</button>
47
-
<button class="button--bg-twist-2" name="save+open">Save & Open</button>
46
+
<button class="button--bg-accent" name="save">Save</button>
47
+
<button class="button--bg-accent" name="save+open">Save & Open</button>
48
48
</span>
49
49
</p>
50
50
</div>
+1
-1
src/common/facets/category.js
+1
-1
src/common/facets/category.js
+1
-1
src/common/pages/dashboard.js
+1
-1
src/common/pages/dashboard.js
+3
-3
src/guide.vto
+3
-3
src/guide.vto
···
60
60
</p>
61
61
62
62
<p>
63
-
<button id="add-sample-content">
63
+
<button id="add-sample-content" class="button--bg-accent">
64
64
<span>Add sample content</span>
65
65
</button>
66
66
</p>
···
75
75
76
76
<p>
77
77
<span class="button-row">
78
-
<a class="button button--bg-twist-2" href="{{ ('facets/playback/auto-queue/index.html') |> facetLoaderURL }}" target="_blank">
78
+
<a class="button button--bg-accent" href="{{ ('facets/playback/auto-queue/index.html') |> facetLoaderURL }}" target="_blank">
79
79
<span class="with-icon">
80
80
<i class="ph-fill ph-number-circle-one"></i>
81
81
Fill up queue
82
82
</span>
83
83
</a>
84
-
<a class="button button--bg-twist-2" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
84
+
<a class="button button--bg-accent" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
85
85
<span class="with-icon">
86
86
<i class="ph-fill ph-number-circle-two"></i>
87
87
Play audio
+3
-3
src/index.vto
+3
-3
src/index.vto
···
35
35
{{ await comp.diffuse.logo() }}
36
36
{{ await comp.diffuse.status() }}
37
37
</div>
38
-
<p class="construct dither-mask">
38
+
<p class="construct dither-mask" style="color: var(--accent-twist-4)">
39
39
Your audio<br />your data<br />your rules
40
40
</p>
41
41
<p>
···
50
50
<li><a href="featured/">Featured</a></li>
51
51
</ul>
52
52
<p style="margin: var(--space-lg) 0">
53
-
<a class="button button--bg-accent" href="dashboard/">Open Diffuse</a>
53
+
<a class="button button--bg-twist-4" href="dashboard/">Open Diffuse</a>
54
54
</p>
55
55
<p>
56
56
<small style="line-height: var(--leading-relaxed)">
···
59
59
</small>
60
60
</p>
61
61
</div>
62
-
<div class="dither-mask filler"></div>
62
+
<div class="dither-mask filler filler--bg-twist-4"></div>
63
63
</header>
64
64
<main>
65
65
</main>
+3
src/styles/diffuse/page.css
+3
src/styles/diffuse/page.css
···
318
318
display: inline-block;
319
319
font-size: var(--fs-2xs);
320
320
font-weight: 600;
321
+
line-height: 0.75;
321
322
opacity: 0.6;
322
323
padding: var(--space-3xs);
323
324
text-box: trim-both cap alphabetic;
···
488
489
489
490
&.button--small {
490
491
font-size: var(--fs-sm);
492
+
line-height: 0.75;
491
493
padding: var(--space-2xs);
492
494
text-box: trim-both cap alphabetic;
493
495
}
···
499
501
&.button--tag {
500
502
font-size: var(--fs-2xs);
501
503
font-weight: 600;
504
+
line-height: 0.75;
502
505
padding: var(--space-3xs);
503
506
text-box: trim-both cap alphabetic;
504
507
vertical-align: middle;