1/* color palette from <https://github.com/vuejs/theme> */
2:root {
3 --vt-c-white: #ffffff;
4 --vt-c-white-soft: #f8f8f8;
5 --vt-c-white-mute: #f2f2f2;
6
7 --vt-c-black: #181818;
8 --vt-c-black-soft: #222222;
9 --vt-c-black-mute: #282828;
10
11 --vt-c-indigo: #2c3e50;
12
13 --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17
18 --vt-c-text-light-1: var(--vt-c-indigo);
19 --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 --vt-c-text-dark-1: var(--vt-c-white);
21 --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22}
23
24/* semantic color variables for this project */
25:root {
26 --color-background: var(--vt-c-white);
27 --color-background-soft: var(--vt-c-white-soft);
28 --color-background-mute: var(--vt-c-white-mute);
29
30 --color-border: var(--vt-c-divider-light-2);
31 --color-border-hover: var(--vt-c-divider-light-1);
32
33 --color-heading: var(--vt-c-text-light-1);
34 --color-text: var(--vt-c-text-light-1);
35
36 --section-gap: 160px;
37}
38
39@media (prefers-color-scheme: dark) {
40 :root {
41 --color-background: var(--vt-c-black);
42 --color-background-soft: var(--vt-c-black-soft);
43 --color-background-mute: var(--vt-c-black-mute);
44
45 --color-border: var(--vt-c-divider-dark-2);
46 --color-border-hover: var(--vt-c-divider-dark-1);
47
48 --color-heading: var(--vt-c-text-dark-1);
49 --color-text: var(--vt-c-text-dark-2);
50 }
51}
52
53*,
54*::before,
55*::after {
56 box-sizing: border-box;
57 margin: 0;
58 font-weight: normal;
59}
60
61body {
62 min-height: 100vh;
63 color: var(--color-text);
64 background: var(--color-background);
65 transition:
66 color 0.5s,
67 background-color 0.5s;
68 line-height: 1.6;
69 font-family:
70 Inter,
71 -apple-system,
72 BlinkMacSystemFont,
73 "Segoe UI",
74 Roboto,
75 Oxygen,
76 Ubuntu,
77 Cantarell,
78 "Fira Sans",
79 "Droid Sans",
80 "Helvetica Neue",
81 sans-serif;
82 font-size: 15px;
83 text-rendering: optimizeLegibility;
84 -webkit-font-smoothing: antialiased;
85 -moz-osx-font-smoothing: grayscale;
86}