my blog https://overreacted.io
danabra.mov
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5:root {
6 --text: #222;
7 --title: #222;
8 --bg: white;
9 --code-bg: #232936;
10 --link: #d23669;
11 --inlineCode-bg: rgba(255, 229, 100, 0.2);
12 --inlineCode-text: #1a1a1a;
13 --pink: lab(63 59.32 -1.47);
14 --purple: lab(33 42.09 -43.19);
15 --svg-filter: none;
16}
17@media (prefers-color-scheme: dark) {
18 :root {
19 --text: rgba(255, 255, 255, 0.88);
20 --title: white;
21 --bg: rgb(40, 44, 53);
22 --code-bg: #191d27;
23 --link: #ffa7c4;
24 --inlineCode-bg: rgba(115, 124, 153, 0.2);
25 --inlineCode-text: #e6e6e6;
26 --pink: lab(81 32.36 -7.02);
27 --purple: lab(78 19.97 -36.75);
28 --svg-filter: invert(93%) hue-rotate(180deg);
29 }
30}
31@property --myColor1 {
32 syntax: "<color>";
33 initial-value: #222;
34 inherits: false;
35}
36@property --myColor2 {
37 syntax: "<color>";
38 initial-value: #222;
39 inherits: false;
40}
41@media (prefers-color-scheme: dark) {
42 @property --myColor1 {
43 syntax: "<color>";
44 initial-value: rgba(255, 255, 255, 0.88);
45 inherits: false;
46 }
47 @property --myColor2 {
48 syntax: "<color>";
49 initial-value: rgba(255, 255, 255, 0.88);
50 inherits: false;
51 }
52}
53
54@media (prefers-color-scheme: dark) {
55 body {
56 -webkit-font-smoothing: antialiased;
57 -moz-osx-font-smoothing: grayscale;
58 }
59}
60
61@media (prefers-reduced-motion) {
62 * {
63 transition: none !important;
64 }
65}
66
67:root { --bg-rotated: white; }
68@media (prefers-color-scheme: dark) {
69 :root { --bg-rotated: rgb(221, 225, 236); }
70}