A music player that connects to your cloud/distributed storage.
feat: list some features on index page
+48
-32
+4
-29
src/guide.vto
+4
-29
src/guide.vto
···
15
15
font-weight: 200;
16
16
17
17
li {
18
-
display: inline-flex;
18
+
display: inline-block;
19
19
}
20
20
21
21
li a {
···
26
26
gap: var(--space-sm);
27
27
}
28
28
}
29
-
30
-
.intro {
31
-
display: flex;
32
-
flex-wrap: wrap;
33
-
font-size: var(--fs-xl);
34
-
font-weight: 100;
35
-
gap: var(--space-sm) var(--space-xl);
36
-
margin: var(--space-xl) 0;
37
-
text-align: center;
38
-
39
-
& > div > span {
40
-
display: block;
41
-
margin: 0 auto;
42
-
max-width: var(--container-md);
43
-
}
44
-
}
45
29
</style>
46
30
47
31
<h1 hidden>Guide</h1>
48
32
49
-
<section class="intro">
50
-
<div class="flex" style="color: var(--accent-twist-2)">
51
-
<span>Infinite interfaces to interact with your data.</span>
52
-
</div>
53
-
<div class="flex" style="color: var(--accent-twist-4)">
54
-
<span>Countless features to extend your experience.</span>
55
-
</div>
56
-
</section>
57
-
58
33
<section class="getting-started">
59
34
<div class="columns">
60
35
<ul class="flex" style="display: flex; flex-direction: column; gap: var(--space-md); max-width: 100%; padding-left: 0">
61
-
<li class="with-icon">
36
+
<li>
62
37
<a class="with-icon" href="{{ ('facets/connect/index.html') |> facetLoaderURL }}">
63
38
<i class="ph-fill ph-number-circle-one" style="opacity: 0.4"></i>
64
39
<i class="ph-fill ph-file-audio" style="opacity: 0.4"></i>
···
66
41
</a>
67
42
</li>
68
43
69
-
<li class="with-icon">
44
+
<li>
70
45
<a class="with-icon" href="{{ ('facets/data/process-tracks/index.html') |> facetLoaderURL }}">
71
46
<i class="ph-fill ph-number-circle-two" style="opacity: 0.4"></i>
72
47
<i class="ph-fill ph-gear-fine" style="opacity: 0.4"></i>
···
74
49
</a>
75
50
</li>
76
51
77
-
<li class="with-icon">
52
+
<li>
78
53
<a class="with-icon" href="featured/">
79
54
<i class="ph-fill ph-number-circle-three" style="opacity: 0.4"></i>
80
55
<i class="ph-fill ph-paint-brush" style="opacity: 0.4"></i>
+42
-1
src/index.vto
+42
-1
src/index.vto
···
11
11
- common/pages/version-upgrade.js
12
12
---
13
13
14
+
<style>
15
+
.dither-mask {
16
+
position: relative;
17
+
}
18
+
19
+
.features {
20
+
color: var(--accent-twist-1);
21
+
font-size: var(--fs-lg);
22
+
font-weight: 700;
23
+
line-height: var(--leading-snug);
24
+
margin: var(--space-md);
25
+
opacity: 0.6;
26
+
text-transform: capitalize;
27
+
28
+
@media (min-width: 63rem) {
29
+
/*inset: 0;*/
30
+
margin: var(--space-lg);
31
+
/*position: absolute;*/
32
+
}
33
+
34
+
@media (min-width: 84rem) {
35
+
margin: var(--space-xl);
36
+
}
37
+
}
38
+
</style>
39
+
14
40
<header>
15
41
<div>
16
42
<h1 hidden>Diffuse</h1>
···
55
81
</nav>
56
82
</footer>
57
83
</div>
58
-
<div class="dither-mask filler filler--bg-accent"></div>
84
+
<div class="dither-mask filler filler--bg-accent" style="border-radius: var(--radius-lg); overflow: hidden"></div>
59
85
</header>
86
+
87
+
<main>
88
+
<div class="dither-mask filler filler--bg-accent" style="border-radius: var(--radius-lg); overflow: hidden">
89
+
<section class="features">
90
+
<span>Infinite variety of interfaces</span>
91
+
<span style="opacity: 0.4">Choose what your audio player looks like</span>
92
+
<span>Endless optional features</span>
93
+
<span style="opacity: 0.4">Adjust the software to your needs</span>
94
+
<span>Bring audio from all kinds of sources</span>
95
+
<span style="opacity: 0.4">Audio files and streams</span>
96
+
<span>Multiple data syncing options</span>
97
+
<span style="opacity: 0.4">Export & Import</span>
98
+
</section>
99
+
</div>
100
+
</main>