assets/css/style.css (view raw)
1:root {
2 --color-primary: #4f46e5;
3 --color-bg: #f1f5f9;
4 --text-secondary: #374151;
5 }
6
7 body {
8 font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
9 Bitstream Vera Sans Mono, Courier New, monospace, serif;
10 background-color: var(--color-bg);
11 }
12
13 main {
14 max-width: 40rem;
15 margin: 0 auto;
16 padding: 2rem 0;
17 }
18
19 blockquote {
20 margin: 0;
21 color: var(--text-secondary);
22 }
23
24 a {
25 color: var(--color-primary);
26 text-decoration: none;
27 }
28
29 a:hover {
30 color: #818cf8;
31 text-decoration: underline;
32 }
33
34 h1 {
35 font-size: 1.5rem;
36 line-height: 2rem;
37 }
38
39 h2 {
40 font-size: 1.25rem;
41 line-height: 1.75rem;
42 margin-bottom: 1rem;
43 }
44
45 p {
46 margin: 1.5rem 0;
47 line-height: 1.5;
48 }
49
50 ul {
51 line-height: 1.3;
52 }
53
54 .links-list {
55 display: grid;
56 grid-template-columns: 1fr 1fr 1fr;
57 }
58
59 .links-list > a {
60 display: block;
61 padding-top: 0.5rem;
62 padding-bottom: 0.5rem;
63 }
64
65 @media only screen and (max-width: 600px) {
66 main {
67 padding: 0 0.5rem;
68 }
69
70 .links-list {
71 display: grid;
72 grid-template-columns: 1fr 1fr;
73 }
74 }
75
76 @media (prefers-color-scheme: dark) {
77 :root {
78 --color-primary: #818cf8;
79 --color-bg: #18181b;
80 --text-secondary: #9ca3af;
81 }
82
83 body {
84 color: white;
85 }
86 }
87