-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmdx-content.css
181 lines (144 loc) · 6.01 KB
/
mdx-content.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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
.mdx-content {
& a:not(.github-header) {
@apply relative font-medium underline underline-offset-4;
&.anchor {
@apply absolute;
}
&:not([href^='http']):not([href^='https']) {
@apply font-medium;
}
&[href^='http']::after,
&[href^='https']::after {
@apply ml-[0.2rem] inline-block -translate-y-[0.2rem] align-top font-heading text-[18px] transition-transform content-['↗︎'] hover:-translate-y-[0.4rem] hover:translate-x-[0.2rem];
}
&[href^='/']:not([href='/']):not([href^='/#'])::after {
@apply ml-[0.2rem] inline-block -translate-y-[0.2rem] align-top font-heading text-[18px] transition-transform content-['▣'] hover:-translate-y-[0.4rem] hover:translate-x-[0.2rem];
}
}
& strong {
@apply font-medium text-accent selection:bg-accent dark:text-accent-dark dark:selection:bg-accent-dark;
}
& em {
@apply font-medium not-italic text-accent selection:bg-accent dark:text-accent-dark dark:selection:bg-accent-dark;
}
& strong em {
/* Special styling for the Actors logo */
@apply text-nowrap;
&::before {
@apply mr-1 inline-block h-4 w-4 content-[''];
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='white' fill-rule='evenodd' d='m10.512 10.824-.364-.954H5.852l-.364.954-1.328 3.488H1.712l2.905-7.395h6.766l2.905 7.395H11.84l-1.328-3.488Zm.289-5.388L9.247 1.481H6.753L5.199 5.436h5.602Zm-.344 9.403-1.329-3.488H6.872l-1.329 3.488a1.48 1.48 0 0 1-1.383.954H.988a.987.987 0 0 1-.919-1.348L5.498.625A.987.987 0 0 1 6.417 0h3.166c.406 0 .77.248.919.626l5.429 13.819a.987.987 0 0 1-.919 1.348H11.84a1.48 1.48 0 0 1-1.383-.954Z' clip-rule='evenodd'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='white' fill-rule='evenodd' d='m10.512 10.824-.364-.954H5.852l-.364.954-1.328 3.488H1.712l2.905-7.395h6.766l2.905 7.395H11.84l-1.328-3.488Zm.289-5.388L9.247 1.481H6.753L5.199 5.436h5.602Zm-.344 9.403-1.329-3.488H6.872l-1.329 3.488a1.48 1.48 0 0 1-1.383.954H.988a.987.987 0 0 1-.919-1.348L5.498.625A.987.987 0 0 1 6.417 0h3.166c.406 0 .77.248.919.626l5.429 13.819a.987.987 0 0 1-.919 1.348H11.84a1.48 1.48 0 0 1-1.383-.954Z' clip-rule='evenodd'/%3E%3C/svg%3E");
background-color: theme('colors.accent.DEFAULT');
@apply dark:bg-accent-dark;
}
}
& h1,
& h2,
& h3,
& h4 {
@apply relative clear-both -mx-8 text-balance px-8 font-heading oldstyle-nums proportional-nums stacked-fractions tracking-tight;
& .anchor {
@apply opacity-0;
}
&:hover .anchor {
@apply opacity-100;
}
}
& h1 {
@apply pb-4 pt-8 text-4xl lg:pb-6 lg:pt-12 lg:text-5xl;
}
& h2 {
@apply mb-3 mt-12 border-t-4 border-ui-border-hr pt-10 text-3xl first-of-type:mt-0 first-of-type:border-none lg:mb-6 lg:mt-16 lg:pt-14 lg:text-4xl dark:border-ui-border-hr-dark;
}
& h3 {
@apply pb-3 pt-5 text-2xl lg:pb-6 lg:pt-10 lg:text-3xl;
}
& h4 {
@apply pb-3 pt-5 text-xl lg:pb-6 lg:pt-10 lg:text-2xl;
}
& p,
& ul,
& ol,
& pre,
& kbd,
& samp,
& code,
& table,
& img {
@apply mb-3 leading-[1.35rem] lg:text-base lg:leading-[1.68rem];
}
& ul li {
@apply relative before:absolute before:left-[-1.4em] before:content-['→'];
}
& ol li {
@apply relative before:absolute before:left-[-1.4em];
&::before {
content: counter(list-item) '.';
}
}
& p code,
& table code {
@apply rounded-md border border-code-stroke bg-code-bg px-[0.4em] py-[0.1em] font-source text-[0.91em] dark:border-code-stroke-dark dark:bg-code-bg-dark;
}
& pre {
@apply relative overflow-hidden overflow-x-auto rounded-md border border-code-stroke bg-code-bg py-3 dark:border-code-stroke-dark dark:bg-code-bg-dark;
code {
@apply m-0 block pl-4;
}
& .line {
@apply pr-4;
}
* {
@apply font-source text-[0.97em];
}
&:hover,
&:active,
&:focus {
@apply border-code-stroke-hover dark:border-code-stroke-hover-dark;
& .copy-button {
@apply hover:opacity-100;
}
}
}
& .copy-button {
@apply icon-[solar--copy-bold] absolute right-2 top-2 z-10 h-5 w-5 cursor-pointer opacity-40 hover:opacity-80;
&.has-passed {
@apply icon-[solar--check-square-bold] h-5 w-5 opacity-80;
}
&.has-failed {
@apply icon-[solar--forbidden-circle-bold] h-5 w-5 opacity-80;
}
}
& img {
@apply rounded-md border border-code-stroke bg-code-bg text-sm dark:border-code-stroke-dark dark:bg-code-bg-dark;
}
& table {
@apply block w-full overflow-x-auto whitespace-nowrap lg:whitespace-normal;
& thead th:first-child,
& thead th:nth-child(3) {
@apply w-1/3;
}
& tr {
@apply border-b border-ui-border-hr last:border-b-0 dark:border-ui-border-hr-dark;
}
& td {
@apply px-2 py-3 align-top first:pl-0 last:pr-0;
}
& th {
@apply border-b border-text px-2 pb-2 text-left font-normal first:pl-0 last:pr-0 dark:border-text-dark;
}
}
& blockquote {
@apply my-6 text-pretty border-l-4 border-ui-border-hr pl-4 lg:my-8 dark:border-ui-border-hr-dark;
}
}
@media (prefers-color-scheme: dark) {
.astro-code,
.astro-code span {
background-color: var(--shiki-dark-bg) !important;
color: var(--shiki-dark) !important;
font-style: var(--shiki-dark-font-style) !important;
font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important;
}
}