demos for spacedust
bad-example.com
1:root {
2 font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3 line-height: 1.5;
4 font-weight: 400;
5
6 color-scheme: light dark;
7 color: rgba(255, 255, 255, 0.87);
8 background-color: rgb(24, 30, 38);
9
10 font-synthesis: none;
11 text-rendering: optimizeLegibility;
12 -webkit-font-smoothing: antialiased;
13 -moz-osx-font-smoothing: grayscale;
14}
15
16a {
17 font-weight: 500;
18 color: #646cff;
19 text-decoration: inherit;
20}
21a:hover {
22 color: #535bf2;
23}
24
25body {
26 margin: 0;
27 display: flex;
28 place-items: center;
29 min-width: 320px;
30 min-height: 100vh;
31}
32
33h1 {
34 font-size: 2em;
35 line-height: 1.1;
36 margin: 0;
37}
38
39h2 {
40 margin-top: 2em;
41}
42
43button {
44 border-radius: 8px;
45 border: 1px solid transparent;
46 padding: 0.6em 1.2em;
47 font-size: 1em;
48 font-weight: 500;
49 font-family: inherit;
50 background-color: #1a1a1a;
51 cursor: pointer;
52 transition: border-color 0.25s;
53}
54button:hover {
55 border-color: #646cff;
56}
57button:focus,
58button:focus-visible {
59 outline: 4px auto -webkit-focus-ring-color;
60}
61
62@media (prefers-color-scheme: light) {
63 :root {
64 color: #213547;
65 background-color: #ffffff;
66 }
67 a:hover {
68 color: #747bff;
69 }
70 button {
71 background-color: #f9f9f9;
72 }
73}