-
Notifications
You must be signed in to change notification settings - Fork 0
/
global.css
134 lines (113 loc) · 2.72 KB
/
global.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
@tailwind base;
@tailwind components;
@tailwind utilities;
::selection {
background-color: #47a3f3;
color: #fefefe;
}
html {
min-width: 360px;
}
.prose .anchor {
@apply absolute invisible no-underline;
margin-left: -1em;
padding-right: 0.5em;
width: 80%;
max-width: 700px;
cursor: pointer;
}
.anchor:hover {
@apply visible;
}
.prose a {
@apply transition-all decoration-neutral-400 dark:decoration-neutral-600 underline-offset-2 decoration-[0.1em];
}
.prose .anchor:after {
@apply text-neutral-300 dark:text-neutral-700;
content: '#';
}
.prose *:hover > .anchor {
@apply visible;
}
.prose pre {
@apply border border-neutral-800 bg-neutral-900;
}
.prose code {
@apply text-neutral-800 dark:text-neutral-200 px-1 py-0.5 border border-neutral-100 dark:border-neutral-800 rounded-lg bg-neutral-100 dark:bg-neutral-900;
}
.prose pre code {
@apply text-neutral-800 dark:text-neutral-200 p-0;
border: initial;
}
.prose img {
/* Don't apply styles to next/image */
@apply m-0;
}
.prose > :first-child {
/* Override removing top margin, causing layout shift */
margin-top: 1.25em !important;
margin-bottom: 1.25em !important;
}
code[class*='language-'],
pre[class*='language-'] {
@apply text-neutral-50;
}
pre::-webkit-scrollbar {
display: none;
}
pre {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Remove Safari input shadow on mobile */
input[type='text'],
input[type='email'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.prose .tweet a {
text-decoration: inherit;
font-weight: inherit;
}
table {
display: block;
max-width: fit-content;
overflow-x: auto;
white-space: nowrap;
}
.prose .callout > p {
margin: 0 !important;
}
[data-rehype-pretty-code-fragment] code {
@apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0 text-sm text-black;
counter-reset: line;
box-decoration-break: clone;
}
[data-rehype-pretty-code-fragment] .line {
@apply py-1;
}
[data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
counter-increment: line;
content: counter(line);
display: inline-block;
width: 1rem;
margin-right: 1rem;
text-align: right;
color: gray;
}
[data-rehype-pretty-code-fragment] .line--highlighted {
@apply bg-slate-500 bg-opacity-10;
}
[data-rehype-pretty-code-fragment] .line-highlighted span {
@apply relative;
}
[data-rehype-pretty-code-fragment] .word--highlighted {
@apply rounded-md bg-slate-500 bg-opacity-10 p-1;
}
[data-rehype-pretty-code-title] {
@apply px-4 py-3 font-mono text-xs font-medium border rounded-t-lg text-neutral-200 border-[#333333] bg-[#1c1c1c];
}
[data-rehype-pretty-code-title] + pre {
@apply mt-0 rounded-t-none border-t-0;
}