Antonio Mika
·
07 Oct 23
main.css
1*,
2::before,
3::after {
4 box-sizing: border-box;
5}
6
7::-moz-focus-inner {
8 border-style: none;
9 padding: 0;
10}
11:-moz-focusring {
12 outline: 1px dotted ButtonText;
13}
14:-moz-ui-invalid {
15 box-shadow: none;
16}
17
18@media (prefers-color-scheme: light) {
19 :root {
20 --white: #6a737d;
21 --code: #fff8d3;
22 --code-border: #f0d547;
23 --pre: #f6f8fa;
24 --bg-color: #fff;
25 --text-color: #24292f;
26 --link-color: #005cc5;
27 --visited: #6f42c1;
28 --blockquote: #005cc5;
29 --blockquote-bg: #fff;
30 --hover: #d73a49;
31 --grey: #ccc;
32 }
33}
34
35@media (prefers-color-scheme: dark) {
36 :root {
37 --white: #f2f2f2;
38 --code: #414558;
39 --code-border: #252525;
40 --pre: #252525;
41 --bg-color: #282a36;
42 --text-color: #f2f2f2;
43 --link-color: #8be9fd;
44 --visited: #bd93f9;
45 --blockquote: #bd93f9;
46 --blockquote-bg: #414558;
47 --hover: #ff80bf;
48 --grey: #414558;
49 }
50}
51
52html {
53 background-color: var(--bg-color);
54 color: var(--text-color);
55 line-height: 1.5;
56 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
57 Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
58 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
59 -webkit-text-size-adjust: 100%;
60 -moz-tab-size: 4;
61 tab-size: 4;
62}
63
64body {
65 margin: 0 auto;
66 max-width: 720px;
67}
68
69img {
70 max-width: 100%;
71 height: auto;
72}
73
74b,
75strong {
76 font-weight: bold;
77}
78
79code,
80kbd,
81samp,
82pre {
83 font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
84 monospace;
85 font-size: 0.8rem;
86}
87
88code,
89kbd,
90samp {
91 background-color: var(--code);
92 border: 1px solid var(--code-border);
93}
94
95pre > code {
96 background-color: inherit;
97 padding: 0;
98 border: none;
99}
100
101code {
102 border-radius: 0.3rem;
103 padding: 0.15rem 0.2rem 0.05rem;
104}
105
106pre {
107 border-radius: 5px;
108 padding: 1rem;
109 margin: 1rem 0;
110 overflow-x: auto;
111 background-color: var(--pre) !important;
112}
113
114small {
115 font-size: 0.8rem;
116}
117
118summary {
119 display: list-item;
120}
121
122h1,
123h2,
124h3 {
125 margin: 0;
126 padding: 0.6rem 0 0 0;
127 border: 0;
128 font-style: normal;
129 font-weight: inherit;
130 font-size: inherit;
131}
132
133h1 > code {
134 font-size: inherit;
135}
136
137h2 > code {
138 font-size: inherit;
139}
140
141h3 > code {
142 font-size: inherit;
143}
144
145hr {
146 color: inherit;
147 border: 0;
148 margin: 0;
149 height: 1px;
150 background: var(--grey);
151 margin: 2rem auto;
152 text-align: center;
153}
154
155a {
156 text-decoration: underline;
157 color: var(--link-color);
158}
159
160a:hover,
161a:visited:hover {
162 color: var(--hover);
163}
164
165a:visited {
166 color: var(--visited);
167}
168
169a.link-grey {
170 text-decoration: underline;
171 color: var(--white);
172}
173
174a.link-grey:visited {
175 color: var(--white);
176}
177
178section {
179 margin-bottom: 1.4rem;
180}
181
182section:last-child {
183 margin-bottom: 0;
184}
185
186header {
187 margin: 1rem auto;
188}
189
190p {
191 margin: 0.8rem 0;
192}
193
194article {
195 overflow-wrap: break-word;
196}
197
198blockquote {
199 border-left: 5px solid var(--blockquote);
200 background-color: var(--blockquote-bg);
201 padding: 0.8rem;
202 margin: 1rem 0;
203}
204
205blockquote > p {
206 margin: 0;
207}
208
209ul,
210ol {
211 padding: 0 0 0 2rem;
212 list-style-position: outside;
213}
214
215ul[style*="list-style-type: none;"] {
216 padding: 0;
217}
218
219li {
220 margin: 0.5rem 0;
221}
222
223li > pre {
224 padding: 0;
225}
226
227footer {
228 text-align: center;
229 margin-bottom: 4rem;
230}
231
232dt {
233 font-weight: bold;
234}
235
236dd {
237 margin-left: 0;
238}
239
240dd:not(:last-child) {
241 margin-bottom: 0.5rem;
242}
243
244figure {
245 margin: 0;
246}
247
248.post-date {
249 width: 130px;
250}
251
252.text-grey {
253 color: var(--grey);
254}
255
256.text-2xl {
257 font-size: 1.85rem;
258 line-height: 1.15;
259}
260
261.text-xl {
262 font-size: 1.55rem;
263 line-height: 1.15;
264}
265
266.text-lg {
267 font-size: 1.35rem;
268 line-height: 1.15;
269}
270
271.text-md {
272 font-size: 1.15rem;
273 line-height: 1.15;
274}
275
276.text-sm {
277 font-size: 0.875rem;
278}
279
280.text-center {
281 text-align: center;
282}
283
284.font-bold {
285 font-weight: bold;
286}
287
288.font-italic {
289 font-style: italic;
290}
291
292.inline {
293 display: inline;
294}
295
296.flex {
297 display: flex;
298}
299
300.items-center {
301 align-items: center;
302}
303
304.m-0 {
305 margin: 0;
306}
307
308.mt {
309 margin-top: 0.5rem;
310}
311
312.mb {
313 margin-bottom: 0.5rem;
314}
315
316.mr {
317 margin-right: 0.5rem;
318}
319
320.ml {
321 margin-left: 0.5rem;
322}
323
324.my {
325 margin-top: 0.5rem;
326 margin-bottom: 0.5rem;
327}
328
329.my-2 {
330 margin-top: 1rem;
331 margin-bottom: 1rem;
332}
333
334.mx {
335 margin-left: 0.5rem;
336 margin-right: 0.5rem;
337}
338
339.mx-2 {
340 margin-left: 1rem;
341 margin-right: 1rem;
342}
343
344.justify-between {
345 justify-content: space-between;
346}
347
348.flex-1 {
349 flex: 1;
350}
351
352.layout-aside {
353 max-width: 50rem;
354}
355
356.layout-aside aside {
357 width: 200px;
358}
359
360.layout-aside img {
361 border-radius: 5px;
362}
363
364#readme {
365 display: none;
366}
367
368@media only screen and (max-width: 600px) {
369 body {
370 padding: 1rem;
371 }
372
373 header {
374 margin: 0;
375 }
376
377 .layout-aside main {
378 flex-direction: column;
379 }
380
381 aside {
382 display: none;
383 }
384
385 #readme {
386 display: block;
387 }
388}