eric.wien
A Vue app that displays bluesky skeets in realtime as they are created.
vinerima.tngl.sh
1:root {
2 color-scheme: light dark;
3 --color-background: light-dark(#f8f8f8, #181818);
4 --color-heading: light-dark(rgb(32, 19, 142), rgb(117, 108, 218));
5 --color-text: light-dark(black, rgba(255, 255, 255, 0.7));
6 --color-link: var(--color-heading);
7 --color-link-hover: light-dark(rgb(19, 11, 87), rgb(98, 90, 184));
8 --color-input-hover: var(--color-heading);
9 --color-input-focus-visible: var(var(--color-heading));
10}
11
12*,
13*::before,
14*::after {
15 box-sizing: border-box;
16 margin: 0;
17 font-weight: normal;
18}
19
20body {
21 min-height: 100dvh;
22 color: var(--color-text);
23 background: var(--color-background);
24 transition:
25 color 0.5s,
26 background-color 0.5s;
27 line-height: 1.6;
28 font-family: monospace;
29 font-size: 16px;
30 text-rendering: optimizeLegibility;
31 -webkit-font-smoothing: antialiased;
32 -moz-osx-font-smoothing: grayscale;
33}
34
35:focus-visible {
36 outline: none;
37}
38
39#app {
40 height: 100dvh;
41 max-width: 1280px;
42 margin: 0 auto;
43 padding: 2rem;
44 font-weight: normal;
45}
46
47a {
48 color: var(--color-link);
49
50 &:hover,
51 &:visited {
52 color: var(--color-link-hover);
53 }
54}
55
56button,
57input {
58 border: 2px solid var(--color-text);
59 background-color: inherit;
60 color: var(--color-text);
61 border-radius: 4px;
62 font-size: 1rem;
63 padding: 4px;
64 font-family: monospace;
65
66 &:hover,
67 &:focus,
68 &:focus-visible {
69 border-color: var(--color-input-hover);
70 }
71}
72
73input:invalid {
74 border-color: red;
75}