forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: redesign connect facet
+147
-51
+113
-12
src/facets/connect/index.html
+113
-12
src/facets/connect/index.html
···
1
1
<style>
2
-
@import "./vendor/@awesome.me/webawesome/styles/webawesome.css" layer(wa);
3
-
@import "./facets/connect/common.css" layer(connect);
2
+
@import "./styles/base.css";
3
+
@import "./vendor/@phosphor-icons/web/fill/style.css";
4
+
5
+
@layer base, diffuse;
6
+
7
+
body {
8
+
background-color: var(--bg-color);
9
+
color: var(--text-color);
10
+
}
11
+
12
+
main {
13
+
padding: var(--space-2xl) var(--space-xl);
14
+
15
+
@media (min-width: 48rem) {
16
+
align-items: center;
17
+
display: flex;
18
+
flex-direction: row;
19
+
gap: var(--space-2xl);
20
+
justify-content: center;
21
+
min-height: 100dvh;
22
+
}
23
+
}
24
+
25
+
.connect-index__left {
26
+
flex: 1;
27
+
margin-bottom: var(--space-lg);
28
+
max-width: 24rem;
29
+
}
30
+
31
+
.connect-index__right {
32
+
flex: 1;
33
+
max-width: 24rem;
34
+
}
35
+
36
+
.diffuse-logo-container {
37
+
display: block;
38
+
margin-bottom: var(--space-lg);
39
+
40
+
svg {
41
+
display: block;
42
+
fill: oklch(from var(--bg-color) calc(l - 0.5) c h);
43
+
opacity: 0.2;
44
+
width: 5em;
45
+
46
+
@media (prefers-color-scheme: dark) {
47
+
fill: var(--text-color);
48
+
opacity: 0.25;
49
+
}
50
+
}
51
+
}
52
+
53
+
h1 {
54
+
font-size: var(--fs-2xl);
55
+
font-weight: 700;
56
+
letter-spacing: -0.02em;
57
+
line-height: 1.2;
58
+
margin: 0 0 var(--space-sm);
59
+
}
60
+
61
+
p {
62
+
color: oklch(from var(--text-color) l c h / 0.55);
63
+
font-size: var(--fs-sm);
64
+
line-height: var(--leading-relaxed);
65
+
margin: 0;
66
+
max-width: 22rem;
67
+
}
4
68
5
-
@layer base, diffuse, wa;
69
+
ul {
70
+
list-style: none;
71
+
padding: 0;
72
+
margin: 0;
73
+
display: flex;
74
+
flex-direction: column;
75
+
gap: var(--space-md);
76
+
}
77
+
78
+
li {
79
+
margin: 0;
80
+
}
6
81
7
-
ul li {
8
-
margin-left: 0;
82
+
.connect-item {
83
+
align-items: center;
84
+
display: flex;
85
+
gap: var(--space-md);
9
86
}
10
87
11
88
.connect-item[href] {
12
-
text-decoration: none;
89
+
border-radius: var(--radius-md);
13
90
color: inherit;
14
-
border-radius: var(--wa-border-radius-m);
15
-
gap: var(--wa-space-m);
16
-
padding: var(--wa-space-2xs);
17
-
margin: calc(-1 * var(--wa-space-2xs));
91
+
margin: calc(-1 * var(--space-2xs));
92
+
padding: var(--space-2xs);
93
+
text-decoration: none;
18
94
19
95
&:hover {
20
-
background: var(--wa-color-fill-quiet);
96
+
background: oklch(from var(--text-color) l c h / 0.05);
21
97
}
22
98
}
99
+
100
+
.connect-item__icon {
101
+
flex-shrink: 0;
102
+
font-size: var(--fs-base);
103
+
}
104
+
105
+
.connect-item__info {
106
+
display: flex;
107
+
flex-direction: column;
108
+
flex: 1;
109
+
gap: var(--space-3xs);
110
+
min-width: 0;
111
+
}
112
+
113
+
.connect-item__name {
114
+
font-weight: 600;
115
+
overflow: hidden;
116
+
text-overflow: ellipsis;
117
+
white-space: nowrap;
118
+
}
119
+
120
+
.connect-item__detail {
121
+
color: oklch(from var(--text-color) l c h / 0.55);
122
+
font-size: var(--fs-xs);
123
+
}
23
124
</style>
24
125
25
-
<main class="wa-theme-default"></main>
126
+
<main></main>
26
127
27
128
<script type="module" src="./facets/connect/index.inline.js"></script>
+34
-39
src/facets/connect/index.inline.js
+34
-39
src/facets/connect/index.inline.js
···
1
1
import { html, render as litRender } from "lit-html";
2
2
3
-
import "@awesome.me/webawesome/dist/components/card/card.js";
4
-
import "@awesome.me/webawesome/dist/components/divider/divider.js";
5
-
import "@awesome.me/webawesome/dist/components/icon/icon.js";
6
-
7
-
import "~/common/webawesome/detect-dark.js";
8
-
import "~/common/webawesome/phosphor/fill.js";
9
-
10
3
import { data as facetsData } from "~/facets/index.js";
11
4
import foundation from "~/common/foundation.js";
12
5
···
43
36
44
37
litRender(
45
38
html`
46
-
<wa-card>
47
-
<div slot="header" class="card-header">
48
-
<strong>Connect</strong>
49
-
</div>
50
-
<div class="card-body">
51
-
<p>
52
-
These are some of the options available to add as an audio source, or to
53
-
use as user-data storage. Some offer both.
54
-
</p>
55
-
<wa-divider></wa-divider>
56
-
<ul class="connect-list">
57
-
${facets.map(({ name, description, icon, href }) =>
58
-
html`
59
-
<li>
60
-
<a class="connect-item" href="${href}">
61
-
<wa-icon
62
-
library="phosphor/fill"
63
-
name="${icon}"
64
-
class="wa-body-l"
65
-
style="flex-shrink: 0;"
66
-
></wa-icon>
67
-
<div class="connect-item__info">
68
-
<span class="connect-item__name">${name}</span>
69
-
<span class="connect-item__detail">${description}</span>
70
-
</div>
71
-
</a>
72
-
</li>
73
-
`
74
-
)}
75
-
</ul>
76
-
</div>
77
-
</wa-card>
39
+
<div class="connect-index__left">
40
+
<a href="./dashboard/" class="diffuse-logo-container">
41
+
<svg viewBox="0 0 902 134" width="160">
42
+
<title>Diffuse</title>
43
+
<use
44
+
xlink:href="images/diffuse-current.svg#diffuse"
45
+
href="images/diffuse-current.svg#diffuse"
46
+
>
47
+
</use>
48
+
</svg>
49
+
</a>
50
+
<h1>Connect</h1>
51
+
<p>
52
+
These are some of the options available to add as an audio source, or to use
53
+
as user-data storage. Some offer both.
54
+
</p>
55
+
</div>
56
+
<div class="connect-index__right">
57
+
<ul class="connect-list">
58
+
${facets.map(({ name, description, icon, href }) =>
59
+
html`
60
+
<li>
61
+
<a class="connect-item" href="${href}">
62
+
<i class="ph-fill ph-${icon} connect-item__icon"></i>
63
+
<div class="connect-item__info">
64
+
<span class="connect-item__name">${name}</span>
65
+
<span class="connect-item__detail">${description}</span>
66
+
</div>
67
+
</a>
68
+
</li>
69
+
`
70
+
)}
71
+
</ul>
72
+
</div>
78
73
`,
79
74
main,
80
75
);