assets/css/style.css (view raw)
1:root {
2 --color-primary: #4f46e5;
3 --color-bg: #f1f5f9;
4 --text-secondary: #374151;
5}
6
7body {
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
13main {
14 max-width: 40rem;
15 margin: 0 auto;
16 padding: 2rem 0;
17}
18
19blockquote {
20 margin: 0;
21 color: var(--text-secondary);
22}
23
24a {
25 color: var(--color-primary);
26 text-decoration: none;
27}
28
29a:hover {
30 color: #818cf8;
31 text-decoration: underline;
32}
33
34h1 {
35 font-size: 1.5rem;
36 line-height: 2rem;
37}
38
39h2 {
40 font-size: 1.25rem;
41 line-height: 1.75rem;
42 margin-bottom: 1rem;
43}
44
45p {
46 margin: 1.5rem 0;
47 line-height: 1.5;
48}
49
50ul {
51 line-height: 1.3;
52}
53
54pre:has(code) {
55 padding: 0.5rem 0.75rem;
56 border-radius: 4px;
57}
58
59:not(pre) > code {
60 font-size: 0.9rem;
61 color: var(--text-secondary);
62 background-color: rgb(221, 221, 221);
63 padding: 0 0.25rem;
64 border-radius: 4px;
65}
66
67.links-list {
68 display: grid;
69 grid-template-columns: 1fr 1fr 1fr;
70}
71
72.links-list > a {
73 display: block;
74 padding-top: 0.5rem;
75 padding-bottom: 0.5rem;
76}
77
78.activity-grid {
79 display: grid;
80 grid-template-columns: 1fr 4fr;
81 column-gap: 1rem;
82 row-gap: 1rem;
83
84 > h4 {
85 margin: 0;
86 }
87}
88
89@media only screen and (max-width: 600px) {
90 main {
91 padding: 0 0.5rem;
92 }
93
94 .links-list {
95 display: grid;
96 grid-template-columns: 1fr 1fr;
97 }
98
99 .activity-grid {
100 grid-template-columns: 1fr;
101 }
102}
103
104@media (prefers-color-scheme: dark) {
105 :root {
106 --color-primary: #818cf8;
107 --color-bg: #18181b;
108 --text-secondary: #9ca3af;
109 }
110
111 body {
112 color: white;
113 }
114}