trnck.dev
blog.trnck.dev
Add `<code>` and `<kbd>` styles
+51
+50
_sass/_article.scss
+50
_sass/_article.scss
···
1
+
:root {
2
+
color-scheme: light dark;
3
+
}
4
+
5
+
code {
6
+
margin-bottom: 1px;
7
+
padding: 2px 0.25em 1px;
8
+
border-radius: 0.2em;
9
+
line-height: 1.25em;
10
+
background-color: light-dark(rgba(8, 43, 120, 0.047), rgba(255, 255, 255, 0.075));
11
+
border: 0.5px solid light-dark(rgb(212, 212, 212), rgb(44, 46, 51));
12
+
}
13
+
14
+
p code {
15
+
font-size: 90%;
16
+
white-space: nowrap;
17
+
}
18
+
19
+
pre code {
20
+
display: block;
21
+
padding: 15px;
22
+
background-color: #2d2d2d;
23
+
color: #f8f8f2;
24
+
border-radius: 5px;
25
+
overflow-x: auto;
26
+
}
27
+
28
+
pre code::before {
29
+
content: " ";
30
+
display: block;
31
+
height: 1rem;
32
+
}
33
+
34
+
pre code::after {
35
+
content: " ";
36
+
display: block;
37
+
height: 1rem;
38
+
}
39
+
40
+
kbd {
41
+
display: inline-block;
42
+
padding: 3px 5px;
43
+
font-size: 90%;
44
+
color: light-dark(#333, #ddd);
45
+
background-color: light-dark(#f7f7f7, #444);
46
+
border: 1px solid light-dark(#ccc, #555);
47
+
border-radius: 3px;
48
+
box-shadow: inset 0 -1px 0 light-dark(#bbb, #666);
49
+
line-height: 1.4;
50
+
}