tokono.ma
A music player that connects to your cloud/distributed storage.
chore: couple css improvements
+27
-18
+6
src/_components/diffuse/logo.vto
+6
src/_components/diffuse/logo.vto
+7
-4
src/_includes/layouts/diffuse.vto
+7
-4
src/_includes/layouts/diffuse.vto
···
16
16
17
17
<title>{{title}}</title>
18
18
19
+
<!-- Base -->
20
+
<base href="{{base}}" />
21
+
19
22
<!-- Favicons & Mobile -->
20
-
<link rel="apple-touch-icon" sizes="180x180" href="{{base}}apple-touch-icon.png" />
21
-
<link rel="icon" type="image/png" sizes="32x32" href="{{base}}favicon-32x32.png" />
22
-
<link rel="icon" type="image/png" sizes="16x16" href="{{base}}favicon-16x16.png" />
23
-
<!-- TODO: <link rel="manifest" href="{{base}}site.webmanifest" />-->
23
+
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
24
+
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
25
+
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
26
+
<!-- TODO: <link rel="manifest" href="site.webmanifest" />-->
24
27
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#8a90a9" />
25
28
<meta name="msapplication-TileColor" content="#8a90a9" />
26
29
<meta name="theme-color" content="#8a90a9" />
+12
-5
src/index.css
src/styles/diffuse/page.css
+12
-5
src/index.css
src/styles/diffuse/page.css
···
14
14
}
15
15
16
16
h1 {
17
-
margin: var(--space-lg) 0 var(--space-lg);
17
+
margin: var(--space-lg) 0 var(--space-xl);
18
18
padding-top: var(--space-2xs);
19
19
}
20
20
21
21
h1 svg {
22
22
fill: oklch(from var(--bg-color) calc(l - 0.5) c h);
23
-
opacity: 0.125;
23
+
opacity: 0.2;
24
+
width: 4.25em;
24
25
25
26
@media (prefers-color-scheme: dark) {
26
27
& {
···
77
78
}
78
79
79
80
.construct {
80
-
color: oklch(from currentColor l c h / 0.65);
81
-
font-size: var(--fs-2xl);
81
+
color: oklch(from currentColor l c h / 0.3);
82
+
font-size: var(--fs-3xl);
82
83
font-weight: 900;
83
84
letter-spacing: -0.0125em;
84
85
line-height: 0.775em;
85
-
line-height: 1.05cap;
86
+
line-height: 0.9cap;
86
87
margin-bottom: var(--space-md);
87
88
max-width: var(--container-xl);
88
89
text-transform: uppercase;
90
+
91
+
@media (prefers-color-scheme: dark) {
92
+
& {
93
+
color: oklch(from var(--color-2) l c h / 0.75);
94
+
}
95
+
}
89
96
}
90
97
91
98
.element {
+2
-9
src/index.vto
+2
-9
src/index.vto
···
3
3
4
4
styles:
5
5
- styles/base.css
6
-
- index.css
6
+
- styles/diffuse/page.css
7
7
8
8
# THEMES
9
9
···
123
123
124
124
<header>
125
125
<h1>
126
-
<svg viewBox="0 0 902 134" width="160">
127
-
<title>Diffuse</title>
128
-
<use
129
-
xlink:href="images/diffuse-current.svg#diffuse"
130
-
href="images/diffuse-current.svg#diffuse"></use>
131
-
</svg>
126
+
{{ await comp.diffuse.logo() }}
132
127
</h1>
133
128
<p class="construct">
134
129
Construct your audio player.
···
193
188
The items are added to the default "IndexedDB" output, so make sure that output is configured.
194
189
</small>
195
190
</p>
196
-
197
-
<List items={[]} />
198
191
</section>
199
192
</div>
200
193
<div class="columns">