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
import { html } from "https://esm.town/v/postpostscript/htmlComponentLibrary";
import svg2dataURL from "npm:mini-svg-data-uri";
export const logo = {
white: html(svg2dataURL(
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"600\" height=\"237\" fill=\"none\"><path d=\"M0 0h600v237H0z\"/><g fill=\"#fff\" clip-path=\"url(#a)\"><path d=\"M171.182 146.387c3.89 0 7.064-1.082 9.524-3.248 2.459-2.164 3.689-5.046 3.689-8.644v-1.1
)),
black: html(svg2dataURL(
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"600\" height=\"237\" fill=\"none\"><path d=\"M0 0h600v237H0z\"/><g fill=\"#000\" clip-path=\"url(#a)\"><path d=\"M171.182 146.387c3.89 0 7.064-1.082 9.524-3.248 2.459-2.164 3.689-5.046 3.689-8.644v-1.1
)),
};
export const mark = {
white: html(svg2dataURL(
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"400\" fill=\"none\"><path d=\"M0 0h400v400H0z\"/><g fill=\"#fff\" clip-path=\"url(#a)\"><path d=\"M265.026 271.002c-7.196 0-13.032-2.235-17.508-6.709-4.48-4.472-6.716-10.452-6.716-17.93v
)),
black: html(svg2dataURL(
"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"400\" fill=\"none\"><path d=\"M0 0h400v400H0z\"/><g fill=\"#000\" clip-path=\"url(#a)\"><path d=\"M265.026 271.002c-7.196 0-13.032-2.235-17.508-6.709-4.48-4.472-6.716-10.452-6.716-17.93v
)),
};
export const valTownLogoWhite =
html`<img class="logo-white" style="height: 3.4em; margin: -1.2em auto -1.2em -0.75em;" alt="Val Town" src="${logo.white}">`;
export const valTownLogoBlack =
html`<img class="logo-black" style="height: 3.4em; margin: -1.2em auto -1.2em -0.75em;" alt="Val Town" src="${logo.black}">`;
export const valTownMarkWhite =
html`<img class="mark-white" style="height: 3.4em; margin: -1.2em auto -1.2em -0.75em;" alt="Val Town" src="${mark.white}">`;
export const valTownMarkBlack =
html`<img class="mark-black" style="height: 3.4em; margin: -1.2em auto -1.2em -0.75em;" alt="Val Town" src="${mark.black}">`;
export const valTownLogoAuto = html`
${valTownLogoWhite}
${valTownLogoBlack}
<style>
.logo-white {
display: none;
}
@media (prefers-color-scheme: dark) {
.logo-white {
display: inline-block;
}
.logo-black {
display: none;
}
}
</style>
`;
export const valTownMarkAuto = html`
${valTownMarkWhite}
${valTownMarkBlack}
<style>
.mark-white {
display: none;
}
@media (prefers-color-scheme: dark) {
.mark-white {
display: inline-block;
}
.mark-black {
display: none;
}
}
</style>
`;
// let me know if this is an issue :)
👆 This is a val. Vals are TypeScript snippets of code, written in the browser and run on our servers. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.