blob: ec4bd11b3b9aba88b498e2ee484d0136aebb7976 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
<script>
import Button from "$shared/components/button.svelte";
import Tile from "$shared/components/tile.svelte";
import {switch_theme} from "$shared/lib/helpers";
</script>
<style>
#decoration {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
width: 100%;
height: 100%;
overflow: hidden;
}
#decoration svg {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 134%;
min-width: 1280px;
max-width: 1920px;
height: auto;
}
</style>
<main class="container-fluid padding-x-xs padding-x-xxl@xs padding-y-md padding-y-lg@md max-width-sm">
<slot/>
<Tile class="margin-top-sm">
<Button on:click={() => switch_theme()}
text="Switch theme"
variant="secondary"/>
</Tile>
<figure id="decoration"
aria-hidden="true">
<svg class="color-contrast-higher opacity-10%"
viewBox="0 0 1920 450"
fill="none">
<g stroke="currentColor"
stroke-width="2">
<rect x="1286"
y="64"
width="128"
height="128"/>
<circle cx="1350"
cy="128"
r="64"/>
<path d="M1286 64L1414 192"/>
<circle cx="1478"
cy="128"
r="64"/>
<rect x="1414"
y="192"
width="128"
height="128"/>
<circle cx="1478"
cy="256"
r="64"/>
<path d="M1414 192L1542 320"/>
<circle cx="1606"
cy="256"
r="64"/>
<rect x="1542"
y="320"
width="128"
height="128"/>
<circle cx="1606"
cy="384"
r="64"/>
<path d="M1542 320L1670 448"/>
<rect x="1690"
y="192"
width="128"
height="128"/>
<circle cx="1754"
cy="256"
r="64"/>
<path d="M1690 192L1818 320"/>
<rect x="1542"
y="64"
width="128"
height="128"/>
<circle cx="1606"
cy="128"
r="64"/>
<path d="M1542 64L1670 192"/>
<circle cx="1478"
r="64"/>
</g>
</svg>
</figure>
</main>
|
