assets/css/style.css (view raw)
1:root {
2 --color-primary: #4f46e5;
3 --color-primary-light: rgba(79, 70, 229, 0.08);
4 --color-bg: #f1f5f9;
5 --text-secondary: #374151;
6}
7
8body {
9 font-family:
10 Menlo,
11 Monaco,
12 Lucida Console,
13 Liberation Mono,
14 DejaVu Sans Mono,
15 Bitstream Vera Sans Mono,
16 Courier New,
17 monospace,
18 serif;
19 background-color: var(--color-bg);
20}
21
22main {
23 max-width: 40rem;
24 margin: 0 auto;
25 padding: 2rem 0 4rem;
26}
27
28blockquote {
29 margin: 0;
30 padding-left: 1rem;
31 color: var(--text-secondary);
32 border-left: 6px solid var(--color-primary);
33}
34
35a {
36 color: var(--color-primary);
37 text-decoration: none;
38}
39
40a:hover {
41 color: #818cf8;
42 text-decoration: underline;
43}
44
45h1 {
46 font-size: 1.5rem;
47 line-height: 2rem;
48}
49
50h2 {
51 font-size: 1.25rem;
52 line-height: 1.75rem;
53 margin-bottom: 1rem;
54}
55
56p {
57 margin: 1.5rem 0;
58 line-height: 1.5;
59}
60
61ul {
62 line-height: 1.3;
63}
64
65input, textarea {
66 border-radius: 4px;
67 border: 1px solid #eee;
68 padding: 0.5rem;
69 resize: vertical;
70}
71
72button {
73 border-radius: 4px;
74 color: white;
75 background-color: var(--color-primary);
76 border: none;
77 padding: 0.5rem;
78 cursor: pointer;
79
80 &:hover,&:focus {
81 opacity: 0.8;
82 }
83}
84
85pre:has(code) {
86 padding: 0.5rem 0.75rem;
87 border-radius: 4px;
88 overflow: auto;
89}
90
91:not(pre) > code {
92 font-size: 0.9rem;
93 color: var(--text-secondary);
94 background-color: rgb(221, 221, 221);
95 padding: 0 0.25rem;
96 border-radius: 4px;
97}
98
99nav {
100 display: grid;
101 grid-template-columns: 1fr 1fr;
102}
103
104nav > a {
105 display: block;
106 padding-top: 0.5rem;
107 padding-bottom: 0.5rem;
108}
109
110.date {
111 font-size: 0.9rem;
112 color: var(--text-secondary);
113 background-color: var(--color-primary-light);
114 padding: 0 0.25rem;
115 border-radius: 4px;
116}
117
118.activity-grid {
119 display: grid;
120 grid-template-columns: 1fr 4fr;
121 column-gap: 1rem;
122 row-gap: 1rem;
123
124 > h4 {
125 margin: 0;
126 }
127}
128
129.contact {
130 display: grid;
131 grid-template-columns: 1fr 1fr;
132 row-gap: 1rem;
133}
134
135#contact-form {
136 display: flex;
137 flex-direction: column;
138 row-gap: 1rem;
139
140 > button {
141 width: 100%;
142 }
143}
144
145@media only screen and (max-width: 600px) {
146 main {
147 padding: 0 0.5rem;
148 }
149
150 nav {
151 display: grid;
152 grid-template-columns: 1fr 1fr;
153 }
154
155 .contact {
156 display: flex;
157 flex-direction: column;
158 }
159
160 .activity-grid {
161 grid-template-columns: 1fr;
162 }
163
164 ul.links-list {
165 padding-left: 1rem;
166 font-size: 1.1rem;
167
168 & > * {
169 margin-bottom: 1rem;
170 }
171 }
172}
173
174@media (prefers-color-scheme: dark) {
175 :root {
176 --color-primary: #818cf8;
177 --color-bg: #18181b;
178 --text-secondary: #9ca3af;
179 }
180
181 body {
182 color: white;
183 }
184}