alice.pds.demo.boltless.dev
This repository has no description
1/* styles for rendered markdown, see $lib/markup. the html is sanitised to a known
2 set of tags and classes, so everything here is addressed by element */
3@layer components {
4 .markup {
5 @apply typography-paragraph-regular text-foreground-default;
6 }
7
8 .markup > :first-child {
9 @apply mt-0;
10 }
11
12 .markup > :last-child {
13 @apply mb-0;
14 }
15
16 .markup h1,
17 .markup h2,
18 .markup h3,
19 .markup h4,
20 .markup h5,
21 .markup h6 {
22 @apply mt-6 mb-3 font-medium text-foreground-default;
23 }
24
25 .markup h1 {
26 @apply border-b border-border-default pb-2 typography-heading-3;
27 }
28
29 .markup h2 {
30 @apply border-b border-border-default pb-2 typography-heading-4;
31 }
32
33 .markup h3 {
34 @apply typography-paragraph-large font-semibold;
35 }
36
37 .markup h4,
38 .markup h5,
39 .markup h6 {
40 @apply typography-paragraph-regular font-semibold;
41 }
42
43 .markup a.anchor {
44 @apply ml-2 text-foreground-placeholder no-underline opacity-0 transition-opacity;
45 }
46
47 .markup :hover > a.anchor,
48 .markup a.anchor:focus-visible {
49 @apply opacity-100;
50 }
51
52 .markup p,
53 .markup blockquote,
54 .markup ul,
55 .markup ol,
56 .markup pre,
57 .markup table,
58 .markup details {
59 @apply my-3;
60 }
61
62 .markup a {
63 @apply text-foreground-link-default underline hover:text-foreground-link-hover;
64 }
65
66 .markup a.mention {
67 @apply font-medium no-underline hover:underline;
68 }
69
70 .markup strong {
71 @apply font-semibold;
72 }
73
74 .markup ul,
75 .markup ol {
76 @apply pl-6;
77 }
78
79 .markup ul {
80 @apply list-disc;
81 }
82
83 .markup ol {
84 @apply list-decimal;
85 }
86
87 .markup li + li {
88 @apply mt-1;
89 }
90
91 .markup li > ul,
92 .markup li > ol {
93 @apply my-1;
94 }
95
96 .markup dt {
97 @apply mt-3 font-semibold;
98 }
99
100 .markup dd {
101 @apply pl-6;
102 }
103
104 .markup blockquote {
105 @apply border-l-2 border-border-strong pl-4 text-foreground-muted;
106 }
107
108 .markup code {
109 @apply rounded bg-background-inset px-1 py-0.5 typography-monospace-small font-mono;
110 }
111
112 .markup pre {
113 @apply overflow-x-auto rounded border border-border-default bg-background-inset p-3;
114 }
115
116 /* pre above already has the padding and background, inline code would double it */
117 .markup pre code {
118 @apply bg-transparent p-0 typography-monospace-small font-mono;
119 }
120
121 .markup kbd {
122 @apply rounded border border-border-default bg-background-subtle px-1.5 py-0.5 typography-monospace-small font-mono;
123 }
124
125 .markup hr {
126 @apply my-6 border-t border-border-default;
127 }
128
129 .markup img,
130 .markup video {
131 @apply inline-block max-w-full;
132 }
133
134 .markup table {
135 @apply block w-max max-w-full border-collapse overflow-x-auto;
136 }
137
138 .markup th,
139 .markup td {
140 @apply border border-border-default px-3 py-1.5 text-left;
141 }
142
143 .markup th {
144 @apply bg-background-subtle font-semibold;
145 }
146
147 .markup summary {
148 @apply cursor-pointer font-medium;
149 }
150
151 .markup ul.task-list-container {
152 @apply list-none pl-0;
153 }
154
155 /* only the outermost list gives up its indent, a nested one still steps in */
156 .markup li > ul.task-list-container {
157 @apply pl-6;
158 }
159
160 /* the checkbox and its label stay in the inline flow, so a nested list still
161 drops to its own line */
162 .markup input[type="checkbox"] {
163 @apply mr-1 translate-y-0.5;
164 }
165
166 /* a footnote you jump to lands mid screen rather than up against the top */
167 .markup :is(a.footnote-anchor, li.footnote-item)[id] {
168 scroll-margin-top: 48vh;
169 }
170
171 .markup sup.footnote-ref a {
172 @apply no-underline hover:underline;
173 }
174
175 .markup hr.footnotes-sep {
176 @apply mt-8;
177 }
178
179 .markup section.footnotes {
180 @apply typography-paragraph-small text-foreground-muted;
181 }
182
183 /* github style alerts, `> [!NOTE]` and friends */
184 .markup .markdown-alert {
185 @apply my-3 border-l-2 border-border-default pl-4;
186 }
187
188 .markup .markdown-alert-title {
189 @apply font-semibold;
190 }
191
192 .markup .markdown-alert > :last-child {
193 @apply mb-0;
194 }
195
196 .markup .markdown-alert-note {
197 @apply border-background-info-emphasis;
198 }
199
200 .markup .markdown-alert-note .markdown-alert-title {
201 @apply text-foreground-info;
202 }
203
204 .markup .markdown-alert-tip {
205 @apply border-background-success-emphasis;
206 }
207
208 .markup .markdown-alert-tip .markdown-alert-title {
209 @apply text-foreground-success;
210 }
211
212 .markup .markdown-alert-important {
213 @apply border-background-info-emphasis;
214 }
215
216 .markup .markdown-alert-important .markdown-alert-title {
217 @apply text-foreground-info;
218 }
219
220 .markup .markdown-alert-warning {
221 @apply border-background-warning-emphasis;
222 }
223
224 .markup .markdown-alert-warning .markdown-alert-title {
225 @apply text-foreground-warning;
226 }
227
228 .markup .markdown-alert-caution {
229 @apply border-background-danger-emphasis;
230 }
231
232 .markup .markdown-alert-caution .markdown-alert-title {
233 @apply text-foreground-danger;
234 }
235}