vielle.dev
[WIP] A simple wake-on-lan service
apply basic theme to main
+49
-4
+35
-4
web/src/App.svelte
+35
-4
web/src/App.svelte
···
1
1
<script lang="ts">
2
2
import { config } from "./lib/api";
3
-
import Power from "./lib/Power.svelte";
3
+
import Target from "./lib/Target.svelte";
4
4
import ThemeProvider from "./lib/ThemeProvider.svelte";
5
5
6
6
const targets = [
···
20
20
21
21
<ThemeProvider />
22
22
<main>
23
+
<div></div>
23
24
<h1>{config.info.title}</h1>
24
-
<ul>
25
+
<ul class="targets">
25
26
{#each targets as [name, { mac, ip, url }]}
26
27
<li>
27
-
<Power {name} {mac} {ip} {url} />
28
+
<Target {name} {mac} {ip} {url} />
28
29
</li>
29
30
{/each}
30
31
</ul>
31
-
<ul>
32
+
<ul class="links">
32
33
{#each config.info.links as [href, text]}
33
34
<li><a {href}>{text}</a></li>
34
35
{/each}
35
36
</ul>
36
37
</main>
38
+
39
+
<style>
40
+
main {
41
+
max-width: 50ch;
42
+
margin: 1rem auto;
43
+
padding: 1rem;
44
+
background: var(--theme-foreground);
45
+
color: var(--theme-text);
46
+
border-radius: 10px;
47
+
}
48
+
49
+
.targets {
50
+
display: grid;
51
+
grid-template-columns: 1fr;
52
+
grid-auto-rows: auto;
53
+
gap: 1rem;
54
+
grid-auto-flow: row;
55
+
padding-block: 1rem;
56
+
list-style: none;
57
+
}
58
+
59
+
.links {
60
+
display: flex;
61
+
gap: 0.2rem 2rem;
62
+
justify-content: center;
63
+
align-items: center;
64
+
list-style: none;
65
+
flex-wrap: wrap;
66
+
}
67
+
</style>
+4
web/src/lib/Power.svelte
web/src/lib/Target.svelte
+4
web/src/lib/Power.svelte
web/src/lib/Target.svelte
+10
web/src/lib/ThemeProvider.svelte
+10
web/src/lib/ThemeProvider.svelte
···
31
31
}
32
32
}
33
33
34
+
body {
35
+
background-color: var(--theme-background);
36
+
}
37
+
34
38
a {
35
39
color: var(--theme-link);
36
40
···
45
49
&:active {
46
50
text-decoration: none;
47
51
}
52
+
}
53
+
54
+
::selection {
55
+
background-color: rgb(
56
+
from var(--theme-highlight) r g b / var(--theme-highlight-opacity)
57
+
);
48
58
}
49
59
}
50
60
</style>