73 lines
1.3 KiB
CSS
73 lines
1.3 KiB
CSS
|
@layer components {
|
||
|
|
/* Rendered markdown is raw html, so it can't carry utility classes — style the tags. */
|
||
|
|
.content-markdown {
|
||
|
|
h1 {
|
||
|
|
@apply text-2xl leading-tight;
|
||
|
|
font-family: var(--font-heading);
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
@apply text-xl leading-tight;
|
||
|
|
font-family: var(--font-heading);
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
@apply text-lg leading-snug;
|
||
|
|
font-family: var(--font-heading);
|
||
|
|
}
|
||
|
|
|
||
|
|
ul {
|
||
|
|
@apply list-inside list-disc;
|
||
|
|
}
|
||
|
|
|
||
|
|
ol {
|
||
|
|
@apply list-inside list-decimal;
|
||
|
|
}
|
||
|
|
|
||
|
|
li {
|
||
|
|
@apply my-2;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Markdown wraps loose list items in a paragraph, which would break the line */
|
||
|
|
li p {
|
||
|
|
@apply inline;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
@apply text-primary underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
img {
|
||
|
|
@apply max-w-full rounded-2xl;
|
||
|
|
}
|
||
|
|
|
||
|
|
hr {
|
||
|
|
@apply bg-line rounded-full;
|
||
|
|
border: none;
|
||
|
|
height: var(--border-thin);
|
||
|
|
}
|
||
|
|
|
||
|
|
code {
|
||
|
|
@apply bg-surface-less rounded px-1;
|
||
|
|
box-decoration-break: clone;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre code {
|
||
|
|
@apply block overflow-x-auto p-3;
|
||
|
|
}
|
||
|
|
|
||
|
|
blockquote {
|
||
|
|
@apply border-line text-content-muted border-l-4 border-solid pl-4;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
@apply block w-full border-collapse overflow-x-auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
th,
|
||
|
|
td {
|
||
|
|
@apply border-line border border-solid px-3 py-2 text-left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|